Streaming live at 10am (PST)

Pages are not responsive


#1

I'm having a really hard time understanding responsive design elements in Webflow. I made two pages with many different SVGs, buttons, text, etc. that are not responsively displaying when viewed on a tablet, phone, and other small devices. I can't figure out what I've done on these two pages to not abide by responsive rules. I need help understanding what I'm doing wrong. The link to my Webflow design is below.


Here is my public share link: https://preview.webflow.com/preview/vanessas-wondrous-site-74-ef4733f0aee9e?preview=37b2f69af1f885a25b8680d0c19a10f5

(how to access public share link)


#2

Hi @v.rrodriguez,

It's a simple fix. All you have to do is change the max width size in different responsive modes. Currently your icons are set to 100%.

Also, if you want your 3 icons to sit side by side in phone landscape, click on the column element and go to the settings to change mobile stacking from side to side or sit on top of each other.

Hope this helps.


#3

Thanks for your help! I was able to change the icons and have them fit perfectly with your suggestions. However, I'm still having trouble with the alignment of the text, background images, and buttons. Sometimes when I change the Max from 100% to anything lower, it adjusts the image off the screen; and when I try to align it, it changes the look on the desktop version too, while not containing it to the mobile version.


#4

Hi @v.rrodriguez,

You're welcome. Happy to help :slight_smile:

I see where it's gone wrong a bit.

Here's my thorough review;

  1. The hero section (yellow background) - Your main heading should be H1 and a text block instead of an image, for SEO purposes. Why not have the cartoon image in it's separate div block instead of a background image, because in responsive mode the cartoon image and the text image are trying to fight against each other to show in the center.

Instead, have both in separate div blocks / columns / flexbox and the yellow background image as separate. This way, in responsive mode the cartoon image and the headline text will stack on top of each other.

Also the headline text image has -200 margin top, you're best off using a flexbox (2 clicks will make the text display center of the section. Video tutorial https://flexbox.webflow.com/#split-screen

  1. In responsive mode, your drop down menu displays 'MEET VANESSA' in the middle whilst the other nav links are in their normal position, this is because you've set it to display inline. Best practice is to use font align center.

Please note; when you make design changes in tablet mode, the style will cascade down to landscape and mobile, which means you don't need to make substantial changes again, only small ones like reducing the font size etc.

  1. In the hot pink section, the heading in column 1 has -76px left margin and -194px right margin. Set both to 0px. To change the column width, select the column element that your font or icon is placed on > right click and go to settings > grid options > customise the width.

  2. Your icon images should be retina. Minimum size should be at least 1080px by 1080px. This will display crisp sharp in responsive mode and you can easily control the size to be medium / small. Currently, your icon sizes are 256px which isn't great.

  3. Avoid setting minus left & right margins to headline and text blocks, to center it just use the text align center option.

Hope this helps.


#5

You are amazing! Thank you for taking your time to help me with the details. I went ahead and followed your div block idea for the splash page (yellow image)- it worked perfectly! I'm still trying to figure out the flexbox thing and will continue to watch videos on it. Quick question for clarity. Do you want me to have 1 div box with 2 columns and each column used as a flexbox to make that work? Right now, I just used the div box and the image for the splash page, but I'm having a hard time with the header.

Thanks for the heads up on changing the font size in the tablet & mobile views- I didn't know font size is not linked to all viewing modes. I'm also getting the feeling that it's best practice to not set the left and right margins to negative.

Thanks again, nwdsha!


#6

Hi @v.rrodriguez,

Thank you, I'm delighted to hear that! :smiley:

You don't have to use Flexbox but it makes things easier in the long run. Otherwise, when you set up a column, place a div block in each one and then insert your content (headling, paragraph, image, etc).

For different responsive modes you should adjust different things like the font size, padding, line height etc. It's just the way responsive design works in general.

Definitely avoid negative left and right margins, at the moment your content is overflowing the container and that's why it's not displaying correctly on screen.

Happy to help anytime.


#7

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