2

Me encontré un ejemplo ilustrativo, muy creativo lo he tratado de imitar pero me estoy perdiendo en los estilos CSS

La idea es conseguir el mismo ejemplo de la imagen:

introducir la descripción de la imagen aquí

Lo logrado hasta el momento.

Código completo:

#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>

¿Ahora mi pregunta?

Como puedo juntar los 3 cuadros en una sola fila horizontal, tal como muestra la imagen, y al cambiar de dispositivo se realice el responsive ordenadamente.

1
  • Echa un vistazo a Bootstrap y su modelo en columnas getbootstrap.com/css/#grid
    – user45237
    Commented el 15 jun. 2017 a las 6:11

2 respuestas 2

1

De hecho ya te lo está haciendo.

La última media query:

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

Es la responsable del cambio. Con resoluciones por encima de 992 pixels te muestra los tres cuadros en horizontal (al asignarle el ancho del 25% a cada uno). En resoluciones por debajo te los muestra uno encima de otro al no aplicarse este estilo.

Si eliminas la media query y aplicas siempre el estilo, siempre se mostrarán distribuidos horizontalmente:

#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>

Si deseas que el cambio se realice para otras resoluciones no tienes más que cambiar el valor de min-width en la media query.

0

Buenas @May,

He tratado de mirar tu código y creo que deberías de usar "flex" en tu css. En 3wschool te dan alguna ayuda de como se usa CSS flex Property

Aquí te dejo tu código un poco modificado, espero haberte ayudado.

#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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.