Streaming live at 10am (PST)

Trouble keeping consistency in between breakpoints

Hi guys,

So I’m using flexbox to design my website. And I encounter slide problem when working on 2 different screen size at the same time. Sometimes I do them on a 1280px screen (macbook 13") and sometimes bigger (iMac).

I’m really not a coder, my background is design so it’s kinda hard for me to grasp some of the topic answers related to my questions here. Still have much more to learn! @sarahc and @VladimirVitaliyevich suggested using vw and vh but it seems to not work?

You can find the project here

So this is what I see on 13" screen

and imac screen ![|690x349](upload://v2oT7Onw6XJWKgmSixFSKge2GOi.png)

Same goes to my past project :

13" screen

imac screen ![|690x348](upload://7hDUEiqBqdPxgP3kufg0pjhryYz.png)

Looking forward for the help!

Thank you!

Use VH and VW for everything. Including text, padding, margines and so on. :+1:

I see @VladimirVitaliyevich

But why is it for some elements it turns red and uneditable when I added the vh or vw?

  1. Can you make a screenshot of items turning red? I haven’t ever seen that before.

  2. Do you see the same inconsistencies when you view the published pages and in the editor?

  3. What browsers are you using for each of your computers?

  4. When I open your project I see the 13" inch screen. My monitor is 1920x1200 px

  5. For that, your header might look nicer if you
    a. Change the height of the hero wrapper to auto (and maybe use min-height 40vh if you want it to be at least that tall)
    b. Add a top and bottom padding to the hero-wrapper (maybe 80px to match the sides)

Hi @sarahc

  1. It happens when I put space between the numbers and vh or vw. I figured it out after one time try typing them differently. That problem is solved now!

But here’s a screenshot just to show you what I meant:

  1. Yes, but only on the 13" because I suspect they only show the center of the page. And it won’t show you the rest of the screen.

  2. It’s Chrome 50.

  3. How do you know that you’re opening a 13" project?

  4. Yep, I think they help. But still seems a bit off. Will it help if I edit the rest of the breakpoints along the way? But I’m not done editing the desktop version of the website. But if I do that now, it will be a lot of back and forth.

Will applying what suggested here help? Activate 1200px "Large Screen" media query

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