Unwanted size changes as an image moves from full width to tablet

Hi Everyone -

I’m (still new at this so hopefully this is an easy fix :slight_smile: I’m mostly done with a website for a client - I decided to loosely base it on the egoMade ‘Chef’ template that I purchased as I thought it would be a good way t see how things were put together. I have a section that has a two column layout on a background - one side has text, the other is an image. In full width view, everything looks great - when I look at it in tablet view, the text box and image box are two different heights.I believe t

his happened in the ‘Chef’ template as well, just not to the degree it does for me. See images below…

Thanks in advance!


Hi There @Robert – Long time no see. Without having the project file in-hand it is hard to say since I didn’t build the project file. It seems to be standard responsive behavior that is resizing the image for the smaller breakpoint. Maybe though @egomade can lend an eye to it though.

Yes, it has been a long time - so long that I forgot how to send you the project at hand :slightly_smiling_face:

I’d love to get it in front of you (I have a couple of other, smaller issues as well).

Thanks -


Are these bugs with the stacks themselves or troubleshooting content issues like the one above? If it is the latter then that is something better for posting on the forum. If it is the former please detail the bug you’re seeing as in depth as possible and send that report over along with a sample of the problem. It is best to replicate the bug in as simple a setup as possible to make sure there’s not a lot of outside influence on the stack(s).

If you need to send a project over for bug reporting you can send it to adam at elixirgraphics dot com

Alright - No one’s responded though :frowning: I may need to try the other forums as well. I thought that I would try here first as I’m using Foundry :slight_smile:

Question - I know that some image stacks fill a container and scale within that container responsively. That’s what I was hoping would happen here. It seems to be doing that with regards to width, but not height. Or maybe it’s fine and the text stack is the one that’s changing in height.

Any way to control that or do you suggest having a different setup for each breakpoint. My gut tells me to try to avoid that as much as I can because of bloat. But my gut is uninformed and inexperienced :slight_smile:


I have responded to you. :wink:

Responsive images resize their width in a responsive environment and adjust their height accordingly to keep the correct aspect ratio of the image as to not distort the image. In other words if the height remained the same while just the width changed then the image would be squished or stretched horizontally as the width of the browser or device changed.

The text can’t get smaller in this case. The amount of text you have there is a set amount. It doesn’t become less so as the containing div shrinks down the text has to go somewhere, so its container gets narrower which leads to a longer display of that content.

Hi there Robert,

Like Adam mentions, It would be of great help if you could share your project, you can do so using a service like http://wetransfer.com or Dropbox and send the link to the project via private message here in the Forum.

1 Like