Product Landing Page--> Responsive CSS

How do I make it so that when I make my screen width smaller my NAV menus moves with the screen. The example product landing page does this but I cant figure what code they used to achieve this. Or it may be that I am using some code that is preventing my NAV from doing that.

Also I am trying to figure out how to make my product landing page more responsive. I am having trouble learning the responsive CSS. For example how do you know how many pixels to set the MIN and MAX to?

Also any other suggestions on my code would help. I am fairly new to coding.

Thank you so much,

Andrej

Here is the code to my pen: https://codepen.io/drdre5/pen/LYpdMbm

Greetings @andrejjj222,

I believe you’re writing more code than the one needed to accomplish what you want. This can be the source of endless hours of frustration. Sometimes the solution is not to add more code, but to remove the previous one you wrote, as it can be conflicting with itself.

A Pen is better than a thousand words, so here it goes:

Hope you find it helpful. It’s just the navbar recreated, though, but it should give you a better understanding of how flex works. Play with it and try to break it!

Ok thanks alot! That really helped. Is it smart to use pixels or is it better to use relative units since they are better for responsive websites?

Also I dont see exactly why your code works and mine did not.

Thanks,

Andrej

Hey @andrejjj222,

I made this for a fellow Camper, it may help you make better use of divs and flex for responsive design:

Think of the whole page as a series of boxes, where each one is inside of another:

image

I would avoid using pixels, %, and relative units. The only element in the image width a fixed width is the nav-content max-width: 1200px;. Any other element is using padding and margins, aside from the .nav-container with width: 100%;

In the Shoes section, for example:

Don’t use width to make the boxes wider. Use padding instead:

You could then remove the margin and the default padding of the ordered list and the list items will be perfectly centered:

Ok thank you so much! So your code worked because you used padding instead of pixels or relative units. This way when the window resizes the padding will keep pushing the text with it?

This is my code now. The nav works and moves with the screen but I am having trouble with the responsiveness of the website and using media queries. When I resize the window the header just gets all smushed.

Thanks,

Andrej

@andrejjj222

Yep! The padding will push the whole nav-content-right with all the items inside it when the page is resized.

@andrejjj222

To get the nav-content-right div below the logo when the page resizes, you can add a media query:

@media (max-width: 980px) {
  #nav-content  {
    flex-direction: column;
  }

  #nav-content-right {
    position: relative;
    display: flex;
    align-self: center;
  }

  #nav-content-left {
    justify-content: center;
  }
}

There is no need to use positioning when using flexbox, in fact, I would avoid positioning whenever possible. Either use some space distribution on the parent flex container or use auto margin on the flex item/child.

Space distribution on parent:

#nav-content {
  width: 100%;
  display: flex;
  box-sizing: border-box;
  padding: 0 30px;
  /* push the flex children apart */
  justify-content: space-between;
}

Or flex item left auto margin.

#nav-content-right {
/*   position: absolute; */
/*   right: 30px; */

  /* take up the space between the flex items */
  margin-left: auto;
}

Here is a refactored version based on the code that was posted already
https://codepen.io/lasjorg/pen/MWaXjgg

1 Like

I think you are approaching this the wrong way. You are working on the wide screen version first and then adding a media query for the smaller screen. Do the opposite. Don’t use any media queries, narrow your browser as far as it will go, and style for the narrow screen. After you are happy with that slowly widen your browser until you find a width that gives you enough horizontal room to rearrange the elements on your page for a wider screen. This will be your first break point. The break point will be based on min-width, not max-width, and you should probably use ‘em’ units instead of ‘px’ so it is responsive to text size changes as well as browser width changes.

Ok thank you so much for the tip! When you reach that break point how do you know what value to put on the min-width in term of pixels? Also how come I sometimes see people using simply @media (min…) vs @ media only screen and()…

Thanks,
Andrej

Ok thank you for the tip! Why should I stay away from positioning? In this code https://codepen.io/drdre5/pen/OJyEyYw I used absolute positioning and got the nav to the left side of the screen.

Thanks,
Andrej

Thanks you are a genius! It worked! How do you know what values to put in the max pixel width for media queries?

Hey @andrejjj222,

It depends on the device. I usually use 1440px or 1366px for laptops, 980px for landscape tablets, 720px for portrait tablets and 420px for mobile devices.

You can see a complete list of the media queries for devices here:

1 Like

Ok thank you!! I posted a link to my technical documentation page https://codepen.io/drdre5/pen/OJyEyYw

If you have the time, let me know what you think.

Thanks,

Andrej

On this landing page everything works good except when I resize the screen the Nike text gets discombobulated. Why is that?

Thanks,

Andrej

@andrejjj222

Remove both media queries at 650px.

1 Like

By default pages are pretty responsive on their own, the text will wrap, (most) elements will shrink, and the content will be put in the order they appear in the HTML. The normal document flow is what you should always aim for.

Here is an analogy. Think of water and how it flows using the path of least resistance. The page is like a river with a natural flow (by default, left to right, top to bottom). This is how the elements flow through the page.

Placing elements should be done like a rock in the river guiding the water without taking the water out of the flow. Using positioning is like picking up the water (removing it from the flow) and manually moving it to some position.

But this position is rarely constant or fixed, it needs to change as the page gets wider or narrower. As this happens, the page will reflow the elements as needed. As long as elements are just part of the flow they will not need as much (if any) correction done to them, unlike out of flow elements.

Fighting the flow by manually positioning elements “out of flow” will make the layout inflexible and will often lead to more code.

Think of this like the norm you should aim for, not some absolute hard and fast rule.

1 Like