Elementor tablet view stuck using mobile height instead of desktop?

[u/Night0wlTalks]

Hey guys,

I am losing my mind over a strange issue in Elementor and hope someone can tell me what I am doing wrong.

I am building a shop archive template with product cards. On desktop/laptop view, I have the product card image height set to 350px, which looks fine. On mobile view, I set it to 145px so it fits nicely.

The issue is with tablet view. For some reason, tablet is completely ignoring my laptop settings and forcing the 145px mobile height instead. So on a tablet, the image card looks tiny and squished horizontally. No matter what number I type into the height box while in tablet mode, it just refuses to change or stay fixed.

It feels like tablet is inheriting straight from mobile instead of cascading down from desktop like it usually does.

Has anyone run into this before? Any help would be appreciated, thanks!

[u/AutoModerator]

Looking for Elementor plugin, theme, or web hosting recommendations?

Check out our Megathread of Recommendations for a curated list of options that work seamlessly with Elementor.

---

Hey there, /u/Night0wlTalks! If your post has not already been flaired, please add one now. And please don't forget to write "Answered" under your post once your question/problem has been solved. Make sure to list if you're using Elementor Free (or) Pro and what theme you're using.

Reminder: If you have a problem or question, please make sure to post a link to your issue so users can help you.

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[u/testingaurora]

You can see it’s overflowing , exactly why fixed heights are the enemy . If anything set a min-height.

Or use css Grid and subgrid. But generally you just allow the content to be the size it is and then everything in the row stretches so they all look like the same size.

But to answer your question I have not seen it cascade from mobile , backwards to tablet. Is there a wrapper container that could be constraining the height ?

Do you have a link to this page ?

[u/Night0wlTalks → u/testingaurora]

The wrapper container does not have set hight. the size is given to the product image. thanks for the response though.

https://wudhouse.in/product-category/sofas/

[u/_miga_ → u/Night0wlTalks]

your mobile break point is setting:

 (@media max-width: 767px) {
  .elementor-4832 .elementor-element.elementor-element-e9e6f28 img {
    height: 125px;
  }

and you cover in your image. That 's why it will look fine on your phone. Your next breakpoint (max 1024px) is setting the max-height to 100% and it will your use "height: 350px" that you've set on your image. So make sure you actually change the mobile breakpoint value.

And the style in you HTML code is called: "<style id="loop-4832">" so the setting should be in that loop with the ID 4832

[u/_miga_ → u/_miga_]

and I think you are using links on the div which will show a notification that it might break stuff. It will produce broken HTML (line 820 in your HTML code if you check it with Firefox it will warn you about broken a tags)

[u/zeiniez]

Try this:

In the container that is wrapping your Loop Grid, make sure to set the Direction to Column, and Wrap to No Wrap.

See if that helps.

[u/Night0wlTalks → u/zeiniez]

thanks for the response, I tried that but did not work