Streaming live at 10am (PST)

Changing Image and Text Block Sizes on Desktop and Mobile


#1

Hi all,

Having some trouble with spacing on my company's LP. On the desktop layout, I've inserted three columns, each with an image and a text block. The columns are horizontally arranged.

When I go to the mobile layout, I see that my images and text blocks fall outside of the frame. However, when I try to rearrange the mobile layout to fit, I end up changing the spacing and sizing on the desktop layout. So I'm basically in an endless loop of adjusting the mobile and desktop versions.

How can I be sure that a change I make to the mobile layout editor will only push to the mobile layout (and desktop edits only pushing to the desktop site)? Any help would be appreciated.

Thanks,
Frank Kosarek


Here is my public share link: https://preview.webflow.com/preview/franks-first-project-5d2814?preview=91411c52b04f35dbc5450c91bd670044
(how to access public share link)


#2

Hi @Frank_Kosarek great question!

I noticed that you're using negative margins and a few other settings to try and position elements rather than a few standard settings.

I recommend doing the following to your row (see the GIF when you click through): https://cl.ly/223c3C2O1M0m

Then set text-align to center to center your child elements:

Then remove the negative margin styles from your text elements (as shown in this GIF): https://cl.ly/3x3W392Y0n2v

I also recommend watching through this responsive web design course to learn a little more about responsive design. There are many elements positioned using negative margins and have pixel based height settings on them while the heights could be set to "auto" instead.


#3

Great. I just did both of those things.

I’m still having the issue of bleedover from the mobile to desktop formatting. When I try to re-size or re-position an element in mobile, it just reverses my formatting changes in desktop.

It seems almost like I need a separate style class for the mobile and desktop images, but it doesn’t look like that’s possible through the interface. Is there anything else I can do?

Thanks,
Frank Kosarek


#4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.