Streaming live at 10am (PST)

Designer Inconsistencies

Trying to understand why my images inside of the rich text component appear correct in the designer preview, but slightly misaligned in the browser (when I test the mobile size), and then completely different when viewing the live site on my mobile phone.

Here is the read only link: https://preview.webflow.com/preview/lifeatfourtyseven?utm_medium=preview_link&utm_source=designer&utm_content=lifeatfourtyseven&preview=5b919d96fa85af499fa398db8f191f7f&pageId=5ecab2f406d25c2f3d1769d6&itemId=5ee0f1fc1442e26982dc4123&mode=preview

Here is the live site: https://www.lifeatfourtyseven.com/stories/a-surprise-ultrasound-visit

Any help would be appreciated.

Hey Greg!
So sorry nobody tried to help here!
Do you still experience that issue or did you solve it somehow?
Let me know and I’ll try to assist!

I am still experiencing this issue and would love some help on the matter.

1 Like

I will have a deeper look tonight!

So, I tested your page with different browsers (desktop, mobile (emulated and native android) for FF and Chromium. I was not able to find any inconsistencies between them, they all worked the same. I can’t test IOS and safari, so there’s that.

You use this right-sided layout with the rich-text from desktop to landscape-mobile. Only mobile has it centered. The vast negative space on the left may work for larger screens, for my liking on tablet and below it does not work as good - especially for the landscape mobile one!

Try setting the images in the rich text to full-width

Also play with the class of the images and try setting them to 100% width.

A good idea would be to remove all the individual margins on the left for each element in the rich text and just style the rich text to it takes the desired width and alignes to the right…

Take a look at the second screenshot I posted. Notice how the image (on mobile) fits perfectly to the grid? Now take a look at the fourth screenshot. Notice how the images (on mobile) do not align to the grid, but instead are smaller? My problem is that when I preview the images, they are the correct size, but when I publish them, they are not.

Hi, I’m quite new to webflow, but I have spent the last week really trying to master layout. One thing I noticed if you could try to set a min width for the photos. When I tried this the image stayed responsive (the image was in a div box that I made into a flex box though.

Or maybe instead of grid try a flex box?

Sorry to chime in, looks like you got a more seasoned member helping, I just came across similar issues a few days back.

Thanks

Hey man that worked! I appreciate it. Have a good one :slight_smile: