Rendering simple html page responsive using CSS/

user_15102286 0
Viewed 52

I'm in the process of rendering a simple HTML page responsive. Was intending for it to be 3 column when full size with left nav, and then when in mobile view all content is centered so it goes header, nav, content, and then bottom image fit to bottom of screen. However now when I run it the nav bar stays to the left and is overlapped by other content. Pointers would be greatly appreciated as I'm very new. Thank you!

Here are my HTML and CSS: CSS:

      body {
        background-color: #88abc2;
        margin:0;
      }
    
      .image{
          height: 250px;
          border-radius:5px; 
          background-repeat: no-repeat;
          display:block;
          padding-bottom:10px;
          float:left;
          margin-top: 20px;
          width: 25%
      }
    
      .header{
          padding-top: 100px;
          color: white;
          text-align: center;
          font-size: 50px;
          font-family: papyrus;
          background-color:#49708A;
          justify-content: center;
          align-items:center;
      }
    
    #wrapper {
        /* width:900px; */
        height:100%;
        margin: 10px;
        padding: 0px;
        width:67%;
    }
    @media (max-width: 768px) {
        /* nav li { display: inline-block;
                  width: 7em;
                  padding: 0.5em;
                  border: none; }
        .nav a   { text-align: center;
                 float: none;
                 width: 100%;
                 font-size: 17px;}
        main     { float: left;
                   width: 55%; } */
                #wrapper { width:100%; }
                .nav { width:100%; margin:0; border:none;
                display:inline-block;
                width: 7em;
                padding: 0.5em;
                border: none; }
               .nav a{ text-align: center;}
               main{ float: left;
                width: 55%;}
       }
    
    .nav {
        height: 100%;
        width: 20%;
        padding-top: 40px;
        background-color:#49708A;
      } 
    
    .nav a{
        padding-left:3px;
        padding: 6px 6px 6px 32px;
        font-weight: bold;
        color: #EBF7F8;
        text-decoration: none;
        font-size: 25px;
        display: block;
    }
    ul {
        list-style-type: none;
        margin: 0;
        overflow: hidden;
      }
    
    .nav a:hover {
        color: #CAFF42;
      }

    main{
       padding-top: 38px;
        text-align:left;
        padding-left: 30%;
    }
    
    .image2{
        height:250px;
        width:400px;
        position: absolute;
        right: 0px;
        bottom: 0px;
        right:0px;
        bottom: 0px; 
    }
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="HandheldFriendly" content="true">  
        <title>Lab 7</title>
        
            <link rel="stylesheet" href="lab7.css">
          
    </head>
    <body>
            <img class= "image" alt="flower" src="flower.jpg"style="max-width:100%;height:auto;">
            <header>
                <h1 class="header">Photos By Doug</h1>
           </header>
           <div id ="wrapper">
            <main> Here is some content info about Doug Kowalski Photography</div>
            <!-- <div id="header"></div> -->
            <div class="nav">
                <a href="#">Home</a><br>
                <a href="#">Journals</a><br>
                <a href="#">Books</a><br>
                <a href="#">Nature</a><br>
                <a href="#">Contact</a><br>
              </div>
             
                  
              <img class ="image2" alt="vine" src="vine.jpg"style="max-width:100%;height:auto;">
          
       
            </main>
    </body>
    </html>

responsive css html
1 Answers

First you should be careful about tags and their closing. You have main tag inside a div tag and you are closing the div first before closing the main tag. Firstly you should check it out

<div id ="wrapper">
 <main> Here is some content info about Doug Kowalski Photography</div>                   
 </main>

To

<div id ="wrapper">
 <main> Here is some content info about Doug Kowalski Photography                   
 </main>
</div>

Secondly you have align-items and justify-content in your header css class. They only work if your display is flex. Careful about it.

Lastly it's hard to understant your question but you can use flex in your nav,content and image part, first you can use display:flex as a flex-direction:flex-row in a div that contains navbar and another div(this div contains content and image) and they will be side by side. After in mobil version you can make flex-direction:flex-col so navbar will be at of above and then you will get your content and image. Do not forget that you should take the content and image in a div after navbar and you should declare the tags in a order. If you want to see the nav at left or top you should declare it first.

You can check it for flex and mobile example

Flex-direction

And there is a common mistake in responsive design, sometimes your mobil code won't work cause you already declare that css attribute. You will get the best practice in time. For now if you get problem like that, use

 !important

after your css attribute in your media css.

user_145564130
Related