Question 262543 in Html Question posted in
Some basic documentation can be found here.

Html – How to make margins responsive?

I’ve got two columns that I want equally spaced and with some blank space between their borders. I’ve added css to make it responsive so that the columns are stacked vertically when the screen size gets to be too small, but when the columns are stacked on top of each other, they are no longer centered on the page. How do I fix this?

.row {
  margin: 5%;
}


/* Create two equal floating columns */

.column {
  text-align: center;
  width: 40%;
  padding: 4%;
  border-radius: 20px;
  color: #f0e7e0;
  background: #777a44;
  margin-bottom: 10%;
  margin-left: 5%;
  margin-right: 5%;
}


/* Responsive layout */

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}
<div class="row">
  <div class="column">
    <h2>Inquiries?</h2>
    <br />
    <p>Text</p>
  </div>
  <div class="column">
    <h2>Want to connect?</h2>
    <br />
    <p>Text</p>
  </div>
</div>
Tags:

2

Answers


  1. 0

    Simply change margins to classic margin-[left|right]: auto;

    .row {
  margin: 5%;
}


/* Create two equal floating columns */

.column {
  text-align: center;
  width: 40%;
  padding: 4%;
  border-radius: 20px;
  color: #f0e7e0;
  background: #777a44;
  margin-bottom: 10%;
  margin-left: auto;
  margin-right: auto;
}


/* Responsive layout */

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  margin-left: 5%;
  margin-right: 5%;
  }
}
    <div class="row">
  <div class="column">
    <h2>Inquiries?</h2>
    <br />
    <p>Text</p>
  </div>
  <div class="column">
    <h2>Want to connect?</h2>
    <br />
    <p>Text</p>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Have you considered switching to a more modern approach to css layouts. For example you could use flex-box to manage your responsive breakpoints like so:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .row {
            display:flex;
            flex-direction: row;
        }

        /* Create two equal floating columns */
        .column {
            text-align: center;
            padding: 5%;
            margin: 5%;
            border-radius: 20px;
            color: #f0e7e0;
            background: #777a44;
            flex: 1;
        }

        /* Responsive layout */
        @media screen and (max-width: 600px) {
            .row {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
<div class="row">
    <div class="column">
        <h2>Inquiries?</h2>
        <br /><p>Text</p>
    </div>
    <div class="column">
        <h2>Want to connect?</h2>
        <br /><p>Text</p>
    </div>
</div>
</body>
</html>

    This allows you "to make it responsive so that the columns are stacked vertically when the screen size gets to be too small".

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

Back To Top
Search