Question 45650 in CSS Question posted in
Some basic documentation can be found here.

How can i make my web layout less wide while keeping it responsive at the same time? – CSS

I am making a web layout for my website and i ran into an issue. The overall width of the layout is too much, i’d like to have some margins on the sides of the screen. The layout is responsive but when i add margins to the sides and the responsivity is no longer there and the page looks horrible on a small screen.

Html:

<!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.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <link rel = "stylesheet" href = "style.css">
    <title>Document</title>
</head>
<body>

    <div class="wrapper">
        <header class="header">
            <h1>Bootstrap</h1>
        </header>

            <article class="main">
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. At, corporis quibusdam officia magnam asperiores exercitationem laboriosam dolorum hic minima pariatur?
                </p>

            </article>

        <footer class="footer">
            <h1>Footer</h1>
        </footer>
    </div>

    

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script src = "web.js"></script>
</body>
</html>

css:

body{
    background-color: gray;
}
.wrapper{
    display:flex;
    flex-flow: row wrap;
    text-align: center;
    color: black;
}

.wrapper > * {
    padding: 10px;
    flex: 1 100%;
    border-radius: 5px;
    margin: 10px;
}
.header{
    background: white;
    height: 250px;
}

.footer{
    background: white;
    height: 80px;
}
.main{
    text-align: left;
    background: white;
    height: 300px;
    font-size: 24px;
    height: 1200px;
}

I tried adding margins to the sides but it didn’t work.

.wrapper > * {
    padding: 10px;
    flex: 1 100%;
    border-radius: 5px;
    margin: 10px 300px 10px 300px;
}
Tags:

2

Answers


  1. 0

    You may want to use @media in CSS

    @media only screen and (max-width: 600px) {
    .wrapper > * {
        margin: 0px;
    }       
}
    Login or Signup to reply.
  2. 0

    Easiest way would be to give the .wrapper a max-width and set the margins to center it

    .wrapper{
    max-width: 80vw;  // layout will be this same width on every screen
    margin: 0 auto;  // wrapper will be centered
    display:flex;
    flex-flow: row wrap;
    text-align: center;
    color: black;

    }

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search