Product Page challenge

Hi there FreeCodeCamper,

I have an issue with my Product Landing Page design: Whenever I minimize or resize the web page, the divs do not move into place, then you cannot view the content witihn the divs e.g paragraphs info…etc.

The Link: https://jsbin.com/bolodoh/4/edit?html,css,output

Cheers.

One way to address the issue is to introduce a <main> tag. Set its width to 100vw and its display to grid with 2 columns. The width of the left column should be the same as the width of the nav-bar and the right column should take up the rest of the available space. The left column should be left empty while the right column should host your content in divs, nested grids, or nested flex displays (as seen fit).

This would make sure they resize with the browser width but keep them from going behind the nav-bar (which happens if you scroll side ways). But you’ll also need @media queries to make sure you switch to say a hamburger menu so you don’t shrink the right column too much (i.e. at some point, you’ll probably want it to spread across the entire width of the screen and shrink the nav-bar to a hamburger menu).

You’ll probably also need to move your header img and h1 tags into the main tag so that they have the same grid specs as the rest of your main content.

…CSS

#main{
   width: 100vw;
   display: grid;
   grid-template-columns: 'width-of-nav-bar' 1fr;
   grid-template-areas:
       'left-empty-col main-content';
}

…HTML

<header>
    <nav></nav>
</header>
<main id="main">
   <div>
     <img>
     <h1></h1>
   </div>
   .
   .
   .
   .
</main>

Something like so. Let us know if you need anymore help or clarification.

@Yardlees, Thanks for your advice and help, will work it out.