[ANSWERED] html – How can I center 3 boxes to match screen resolution?

Question 1

Take a look at this, with Flexbox you can easily align your items inside a container in either rows or columns, this way you can avoid unnecesary and messy margins as well as some changes in media queries.

You can read more about Flexbox Here

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.header {
  overflow: hidden;
  background-color: #f1f1f1;
  padding: 20px 10px;
}

.header a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
}

.header a.logo {
  font-size: 25px;
  font-weight: bold;
  font-family: 'Montserrat', sans-serif
}

.header a:hover {
  background-color: #ddd;
  color: black;
}

.header a.active {
  background-color: dodgerblue;
  color: white;
}

.header-right {
  float: right;
}

.box-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.border,
.border2 {
  flex: 0 0 320px;
  padding: 10px;
  border: 3px solid black;
}

.box-container>div:nth-child(2) {
  margin: 0 10px;
}

@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }
  .header-right {
    float: none;
  }
  .maintext {
    font-family: 'Roboto', sans-serif;
  }
  .box-container>div:nth-child(2) {
    margin: 0;
  }
}

<div class="header">
  <img src="switchicon.ico" width=2.5% height=5%>
  <a href="#default" class="logo">keyBoard</a>

  <div class="header-right">
    <a class="active" href="#home">Home</a>
    <a href="#FAQ">FAQ</a>
    <a href="#news">News</a>
    <a href="#contacts">Contact Us</a>
  </div>

</div>

<div style="padding-left:20px">
  <h1>Example Header</h1>
  <p>Lorem Ipsum</p>
  <p>Insert Content Here</p>
</div>

<!--MAIN TEXT BOXES-->


<div class="box-container">
  <div class="border" style="font-family: 'Open Sans', sans-serif;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
    eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <!-- ^ LEFT TEXT BOX ^ -->

  <div class="border2" style="font-family: 'Open Sans', sans-serif;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
    eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>

  <div class="border2" style="font-family: 'Open Sans', sans-serif;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
    eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

Question 2

You can use margin: 0 auto to center a single element. Futhermore you can use breakpoints like @media (min-width: 768px) { ... }

With an example of your page its more easy to give a detailed answer.

Question 3

I have 3 text boxes on my site currently, but they only scale properly on 1920×1080

.border {
  width: 320px;
  padding: 10px;
  border: 3px solid black;
  margin-left: 450px;
  display: inline-block;
}

.border2 {
  width: 320px;
  padding: 10px;
  border: 3px solid black;
  margin-left: 20px;
  display: inline-block;
}

How can I scale them correctly so they center all 3 on different resolutions and stack on mobile 9:16 resolutions?

Full HTML/CSS https://pastebin.com/wtiVngjz

Bollate

[ANSWERED] html – How can I center 3 boxes to match screen resolution?

By

Solution 1 :

Solution 2 :

Problem :

Comments

Comment posted by IvanS95

Comment posted by pastebin.com/wtiVngjz

By

Related Post

[ANSWERED] How do you add a background image in the margins and top of the page behind the body? (Html, Css)

[ANSWERED] html – I can’t get my carousel buttons to respond bootstrap 4

[ANSWERED] javascript – Locomotive Scroll not working with Vue.js when having to load images on page

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate