Streaming live at 10am (PST)

Almost Done with my first site


#1

Then realized that my graphics, pictures, text, etc. are all different depending on what screen I’m on. If I get on smaller laptop/screen, everything bunches up and pictures spazz out. What am I doing? Any help would be great!


#2

Hi Chris,

Can you send a share-only link for your site, so we can see what you’re seeing?

https://university.webflow.com/article/sharing-your-sites-read-only-link

Steve


#3

Hey Steve, thank you! Here’s the link

https://preview.webflow.com/preview/chris-hollands-stupendous-project?utm_source=chris-hollands-stupendous-project&preview=a3349d5205530b470dbfcbec34d354b3


#4

Hey Chris,

Thanks for sending the link. So it seems that you’ve not made any adjustments to the layout for responsiveness? When you click the 4 device icons at the top of the window (Desktop, Tablet, etc) the elements aren’t responding because there are no adjustments made per break point.

For example, the main “Find your dream home” header in the top image — you have it positioned manually in the desktop version, by adjusting the padding. In this case, the padding-left is 340px:

Which means, when you go to Tablet mode, the element is being forced 340px to the right, which takes it off-screen:

Instead, in Desktop view, change the Div Block 9 to a Flexbox element, set child items to centre vertically and horizontally, remove ALL the padding settings, and set the div to 100% height, so it scales to responsively fit the height of the parent item (your slide image).

Now, it’s automatically responsive when in Tablet mode, because the flex box item is responsive and not based on fixed padding numbers:

Obviously, once you go to Tablet and Mobile modes, you then need to make minor adjustments to the elements to make sure they’re readable on smaller screen sizes (so the main header, you can reduce the font size, etc, and that will then cascade down to mobile), and that’s the beauty of it. You make the main, automatic set up at the start on Desktop, so the bulk of the responsiveness is automatic, and then make a few tweaks to size as the screen gets smaller.

In this instance, the box around the header should be the controlling item, where centred text and padding can be added (and not to the text inside), making it easier to be responsive:

It took me a while to get the hang of WF too, but once you start planning ahead and making everything as automatic as possible (and not using padding or margins with fixed numbers to position elements you want to be responsive), it changes everything — and makes it way faster! :blush:

I hope this helps? I might also suggest looking at the Flexbox tutorials (if you haven’t already), as they will really help understand the power and flexibility of these simple items, making responsive really much easier:

https://university.webflow.com/topic/design-layout-positioning-flexbox

And in particular this one about centring items with Flexbox:

https://university.webflow.com/article/centering-elements-with-flexbox

Keep at it — you’re doing great so far! Remove the dependency on fixed numbers, and you’ll be flying.

Enjoy!

Steve
STEVE HOLMES
Creative Director
ENERGI.DESIGN

MOTION_WEB_UXUI


#6

Steve, thank you so much. Wow didn’t realize how bad I actually am, a lot to look into. Should probably watch tutorials, ha. Dude this is a lot of help, thank you for taking the time.