I have spent more hours than i can admit trying to figure this out. I’ve already watched all the webflow uni lessons I could find but I’m still lost.
In my project I have my attempt (“section”) and then the same thing using a component (“hero heading right”).
My problem is that I want the sizing as it is in the desktop version of “section” (ie big image and wide text) but it gets distorted on smaller breakpoints. The “hero heading right” works find across breakpoints but it doesn’t look so good on desktop because the image and text are too small.
Any help welcome! I’d love to learn how to size side-by-side image and text but I’ve tried using a div wrapper, a grid, columns and I’m not getting anywhere with it.
I see the differences but can you describe “but it gets distorted on smaller breakpoints”? Are you talking about the padding and alignment of the text below the image or some aspect of the image itself? It looks like you’re on the right path with your experimental section. Just need to fine-tune the padding and spacing.
The “hero heading right” structure uses a container with a max width setting of 940 on desktop and 728 on tablet view.
Thanks for replying. I mean that in the first one (section) it’s good on desktop but by mobile i need to make it smaller but don’t know how. I’ve tried adding the image as an image to a cell, as a image to a div, as a background to a div and played around with the display of each but I get this (screenshot).
There are numerous things wrong with your set up for this image. See steps in screen grabs below. I think you can reset almost all other settings you’ve applied to the parent containers associated with this cell
Thanks fo much for setting out those steps so clearly for me, I’m very grateful for your help. Most of them worked, I think.
The first image was still bigger than the second one on smaller breakpoints despite having the same values for the images and their parent containers. I resized the first image in photoshop to match the second and that worked, though I feel I should have been able to adjust it through webflow settings.
