Home / Questions / 78795
Accepted
May
Asked: 2020-06-15 22:02:45 +0800 CST 2020-06-15 22:02:45 +0800 CST

How to sort three div box/frames?

  • 772

I found an illustrative example, very creative I have tried to imitate it but I am getting lost in the stylesCSS

The idea is to get the same example of the image:

enter image description here

What has been achieved so far.

Full code:

#fobd {
margin-top: 70px !important;
margin-bottom: -35px !important;
padding-top: 10px !important;
padding-bottom: 70px !important;
background: #eeeeee url(http://skilled.aislinthemes.com/app/uploads/2015/08/pricing-plans.png?id=10681) !important;
background-position: 0 0 !important;
background-repeat: no-repeat !important;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}

.center {
text-align: center;
}

.row {
margin-right: -15px;
margin-left: -15px;
}

.four-column {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.frame-item {
padding: 1em;
border: 1px solid #B2B2B2;
}

@media (min-width: 1200px){
.container {
width: 1170px;
}}
@media (min-width: 992px){
.container {
width: 970px;
}}
@media (min-width: 768px){
.container {
width: 750px;
}}

@media (min-width: 992px){
.four-column {
float: left;
width: 25%;
}}
<div id="fobd">
  <div class="container">
  <h2 class="center">CONTACT US</h2>
  </div>
  
  <div class="container">
<div class="row">
  <div class="four-column middle-pro">
    <div class="frame-item">
      <h1>
        Contact US
      </h1>
    </div>
  </div>
  
  <div class="four-column middle-pro">
    <div class="frame-item">
      <h1>
        Contact US
      </h1>
    </div>
  </div>
  
  <div class="four-column middle-pro">
    <div class="frame-item">
      <h1>
        Contact US
      </h1>
    </div>
  </div>
  
</div>
  </div>
  
</div>

Now my question?

How can I join the 3 frames in a single horizontal row, as shown in the image, and when I change the device, the responsive is carried out in an orderly manner.

html

2 Answers

  1. Best Answer

    In fact, it's already doing it to you.

    The last media query:

    @media (min-width: 992px){
  .four-column {
    float: left;
    width: 25%;
  }
}

    She is responsible for the change. With resolutions above 992 pixels, it shows you the three boxes horizontally (by assigning the width of 25% to each one). In resolutions below it shows them one on top of the other as this style is not applied.

    If you remove the media query and always apply the style, they will always display distributed horizontally:

    #fobd {
margin-top: 70px !important;
margin-bottom: -35px !important;
padding-top: 10px !important;
padding-bottom: 70px !important;
background: #eeeeee url(http://skilled.aislinthemes.com/app/uploads/2015/08/pricing-plans.png?id=10681) !important;
background-position: 0 0 !important;
background-repeat: no-repeat !important;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}

.center {
text-align: center;
}

.row {
margin-right: -15px;
margin-left: -15px;
}

.four-column {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.frame-item {
padding: 1em;
border: 1px solid #B2B2B2;
}

@media (min-width: 1200px){
.container {
width: 1170px;
}}
@media (min-width: 992px){
.container {
width: 970px;
}}
@media (min-width: 768px){
.container {
width: 750px;
}}

.four-column {
  float: left;
  width: 25%;
}
    <div id="fobd">
  <div class="container">
  <h2 class="center">CONTACT US</h2>
  </div>
  
  <div class="container">
<div class="row">
  <div class="four-column middle-pro">
    <div class="frame-item">
      <h1>
        Contact US
      </h1>
    </div>
  </div>
  
  <div class="four-column middle-pro">
    <div class="frame-item">
      <h1>
        Contact US
      </h1>
    </div>
  </div>
  
  <div class="four-column middle-pro">
    <div class="frame-item">
      <h1>
        Contact US
      </h1>
    </div>
  </div>
  
</div>
  </div>
  
</div>

    If you want the change to be made for other resolutions, simply change the min-width value in the media query.

    • 1

  2. Hi @May,

    I have tried to look at your code and I think you should use "flex" in your css. In 3wschool they give you some help on how to use CSS flex Property

    Here I leave your code a little modified, I hope I have helped you.

    #fobd {
margin-top: 70px !important;
margin-bottom: -35px !important;
padding-top: 10px !important;
padding-bottom: 70px !important;
background: #eeeeee url(http://skilled.aislinthemes.com/app/uploads/2015/08/pricing-plans.png?id=10681) !important;
background-position: 0 0 !important;
background-repeat: no-repeat !important;
}
.container {
    width: 100%;
    height: 300px;
    border: 1px solid black;
    display: -webkit-flex; /* Safari */
    display: flex;
    margin: auto;
}

.center {
text-align: center;
}

.four-column {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.frame-item {
	padding: 1em;
    border: 1px solid #B2B2B2;
    -webkit-flex: 1;  /* Safari 6.1+ */
    -ms-flex: 1;  /* IE 10 */    
    flex: 1;
}

@media (min-width: 1200px){
.container {
width: 1170px;
}}
@media (min-width: 992px){
.container {
width: 970px;
}}
@media (min-width: 768px){
.container {
width: 750px;
}}

@media (min-width: 992px){
.four-column {
float: left;
width: 25%;
}}
    <div id="fobd">
  <div class="">
  	<h2 class="center">CONTACT US</h2>
  </div>
  
  <div class="container">
    <div class="frame-item">
      <h1>
        Contact US
      </h1>
    </div>

    <div class="frame-item">
      <h1>
        Contact US
      </h1>
    </div>

    <div class="frame-item">
      <h1>
        Contact US
      </h1>
    </div>

  </div>
  
</div>

    • 0