Mysterious padding left-right on 320px width device
Question
I'm using bootstrap to make col grid's. In desktop and table it's work great, but in the xs-size (especially on the 320px device width, like an iPhone 5) it's shows an space on the right side, and I don't know why. You can see live here . You can see the snapshot here too, look at the space of the right side:
How I can fix it? I tried resize the font text but didn't worked.
<div class="container content-parent">
<div class="col-lg-12 mx-auto">
<div class="fila-animada">
<div class="row icons-info">
<div class="col-6 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
<div class="container mt-3 pb-5 pt-5">
<!-- Card Flip -->
<div class="card-flip">
<div class="flip">
<div class="front">
<!-- front content -->
<div class="card">
<div class="card-block">
<img src="img/Icono%20Casa-04.png" />
<h2>ABIERTO 24/7</h2>
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<p>Con seguridad las 24 horas y equipo humano a tu disposición.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
</div>
</div>
<div class="col-6 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
<div class="container mt-3 mb-2 pb-5 pt-5">
<!-- Card Flip -->
<div class="card-flip">
<div class="flip">
<div class="front">
<!-- front content -->
<div class="card">
<div class="card-block">
<img src="img/Icono%20Wifi-04.png" />
<h2>FREE WI-FI</h2>
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<p>Conectividad permanente en todas las instalaciones.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
</div>
</div>
<div class="col-6 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
<div class="container mt-3 mb-2 pb-5 pt-5">
<!-- Card Flip -->
<div class="card-flip">
<div class="flip">
<div class="front">
<!-- front content -->
<div class="card">
<div class="card-block">
<img src="img/Icono-Silla%20ruedas-03.png" />
<h2>ACCESIBILIDAD</h2>
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<p>Disponemos de zonas adaptadas y trabajamos en próximas mejoras.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
</div>
</div>
<div class="col-6 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
<div class="container mt-3 mb-2 pb-5 pt-5">
<!-- Card Flip -->
<div class="card-flip">
<div class="flip">
<div class="front">
<!-- front content -->
<div class="card">
<div class="card-block">
<img src="img/Icono-Piscina.png" />
<h2>PISCINA</h2>
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<p>Para disfrutar con los amigos o simplemente para relajarse o hacer deporte.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
</div>
</div>
</div>
</div>
<div class="fila-animada">
<div class="row icons-info">
<div class="col-6 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
<div class="container mb-3 pb-5 pt-5">
<!-- Card Flip -->
<div class="card-flip">
<div class="flip">
<div class="front">
<!-- front content -->
<div class="card">
<div class="card-block">
<img src="img/Icono%20Libro-04.png" />
<h2>BIBLIOTECA</h2>
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<p>Zona de estudio amplia y silenciosa donde estudiar, trabajar o hacer consultas.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
</div>
</div>
<div class="col-6 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
<div class="container mb-3 pb-5 pt-5">
<!-- Card Flip -->
<div class="card-flip">
<div class="flip">
<div class="front">
<!-- front content -->
<div class="card">
<div class="card-block">
<img src="img/Icono%20Comedor-04.png" />
<h2>COMEDOR</h2>
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<p>Gran zona común para disfrutar del desayuno, comida o cena.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
</div>
</div>
<div class="col-6 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
<div class="container mb-3 pb-5 pt-5">
<!-- Card Flip -->
<div class="card-flip">
<div class="flip">
<div class="front">
<!-- front content -->
<div class="card">
<div class="card-block">
<img src="img/SALON-DE-ACTOS-03.png" />
<h2>SALÓN DE ACTOS</h2>
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<p>Estancia destinada a eventos culturales y formativos, dónde puedes ser el protagonista.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
</div>
</div>
<div class="col-6 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
<div class="container mb-3 pb-5 pt-5">
<!-- Card Flip -->
<div class="card-flip">
<div class="flip">
<div class="front">
<!-- front content -->
<div class="card">
<div class="card-block">
<img src="img/SALA-MULTIMEDIA-03.png" />
<h2>SALA MULTIMEDIA</h2>
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<p>Espacio que permite jugar con la videoconsola, juegos de mesa, usar el karaoke o ver la TV.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
</div>
</div>
</div>
</div>
<div class="fila-animada">
<div class="row icons-info">
<div class="col-6 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
<div class="container mb-3 pb-5 pt-5">
<!-- Card Flip -->
<div class="card-flip">
<div class="flip">
<div class="front">
<!-- front content -->
<div class="card">
<div class="card-block">
<img src="img/Icono%20Gym-04.png" />
<h2>GIMNASIO</h2>
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<p>Recinto con todas las manquinarias e instalaciones necesarias para la actividad física.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
</div>
</div>
<div class="col-6 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
<div class="container mb-3 pb-5 pt-5">
<!-- Card Flip -->
<div class="card-flip">
<div class="flip">
<div class="front">
<!-- front content -->
<div class="card">
<div class="card-block">
<img src="img/LAVANDERIA-03.png" />
<h2>LAVANDERÍA</h2>
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<p>Zona completamente reformada para el lavado y secado de la ropa.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
</div>
</div>
<div class="col-6 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
<div class="container mb-3 pb-5 pt-5">
<!-- Card Flip -->
<div class="card-flip">
<div class="flip">
<div class="front">
<!-- front content -->
<div class="card">
<div class="card-block">
<img src="img/chill.png" />
<h2>CHILL OUT</h2>
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<p>Zonas ajardinadas y de chill out para encontrar la relajación y diversión que llevas dentro.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
</div>
</div>
<div class="col-6 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
<div class="container mb-3 pb-5 pt-5">
<!-- Card Flip -->
<div class="card-flip">
<div class="flip">
<div class="front">
<!-- front content -->
<div class="card">
<div class="card-block">
<img src="img/Icono%20Comunidad-04.png" />
<h2>COMUNIDAD</h2>
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<p>Estilo de vida basados en los valores del #WeAreRucab.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
1 answers
solution1
1 ACCPTED 2019-04-07 23:56:59
The problem is the card flip's font size. The "back" sides of the card have text that's too long and it's causing you to horizontally scroll even though you can't see the content. Additionally, the "front" sides of the card has text wrapping in awkward places because the screen isn't wide enough to show a full word at that font size. I would add the following CSS in a media query that targets these smaller screens (not quite sure when you should bring the size down).
// Prevent the card back from creating a scroll bar
.card-flip .back .card-block p {
font-size: 13px;
}
// Lower the font size because the text wraps in a single word
#rucab .card-flip .front .card-block h2 {
font-size: 20px;
}
To debug things like this, I open my inspector in the browser and just start pressing the Delete key on divs until the problem goes away. Then once I find the one that "fixed" the problem, I start looking at the content of that container to figure out what's going wrong. I repeat this process for children inside the problem div until I can track down the issue.
Update: I'm no longer experiencing the issue, but I see that you've now changed the flip card section to only be 1 card wide instead of two. That looks nice! That also fixes the problem of the words being too wide for the container, since the containers are now twice as wide.
solution2
0 2019-04-07 23:21:09
Making the overflow hidden may solve your problem
body{
overflow:hidden;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Why is the content on this webpage on a mobile device with smaller equal 320px width not 100% wide?
media queries max width 320px issue
@media (320px) not working with my columns to make them 100% width
media query for 320px and less
display: block; has no effect on @media (max-width: 320px)
twitter boostrap (responsive) : .span3 taking .span6 full width behaviour when width between 320px and 797px
My banner picture is not displaying using “@media (min-width: 320px) and (max-width:767px)”
Absolute positioned child should be at the same size as its parent as im resizing the screen between 320px and 767px screen width
Unwanted border around 320px wide div
The image inside the columns doesnt fit in the 320px screen
Related Tags