How to make a fixed size content

HelloWorld1 0
Viewed 34

Goal:
Make the content to have fixed width 700px in desktop only and the left-content and right-content width should adapt to desktop's width.

Problem:
I don't know how to solve it in a good way.

Info:
*The layout needs to take account to responsive design.
*Desktop width size start att min-width 901px
*Stil newbie in css layout

Jsbin:
https://jsbin.com/wegebemoqe/edit?html,css,output

<!DOCTYPE html>
<html>

    <head>
        <title></title>
        <meta charset="UTF-8" />
    </head>
    <body>
        <div id="container">
            <div id="top-content" class="palette-1">
                top
            </div>
            <div id="content" class="palette-2">
                content
            </div>
            <div id="footer" class="palette-4">
                footer
            </div>
            <div id="left-content" class="palette-5">
              
            </div>
            <div id="right-content" class="palette-5">
              
            </div>
        </div>
    </body>
</html>

body {
    color: white;
    text-align: center;
    box-sizing: content-box;
    margin: 20px;
    
}

.palette-1 {
    background-color: #83B2FF;
}

.palette-2 {
    background-color: #8BF18B;
}

.palette-4 { 
    background-color: #FF8650;
}

.palette-5 { 
    background-color: #FF555E;
}

#container {
    margin: 2.5rem;
    padding: 0.625rem;
    background-color: #FFE981;
    height: 37.5rem;
    width: calc(100vw - 10rem);
    display: grid;
    grid-template-areas:
      "header header header header"
      "left-content content content right-content"
      "footer footer footer footer";
    row-gap: 1rem;
}

@media screen and (min-width: 901px) {
    #content {
      width: 700px;
    }
}            

@media screen and (max-width: 900px) {
  #container {
    grid-template-areas:
      "header header"
      "content content"
      "footer footer"
    }
  

    #left-content, #right-content {
      display: none;
    }
}  

.item {
  padding: 1.5rem;
}

#top-content {
    grid-area: header;
}

#content {
    grid-area: content;
}

 #footer {
    grid-area: footer;
}
css html
2 Answers

Why you don't set for #content that size when you need or example 700px, and when you don't need just set width: auto.

Aeroxer Support0

https://jsbin.com/tubodokusa/edit?html,output

<!DOCTYPE html>
<html>

    <head>
        <title></title>
        <meta charset="UTF-8" />
    </head>
    <body>
        <div id="container">
            <div id="top-content" class="palette-1">
              <div id="testtest">
                <img src="https://i2.wp.com/vanillicon.com/9d348569b83638e8dea4e9ef05a828b4_200.png" width="100px" height="45px" />
              </div>
              <div id="asdfasdf">
                <span onclick="myFunction2()">Menu</span>
                <img onclick="myFunction()" src="https://i2.wp.com/vanillicon.com/9d348569b83638e8dea4e9ef05a828b4_200.png" width="100px" height="45px" />
              </div>
              <ul id="iconmenu" class="nav-menu">
                <li class="title">Coffee</li>
                <li class="title">Tea</li>
                <li class="title">Milk</li>
              </ul>
            </div>
            <div id="content" class="palette-2">
                content
            </div>
            <div id="footer" class="palette-4">
                footer
            </div>

        </div>
    </body>
</html>

body {
    color: white;
    text-align: center;
    box-sizing: content-box;
    margin: 0;
}

.palette-1 {
    background-color: #83B2FF;
}

.palette-2 {
    background-color: #8BF18B;
}

.palette-4 { 
    background-color: #FF8650;
}

.palette-5 { 
    background-color: #FF555E;
}

#container {
  

  
}


#content {
    grid-area: content;

}

 #footer {
    grid-area: footer;
}


@media only screen and (min-width: 1030px) {
  #container {
    
  background-color: #FFE981;
  width: 100%;
  display: grid;

  grid-template-areas:
    "left-header header right-header"
    "left-content content right-content"
    "left-footer footer right-footer";
    row-gap: 1rem;

  
    display: grid;
    /*
    grid-template-columns: 1fr fit-content(500px) 1fr;
       grid-template-columns: 1fr auto 1fr; */
    grid-gap: 5px;
    box-sizing: border-box;
    height: 200px;
    background-color: #8cffa0;
    padding: 10px;      
    
    
    grid-template-columns: 1fr 1000px 1fr;
    grid-template-rows: auto auto auto;    
  }
  
  #top-content {
    grid-area: header;
    display: flex;
    align-items: center;
    justify-content: center;
    
    border-top: 3px solid #425c62;
  }
  
  #asdfasdf {
    display: none;
  }
  
  ul.nav-menu {
    margin: 0;
  }

  ul.nav-menu > li {
    display: inline-block;
    padding: 0 10px 0 10px;
    margin: 0;
    line-height: 70px;
    border-top: 1px solid #83B2FF;

  }

  ul.nav-menu > li:hover {
    background-color: #2779BF;
    border-top: 1px solid #425c62;
  }  
  
  #content {

  }
  
}            



@media only screen and (max-width: 1029px) {
  #container {
    grid-template-areas:
      "header"
      "content"
      "footer"
  }
  
  #top-content {
    grid-area: header;
    align-items: center;
  }
  
  #left-content, #right-content {
    display: none;
  }
  
  
  .mystyle {
    display: none;
    transition: all 1s ease-in;
    padding: 0 0 0 0;    
    line-height: 0;
  } 
  
  
  #testtest {
    background-color: blue;
  }
  
  #asdfasdf {  
    /**/
    grid-area: header;
    display: flex; 
    align-items: center;
    justify-content: space-between; 
    
    background-color: grey; 
  }  

  ul.nav-menu {
    margin: 0;
  }

  ul.nav-menu > li {
    display: inline-block;
    padding: 0 10px 0 10px;
    margin: 0;
    line-height: 70px;
    border-top: 1px solid #83B2FF;

  }

  ul.nav-menu > li:hover {
    background-color: #2779BF;
    border-top: 1px solid #425c62;
  }  
  
  #content {

  } 
  
  
} 

function myFunction() {
  var element = document.getElementById("iconmenu"); 
  element.classList.add("mystyle");
}

function myFunction2() {
  var element = document.getElementById("iconmenu"); 
  element.classList.remove("mystyle");
}
HelloWorld10
Related