Sandeep Karmacharya Sandeep Karmacharya - 19 days ago 8
CSS Question

Layout change after screen resize CSS

I have various errors with my design.

First of all, here is the link to the example site that I have been doing to learn HTML and CSS.

http://ramroweb.com/mnml/style.css

  • When the screen size is resized all the items from container moves to the right. Even though I used
    margin: 0 auto;

  • The whole content is within the
    div id="container"
    but still it selects upto the
    section tag
    excluding
    footer tag
    .

  • The background image does not fit the whole size creating some
    padding
    on the
    top
    .

    It would be great if I get help with these queries.

    Thank you...

  • Answer

    To get a responsive design try using percentages or vw/vh measurements. This way all the elements will get relative sizes to the user screen size. It's also good practice to make your website mobile accessible, so everything will nicely fit in the page when you open it on a narrower screen. More here -> https://snook.ca/archives/html_and_css/vm-vh-units. For example, check out this code (obviously you might want to adjust the scaling to fit your needs):

    body {
        width: 100%;
        background: url(img/beach.png) center no-repeat;
        background-color: #f3f2de;
        font-family: Courier, monospace;
        font-size: 15%;
        margin: 0 auto;
    }
    
    #container {
        color: #cc0000;
        margin: 0 auto;
        width: 92%;
    }
    
    header {
        margin: 0 auto;
        text-align: center;
        border-bottom: solid 5% black;
    }
    
    nav {
    
    }
    
    nav ul {
        list-style: none;
    }
    
    nav ul li {
        display: inline-block;
        padding: 0 10%;
        margin: 0 20%;
        font-weight: bold;
    }
    
    header {
        text-align: center;
        padding: 10% 0;
    }
    
    a:link {
    
    }
    
    a:visited {
        color: #cc0000;
    }
    
    a:hover {
        color: #fff200;
    }
    
    section {
        margin: 30% 0 40%;
    }
    
    section h1 {
        text-align: center;
        font-size: 1em;
    }
    
    section a {
        display: block;
        align-content: center;
        height: 100%;
        width: 50%;
        margin: 0 auto;
        margin-bottom: 30%;
    }
    
    footer {
        display: block;
        float: left;
    }
    
    Comments