I am learning to code and just doing my first project but I have a problem with media query; when I try:
#media screen and (min-width: 320px) and (max-width: 767px) doesn't work
#media screen and (max-width: 767px) doesn't work
It`s seems the browser ignore this, because I already did 768px to 1023px and it worked.
Please help me!, thanks in advance.
#media screen and (min-width: 320px) and (max-width: 767px) {
#logo img {
width: 80px;
height: 82px;
margin: 50px 0 0 20px;
}
.navbar {
width: auto;
font-size: xx-large;
}
.navbar ul {
height: auto;
}
.navbar li {
float:none;
}
#boton_registro {
float: none;
}
.navbar li a {
display: block;
padding: 15px;
margin-left: 40px;
}
#imagen1 {
width: 250px;
height: 250px;
float: none;
margin: 250px auto 20px auto;
}
#presentacion {
width: auto;
height: auto;
float: none;
margin: 0 10px 10px 10px;
padding: 0px;
}
#titulo {
text-align: center;
}
#contenido_presentacion {
font-size: large;
text-align: center;
}
#video1 video {
width: 90%;
height: auto;
float: none;
margin: 0 0 20px 15px;
}
#contenedor_cita {
width: 90%;
height: auto;
float: none;
margin: 0 0px 20px 15px;
padding: 15px;
}
#contenedor_cita p {
font-size: xx-large;
font-weight: 600;
margin-top: 0px;
}
#contenedor_cita h4 {
text-align: right;
margin-top: 0px;
}
#video2 video {
width: 90%;
height: auto;
float: none;
margin: 0 10px 10px 15px;
}
.contenedor .tarjeta_principal .tarjetas {
display: inline;
}
.tarjeta_principal .tarjetas .tarjeta {
width: calc(100% / 1 - 10px);
}
footer {
width: 90%;
margin-left: 5%;
margin-bottom: 10%;
}
#copyright {
text-align: center;
padding-top: 50px;
float: none;
}
#copyright p {
font-size: 15px;
margin-bottom: 0px;
}
#copyright p a {
font-size: 16px;
}
#social {
float: none;
}
#botonera_social ul {
display: flex;
}
#botonera_social ul li {
float: none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewpoint" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css"> <!-- Conexión con la hoja de estilo css -->
<link rel="icon" href="img/huella_2.png" type="img/jpg"> <!-- El icono que aparece en la pestaña de navegacion-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Caveat+Brush&family=Dancing+Script&display=swap" rel="stylesheet">
<title>Inicio</title> <!-- El título que aparece en la pestaña del navegador -->
</head>
<body>
<!-- Menú de Navegación -->
<header>
<div id="logo">
<img src="https://cdn-icons-png.flaticon.com/128/5068/5068966.png" alt="logo">
</div>
<nav class="navbar">
<ul>
<li>Inicio</li>
<li>Publicar</li>
<li>Adoptar</li>
<li id="boton_registro">Ingresar / Registrarse</li>
</ul>
</nav>
</header>
<br>
<br>
<!-- Contenido -->
<section id="contenido_principal">
<div id="imagen1"></div>
<article id="presentacion">
<h1 id="titulo">Adopta una Mascota</h1>
<p id="contenido_presentacion">Es un website con fines de reubicación de mascotas que se encuentran en condición de calle. Queremos darle la posibilidad a estos nobles seres, de ser amados y cuidados por su familia de acogida,
la cual disfrutará de la gratitud y el amor incondicional del nuevo miembro de la familia.
Es de suma importancia concientizar a la sociedad sobre la tenencia responsable de mascotas,
que abarca: castración, cuidados médicos, alimentación y bienestar emocional. A continuación te compartimos un poco de incentivo: Las mascotas ayudan a disminuir el estrés, te mantienen activo, ayudan a tener amigos y sanan el corazón.
</p>
</article>
<div id="video1"><video src="video/video_perro.mp4" autoplay muted loop type="video/mp4"></video></div>
<article id="contenedor_cita">
<p>“la grandeza de una nación y su progreso moral pueden ser juzgados por la forma en que se trata a sus animales”
<h4>Mahatma Gandhi</h4>
</p>
</article>
<div id="video2"><video src="video/video_gato.mp4" autoplay muted loop type="video/mp4"></video></div>
</section>
<div class="contenedor">
<h3>Buscando un hogar</h3>
<input type="radio" name="dot" id="one">
<input type="radio" name="dot" id="two">
<div class="tarjeta_principal">
<div class="tarjetas">
<div class="tarjeta">
<div class="contenido">
<div class="img">
<img src="img/img1.jpg" alt="cachorro marrón">
</div>
<div class="details">
<div class="nombre">Paco</div>
</div>
</div>
</div>
<div class="tarjeta">
<div class="contenido">
<div class="img">
<img src="img/img2.jpg" alt="gato siamés">
</div>
<div class="details">
<div class="nombre">Sirio</div>
</div>
</div>
</div>
<div class="tarjeta">
<div class="contenido">
<div class="img">
<img src="img/img3.jpg" alt="cachorra negra">
</div>
<div class="details">
<div class="nombre">África</div>
</div>
</div>
</div>
</div>
<div class="tarjetas">
<div class="tarjeta">
<div class="contenido">
<div class="img">
<img src="img/img4.jpg" alt="gato blanco y gris">
</div>
<div class="details">
<div class="nombre">Tom</div>
</div>
</div>
</div>
<div class="tarjeta">
<div class="contenido">
<div class="img">
<img src="img/img5.jpg" alt="perro adulto">
</div>
<div class="details">
<div class="nombre">Oddie</div>
</div>
</div>
</div>
<div class="tarjeta">
<div class="contenido">
<div class="img">
<img src="img/img6.jpg" alt="gata adulta">
</div>
<div class="details">
<div class="nombre">Gea</div>
</div>
</div>
</div>
</div>
</div>
<div class="button">
<label for="one" class=" active one"></label>
<label for="two" class="two"></label>
</div>
</div>
</body>
<footer>
<div id="contenedor_footer">
<div id="copyright">
<p>© Copyright 2022 Adopta una Mascota // Patrocinado por Royal Canin
</div>
<div id="social">
<nav id="botonera_social">
<ul>
<li><img src="img/ico/twitter.png" alt="Twitter"></li>
<li><img src="img/ico/facebook.png" alt="facebook"></li>
<li><img src="img/ico/instagram.png" alt="instagram"></li>
</ul>
</nav>
</div>
</div><!-- fin del contenedor -->
</footer>
</html>
My project CSS file is: Link
I think you can map media queries one by one according to the length and style you want to use, so you don't get confused
check this video
#media screen and (max-width: 320px) {
.navbar{
background-color: lightskyblue;
}
}
#media screen and (min-width: 768px) {
.navbar{
background-color: salmon;
}
}
#media screen and (min-width: 320px) and (max-width: 767px) {
#logo img {
width: 80px;
height: 82px;
margin: 50px 0 0 20px;
}
.navbar {
width: auto;
font-size: xx-large;
background-color: red;
}
.navbar ul {
height: auto;
}
.navbar li {
float:none;
}
#boton_registro {
float: none;
}
.navbar li a {
display: block;
padding: 15px;
margin-left: 40px;
}
#imagen1 {
width: 250px;
height: 250px;
float: none;
margin: 250px auto 20px auto;
}
#presentacion {
width: auto;
height: auto;
float: none;
margin: 0 10px 10px 10px;
padding: 0px;
}
#titulo {
text-align: center;
}
#contenido_presentacion {
font-size: large;
text-align: center;
}
#video1 video {
width: 90%;
height: auto;
float: none;
margin: 0 0 20px 15px;
}
#contenedor_cita {
width: 90%;
height: auto;
float: none;
margin: 0 0px 20px 15px;
padding: 15px;
}
#contenedor_cita p {
font-size: xx-large;
font-weight: 600;
margin-top: 0px;
}
#contenedor_cita h4 {
text-align: right;
margin-top: 0px;
}
#video2 video {
width: 90%;
height: auto;
float: none;
margin: 0 10px 10px 15px;
}
.contenedor .tarjeta_principal .tarjetas {
display: inline;
}
.tarjeta_principal .tarjetas .tarjeta {
width: calc(100% / 1 - 10px);
}
footer {
width: 90%;
margin-left: 5%;
margin-bottom: 10%;
}
#copyright {
text-align: center;
padding-top: 50px;
float: none;
}
#copyright p {
font-size: 15px;
margin-bottom: 0px;
}
#copyright p a {
font-size: 16px;
}
#social {
float: none;
}
#botonera_social ul {
display: flex;
}
#botonera_social ul li {
float: none;
}
}
<header>
<div id="logo">
<img src="https://cdn-icons-png.flaticon.com/128/5068/5068966.png" alt="logo">
</div>
<nav class="navbar">
<ul>
<li>Inicio</li>
<li>Publicar</li>
<li>Adoptar</li>
<li id="boton_registro">Ingresar / Registrarse</li>
</ul>
</nav>
</header>
<br>
<br>
<!-- Contenido -->
<section id="contenido_principal">
<div id="imagen1"></div>
<article id="presentacion">
<h1 id="titulo">Adopta una Mascota</h1>
<p id="contenido_presentacion">Es un website con fines de reubicación de mascotas que se encuentran en condición de calle. Queremos darle la posibilidad a estos nobles seres, de ser amados y cuidados por su familia de acogida,
la cual disfrutará de la gratitud y el amor incondicional del nuevo miembro de la familia.
Es de suma importancia concientizar a la sociedad sobre la tenencia responsable de mascotas,
que abarca: castración, cuidados médicos, alimentación y bienestar emocional. A continuación te compartimos un poco de incentivo: Las mascotas ayudan a disminuir el estrés, te mantienen activo, ayudan a tener amigos y sanan el corazón.
</p>
</article>
<div id="video1"><video src="video/video_perro.mp4" autoplay muted loop type="video/mp4"></video></div>
<article id="contenedor_cita">
<p>“la grandeza de una nación y su progreso moral pueden ser juzgados por la forma en que se trata a sus animales”
<h4>Mahatma Gandhi</h4>
</p>
</article>
<div id="video2"><video src="video/video_gato.mp4" autoplay muted loop type="video/mp4"></video></div>
</section>
<div class="contenedor">
<h3>Buscando un hogar</h3>
<input type="radio" name="dot" id="one">
<input type="radio" name="dot" id="two">
<div class="tarjeta_principal">
<div class="tarjetas">
<div class="tarjeta">
<div class="contenido">
<div class="img">
<img src="img/img1.jpg" alt="cachorro marrón">
</div>
<div class="details">
<div class="nombre">Paco</div>
</div>
</div>
</div>
<div class="tarjeta">
<div class="contenido">
<div class="img">
<img src="img/img2.jpg" alt="gato siamés">
</div>
<div class="details">
<div class="nombre">Sirio</div>
</div>
</div>
</div>
<div class="tarjeta">
<div class="contenido">
<div class="img">
<img src="img/img3.jpg" alt="cachorra negra">
</div>
<div class="details">
<div class="nombre">África</div>
</div>
</div>
</div>
</div>
<div class="tarjetas">
<div class="tarjeta">
<div class="contenido">
<div class="img">
<img src="img/img4.jpg" alt="gato blanco y gris">
</div>
<div class="details">
<div class="nombre">Tom</div>
</div>
</div>
</div>
<div class="tarjeta">
<div class="contenido">
<div class="img">
<img src="img/img5.jpg" alt="perro adulto">
</div>
<div class="details">
<div class="nombre">Oddie</div>
</div>
</div>
</div>
<div class="tarjeta">
<div class="contenido">
<div class="img">
<img src="img/img6.jpg" alt="gata adulta">
</div>
<div class="details">
<div class="nombre">Gea</div>
</div>
</div>
</div>
</div>
</div>
<div class="button">
<label for="one" class=" active one"></label>
<label for="two" class="two"></label>
</div>
</div>
</body>
<footer>
<div id="contenedor_footer">
<div id="copyright">
<p>© Copyright 2022 Adopta una Mascota // Patrocinado por Royal Canin
</div>
<div id="social">
<nav id="botonera_social">
<ul>
<li><img src="img/ico/twitter.png" alt="Twitter"></li>
<li><img src="img/ico/facebook.png" alt="facebook"></li>
<li><img src="img/ico/instagram.png" alt="instagram"></li>
</ul>
</nav>
</div>
</div><!-- fin del contenedor -->
</footer>
Maybe you can be consistent for writing media query in css. If you decide to use max-width, then use max-width on other query. So you not be confusing to read it. I'll be recomend to write css for mobile first, so you can use min-width when styling for desktop view. You can read this article that explain responsive web design.
And try to write comment as simple as possible, because a lot of comment will make your code looks messy. You can try to implement this article for good comment.
Related
I am learning to code and just doing my first project but I have a problem with media query; when I try:
#media screen and (min-width: 320px) and (max-width: 767px) doesn't work
#media screen and (max-width: 767px) doesn't work
It`s seems the browser ignore this, because I already did 768px to 1023px and it worked.
Please help me!, thanks in advance.
#media screen and (min-width: 320px) and (max-width: 767px) {
#logo img {
width: 80px;
height: 82px;
margin: 50px 0 0 20px;
}
.navbar {
width: auto;
font-size: xx-large;
}
.navbar ul {
height: auto;
}
.navbar li {
float:none;
}
#boton_registro {
float: none;
}
.navbar li a {
display: block;
padding: 15px;
margin-left: 40px;
}
#imagen1 {
width: 250px;
height: 250px;
float: none;
margin: 250px auto 20px auto;
}
#presentacion {
width: auto;
height: auto;
float: none;
margin: 0 10px 10px 10px;
padding: 0px;
}
#titulo {
text-align: center;
}
#contenido_presentacion {
font-size: large;
text-align: center;
}
#video1 video {
width: 90%;
height: auto;
float: none;
margin: 0 0 20px 15px;
}
#contenedor_cita {
width: 90%;
height: auto;
float: none;
margin: 0 0px 20px 15px;
padding: 15px;
}
#contenedor_cita p {
font-size: xx-large;
font-weight: 600;
margin-top: 0px;
}
#contenedor_cita h4 {
text-align: right;
margin-top: 0px;
}
#video2 video {
width: 90%;
height: auto;
float: none;
margin: 0 10px 10px 15px;
}
.contenedor .tarjeta_principal .tarjetas {
display: inline;
}
.tarjeta_principal .tarjetas .tarjeta {
width: calc(100% / 1 - 10px);
}
footer {
width: 90%;
margin-left: 5%;
margin-bottom: 10%;
}
#copyright {
text-align: center;
padding-top: 50px;
float: none;
}
#copyright p {
font-size: 15px;
margin-bottom: 0px;
}
#copyright p a {
font-size: 16px;
}
#social {
float: none;
}
#botonera_social ul {
display: flex;
}
#botonera_social ul li {
float: none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewpoint" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css"> <!-- Conexión con la hoja de estilo css -->
<link rel="icon" href="img/huella_2.png" type="img/jpg"> <!-- El icono que aparece en la pestaña de navegacion-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Caveat+Brush&family=Dancing+Script&display=swap" rel="stylesheet">
<title>Inicio</title> <!-- El título que aparece en la pestaña del navegador -->
</head>
<body>
<!-- Menú de Navegación -->
<header>
<div id="logo">
<img src="https://cdn-icons-png.flaticon.com/128/5068/5068966.png" alt="logo">
</div>
<nav class="navbar">
<ul>
<li>Inicio</li>
<li>Publicar</li>
<li>Adoptar</li>
<li id="boton_registro">Ingresar / Registrarse</li>
</ul>
</nav>
</header>
<br>
<br>
<!-- Contenido -->
<section id="contenido_principal">
<div id="imagen1"></div>
<article id="presentacion">
<h1 id="titulo">Adopta una Mascota</h1>
<p id="contenido_presentacion">Es un website con fines de reubicación de mascotas que se encuentran en condición de calle. Queremos darle la posibilidad a estos nobles seres, de ser amados y cuidados por su familia de acogida,
la cual disfrutará de la gratitud y el amor incondicional del nuevo miembro de la familia.
Es de suma importancia concientizar a la sociedad sobre la tenencia responsable de mascotas,
que abarca: castración, cuidados médicos, alimentación y bienestar emocional. A continuación te compartimos un poco de incentivo: Las mascotas ayudan a disminuir el estrés, te mantienen activo, ayudan a tener amigos y sanan el corazón.
</p>
</article>
<div id="video1"><video src="video/video_perro.mp4" autoplay muted loop type="video/mp4"></video></div>
<article id="contenedor_cita">
<p>“la grandeza de una nación y su progreso moral pueden ser juzgados por la forma en que se trata a sus animales”
<h4>Mahatma Gandhi</h4>
</p>
</article>
<div id="video2"><video src="video/video_gato.mp4" autoplay muted loop type="video/mp4"></video></div>
</section>
<div class="contenedor">
<h3>Buscando un hogar</h3>
<input type="radio" name="dot" id="one">
<input type="radio" name="dot" id="two">
<div class="tarjeta_principal">
<div class="tarjetas">
<div class="tarjeta">
<div class="contenido">
<div class="img">
<img src="img/img1.jpg" alt="cachorro marrón">
</div>
<div class="details">
<div class="nombre">Paco</div>
</div>
</div>
</div>
<div class="tarjeta">
<div class="contenido">
<div class="img">
<img src="img/img2.jpg" alt="gato siamés">
</div>
<div class="details">
<div class="nombre">Sirio</div>
</div>
</div>
</div>
<div class="tarjeta">
<div class="contenido">
<div class="img">
<img src="img/img3.jpg" alt="cachorra negra">
</div>
<div class="details">
<div class="nombre">África</div>
</div>
</div>
</div>
</div>
<div class="tarjetas">
<div class="tarjeta">
<div class="contenido">
<div class="img">
<img src="img/img4.jpg" alt="gato blanco y gris">
</div>
<div class="details">
<div class="nombre">Tom</div>
</div>
</div>
</div>
<div class="tarjeta">
<div class="contenido">
<div class="img">
<img src="img/img5.jpg" alt="perro adulto">
</div>
<div class="details">
<div class="nombre">Oddie</div>
</div>
</div>
</div>
<div class="tarjeta">
<div class="contenido">
<div class="img">
<img src="img/img6.jpg" alt="gata adulta">
</div>
<div class="details">
<div class="nombre">Gea</div>
</div>
</div>
</div>
</div>
</div>
<div class="button">
<label for="one" class=" active one"></label>
<label for="two" class="two"></label>
</div>
</div>
</body>
<footer>
<div id="contenedor_footer">
<div id="copyright">
<p>© Copyright 2022 Adopta una Mascota // Patrocinado por Royal Canin
</div>
<div id="social">
<nav id="botonera_social">
<ul>
<li><img src="img/ico/twitter.png" alt="Twitter"></li>
<li><img src="img/ico/facebook.png" alt="facebook"></li>
<li><img src="img/ico/instagram.png" alt="instagram"></li>
</ul>
</nav>
</div>
</div><!-- fin del contenedor -->
</footer>
</html>
My project CSS file is: Link
I think you can map media queries one by one according to the length and style you want to use, so you don't get confused
check this video
#media screen and (max-width: 320px) {
.navbar{
background-color: lightskyblue;
}
}
#media screen and (min-width: 768px) {
.navbar{
background-color: salmon;
}
}
#media screen and (min-width: 320px) and (max-width: 767px) {
#logo img {
width: 80px;
height: 82px;
margin: 50px 0 0 20px;
}
.navbar {
width: auto;
font-size: xx-large;
background-color: red;
}
.navbar ul {
height: auto;
}
.navbar li {
float:none;
}
#boton_registro {
float: none;
}
.navbar li a {
display: block;
padding: 15px;
margin-left: 40px;
}
#imagen1 {
width: 250px;
height: 250px;
float: none;
margin: 250px auto 20px auto;
}
#presentacion {
width: auto;
height: auto;
float: none;
margin: 0 10px 10px 10px;
padding: 0px;
}
#titulo {
text-align: center;
}
#contenido_presentacion {
font-size: large;
text-align: center;
}
#video1 video {
width: 90%;
height: auto;
float: none;
margin: 0 0 20px 15px;
}
#contenedor_cita {
width: 90%;
height: auto;
float: none;
margin: 0 0px 20px 15px;
padding: 15px;
}
#contenedor_cita p {
font-size: xx-large;
font-weight: 600;
margin-top: 0px;
}
#contenedor_cita h4 {
text-align: right;
margin-top: 0px;
}
#video2 video {
width: 90%;
height: auto;
float: none;
margin: 0 10px 10px 15px;
}
.contenedor .tarjeta_principal .tarjetas {
display: inline;
}
.tarjeta_principal .tarjetas .tarjeta {
width: calc(100% / 1 - 10px);
}
footer {
width: 90%;
margin-left: 5%;
margin-bottom: 10%;
}
#copyright {
text-align: center;
padding-top: 50px;
float: none;
}
#copyright p {
font-size: 15px;
margin-bottom: 0px;
}
#copyright p a {
font-size: 16px;
}
#social {
float: none;
}
#botonera_social ul {
display: flex;
}
#botonera_social ul li {
float: none;
}
}
<header>
<div id="logo">
<img src="https://cdn-icons-png.flaticon.com/128/5068/5068966.png" alt="logo">
</div>
<nav class="navbar">
<ul>
<li>Inicio</li>
<li>Publicar</li>
<li>Adoptar</li>
<li id="boton_registro">Ingresar / Registrarse</li>
</ul>
</nav>
</header>
<br>
<br>
<!-- Contenido -->
<section id="contenido_principal">
<div id="imagen1"></div>
<article id="presentacion">
<h1 id="titulo">Adopta una Mascota</h1>
<p id="contenido_presentacion">Es un website con fines de reubicación de mascotas que se encuentran en condición de calle. Queremos darle la posibilidad a estos nobles seres, de ser amados y cuidados por su familia de acogida,
la cual disfrutará de la gratitud y el amor incondicional del nuevo miembro de la familia.
Es de suma importancia concientizar a la sociedad sobre la tenencia responsable de mascotas,
que abarca: castración, cuidados médicos, alimentación y bienestar emocional. A continuación te compartimos un poco de incentivo: Las mascotas ayudan a disminuir el estrés, te mantienen activo, ayudan a tener amigos y sanan el corazón.
</p>
</article>
<div id="video1"><video src="video/video_perro.mp4" autoplay muted loop type="video/mp4"></video></div>
<article id="contenedor_cita">
<p>“la grandeza de una nación y su progreso moral pueden ser juzgados por la forma en que se trata a sus animales”
<h4>Mahatma Gandhi</h4>
</p>
</article>
<div id="video2"><video src="video/video_gato.mp4" autoplay muted loop type="video/mp4"></video></div>
</section>
<div class="contenedor">
<h3>Buscando un hogar</h3>
<input type="radio" name="dot" id="one">
<input type="radio" name="dot" id="two">
<div class="tarjeta_principal">
<div class="tarjetas">
<div class="tarjeta">
<div class="contenido">
<div class="img">
<img src="img/img1.jpg" alt="cachorro marrón">
</div>
<div class="details">
<div class="nombre">Paco</div>
</div>
</div>
</div>
<div class="tarjeta">
<div class="contenido">
<div class="img">
<img src="img/img2.jpg" alt="gato siamés">
</div>
<div class="details">
<div class="nombre">Sirio</div>
</div>
</div>
</div>
<div class="tarjeta">
<div class="contenido">
<div class="img">
<img src="img/img3.jpg" alt="cachorra negra">
</div>
<div class="details">
<div class="nombre">África</div>
</div>
</div>
</div>
</div>
<div class="tarjetas">
<div class="tarjeta">
<div class="contenido">
<div class="img">
<img src="img/img4.jpg" alt="gato blanco y gris">
</div>
<div class="details">
<div class="nombre">Tom</div>
</div>
</div>
</div>
<div class="tarjeta">
<div class="contenido">
<div class="img">
<img src="img/img5.jpg" alt="perro adulto">
</div>
<div class="details">
<div class="nombre">Oddie</div>
</div>
</div>
</div>
<div class="tarjeta">
<div class="contenido">
<div class="img">
<img src="img/img6.jpg" alt="gata adulta">
</div>
<div class="details">
<div class="nombre">Gea</div>
</div>
</div>
</div>
</div>
</div>
<div class="button">
<label for="one" class=" active one"></label>
<label for="two" class="two"></label>
</div>
</div>
</body>
<footer>
<div id="contenedor_footer">
<div id="copyright">
<p>© Copyright 2022 Adopta una Mascota // Patrocinado por Royal Canin
</div>
<div id="social">
<nav id="botonera_social">
<ul>
<li><img src="img/ico/twitter.png" alt="Twitter"></li>
<li><img src="img/ico/facebook.png" alt="facebook"></li>
<li><img src="img/ico/instagram.png" alt="instagram"></li>
</ul>
</nav>
</div>
</div><!-- fin del contenedor -->
</footer>
Maybe you can be consistent for writing media query in css. If you decide to use max-width, then use max-width on other query. So you not be confusing to read it. I'll be recomend to write css for mobile first, so you can use min-width when styling for desktop view. You can read this article that explain responsive web design.
And try to write comment as simple as possible, because a lot of comment will make your code looks messy. You can try to implement this article for good comment.
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Does UL have default margin or padding [duplicate]
(2 answers)
What are the default margins for the html heading tags (<h1>, <h2>, <h3>, etc.)?
(4 answers)
Closed 3 years ago.
Nothing does the job for me. I've got two problems here:
White space from parent div between child divs colored in blue.
screenshot
White space from body in bottom of the page dispite the colored in yellow.
screenshot
The margin; 0; does the job but leaves me the mysterious white space colored in yellow at the bottom. I don't understand why yet.
Thank you for reading me! :-)
body
{
background-color: yellow;
margin: 0;
}
.parent
{
background-color: blue;
}
.enfant-un
{
background-color: orange;
height: 120px;
padding-left: 10%;
padding-right: 10%;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0px;
}
.logo
{
width: 90px;
}
.logo:hover
{
opacity: 0.75;
}
.menu
{
}
.menu li
{
display: inline;
padding-right: 10px;
}
.menu li:hover
{
opacity: 0.75;
}
.illustration
{
width: 100%;
border-radius: 6px;
}
.enfant-deux
{
background-color: green;
}
.enfant-trois
{
background-color: red;
}
.enfant-quatre
{
background-color: violet;
}
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>GBAF(Groupement Banque-Assurance Français)</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="shortcut icon" type="image/png" href="images/favicon.png"/>
</head>
<body>
<div class="parent">
<div class="enfant-un child">
<a href="index.php">
<img class="logo" src="images/logo.png" title="Acceuil" alt="Le logo de GBAF(Groupement Banque-Assurance Français)." />
</a>
<nav class="menu">
<?php
$autorisation = false;
if ($autorisation)
{
echo "$nom $prenom";
}
else
{
?>
<ul>
<li>Inscription</li>
<li>Connexion</li>
</ul>
<?php
}
?>
</nav>
</div>
<div class="enfant-deux child">
<h1>Groupement Banque-Assurance Français</h1>
<p>Présentation des partenaires</p>
<img class="illustration" src="images/illustration.jpg" alt="Bureaux de GBAF(Groupement Banque-Assurance Français)."/>
</div>
<div class="enfant-trois child">
<h2>Acteurs et partenaires</h2>
<p>Présentation des acteurs et partenaires</p>
<div class="acteur">
<img src="images/logo-acteur-1.png" alt="Acteur 1"/>
<h3>Acteur 1</h3>
<p>Description + lien</p>
<button href="#" class="lirelasuite">Lire la suite</button>
</div>
<div class="acteur">
<img src="images/logo-acteur-2.png" alt="Acteur 2"/>
<h3>Acteur 2</h3>
<p>Description + lien</p>
<button href="#" class="lirelasuite">Lire la suite</button>
</div>
<div class="acteur">
<img src="images/logo-acteur-3.png" alt="Acteur 3"/>
<h3>Acteur 3</h3>
<p>Description + lien</p>
<button href="#" class="lirelasuite">Lire la suite</button>
</div>
<div class="acteur">
<img src="images/logo-acteur-4.png" alt="Acteur 4"/>
<h3>Acteur 4</h3>
<p>Description + lien</p>
<button href="#" class="lirelasuite">Lire la suite</button>
</div>
<div class="acteur">
<img src="images/logo-acteur-5.png" alt="Acteur 5"/>
<h3>Acteur 5</h3>
<p>Description + lien</p>
<button href="#" class="lirelasuite">Lire la suite</button>
</div>
<div class="acteur">
<img src="images/logo-acteur-6.png" alt="Acteur 6"/>
<h3>Acteur 6</h3>
<p>Description + lien</p>
<button href="#" class="lirelasuite">Lire la suite</button>
</div>
</div>
<div class="enfant-quatre child">
<nav class="menu">
<ul>
<li>Mentions légales</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</body>
</html>
The margin properties on the h and ul tags were causing the spacing issue. I added the following and removed the unwanted spaces. fiddle: https://jsfiddle.net/fneqm28b/2/
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
}
.menu ul {
margin-bottom: 0;
margin-top: 0;
}
My website contains a column with a list in it. I would like to start every single item with a #-sign instead of a bullet and stick the textual content of the divs in that item together. I copied the full code of my website underneath (JSFiddle):
ul {
margin: 0;
padding: 0;
}
.item-list {
border: solid 1px black;
padding: 20px;
width: 230px;
}
.item-list li {
list-style: inside none"#";
}
.field-name-field-plaats {
display: inline;
}
.field-items {
display: inline-block;
}
.field-name-field-aantal::before {
content: " (";
}
.field-name-field-aantal::after {
content: "x)";
}
.field-name-field-aantal {
display: inline;
}
<div class="item-list">
<ul>
<li>
<div class="entity entity-field-collection-item field-collection-item-field-plaats-en-aantal clearfix">
<div class="content">
<div class="field field-name-field-plaats field-type-text field-label-hidden">
<div class="field-items">
<div class="field-item even">Blandit cogo dolor exerci ille luctus neo olim suscipit veli</div>
</div>
</div>
<div class="field field-name-field-aantal field-type-number-integer field-label-hidden">
<div class="field-items">
<div class="field-item even">1.362</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="entity entity-field-collection-item field-collection-item-field-plaats-en-aantal clearfix">
<div class="content">
<div class="field field-name-field-plaats field-type-text field-label-hidden">
<div class="field-items">
<div class="field-item even">Augue humo in interdico persto ymo. Abbas eligo neque nibh.</div>
</div>
</div>
<div class="field field-name-field-aantal field-type-number-integer field-label-hidden">
<div class="field-items">
<div class="field-item even">5.487</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
This is not precisely the result that I want. Ideally, I would like to achieve something like this:
Unfortunately, Paint doesn't deliver the correct CSS code... ;) I tried to play around with white-space: nowrap, but of course, that results in a single line of text, which is not what I want. Can you help me?
Try ul li *: display: inline !important;
This should make everthing inside the lis inline elements
EDIT/ADDITION:
Here's a fiddle: https://jsfiddle.net/gk3nwdq4/2/
I also changed the CSS for the list-items in that to make the"#" be left of the text:
.item-list li {
list-style: "#";
margin: 5px 3px;
padding-left: 5px;
}
ul {
margin: 0;
padding: 0;
}
.item-list {
border: solid 1px black;
padding: 20px;
width: 230px;
}
.item-list li {
list-style: none;
padding-left: 25px;
position: relative;
margin-bottom: 15px;
}
.item-list li:before {
content: '#';
position: absolute;
left: 0;
top: 0;
}
.field-name-field-plaats {
display: inline;
}
.field-items {
display: inline-block;
}
.field-name-field-aantal::before {
content: " (";
}
.field-name-field-aantal::after {
content: "x)";
}
.field-name-field-aantal {
display: inline;
}
<div class="item-list">
<ul>
<li>
<div class="entity entity-field-collection-item field-collection-item-field-plaats-en-aantal clearfix">
<div class="content">
<div class="field field-name-field-plaats field-type-text field-label-hidden">
<div class="field-items">
<div class="field-item even">Blandit cogo dolor exerci ille luctus neo olim suscipit veli</div>
</div>
</div>
<div class="field field-name-field-aantal field-type-number-integer field-label-hidden">
<div class="field-items">
<div class="field-item even">1.362</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="entity entity-field-collection-item field-collection-item-field-plaats-en-aantal clearfix">
<div class="content">
<div class="field field-name-field-plaats field-type-text field-label-hidden">
<div class="field-items">
<div class="field-item even">Augue humo in interdico persto ymo. Abbas eligo neque nibh.</div>
</div>
</div>
<div class="field field-name-field-aantal field-type-number-integer field-label-hidden">
<div class="field-items">
<div class="field-item even">5.487</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
Try this,
.item-list li {
list-style-type: none;
margin: 5px 3px;
padding-left: 5px;
}
.item-list li:before{
content:'#';
margin-left:-25px;
margin-right:6px;
}
I have a grid of images like this:
<div class="city-container container" id="popupContainer">
<div class="row">
<div class="col col-33">
<img src="img/images/opera.jpg" ng-click="showTabDialogOpera($event)"/>
<div class="description" style="font-size: 8pt"><strong>Opera de Lyon</strong></div>
</div>
<div class="col col-33">
<img src="img/Image1.jpg" ng-click="showTabDialogBasilique($event)"/>
<div class="description" style="font-size: 8pt"><strong>Basilique de Fourvière</strong></div>
</div>
<div class="col col-33">
<img src="img/images/hoteldeville.jpg" ng-click="showTabDialogHotel($event)"/>
<div class="description" style="font-size: 8pt"><strong>Hotel de villde de Lyon</strong></div>
</div>
</div>
The problem is that the description does not show in the right position.
CSS:
.city-container .description {
position: absolute;
width: 90%;
text-align: center;
padding: 5px;
line-height: 1.5;
background-color: rgba(204, 204, 204, 0.6);
}
I'm not really sure what you're trying to achieve.
If you want the description to show up next to the image, try relpacing
position: absolute;
with
display: inline-block;
Update
I have updated the CSS. Sorry for the delay.
I scaled the image to fit the width of the column. Hope that meets your requirement.
.col-33 {
width: 32%;
display: inline-block;
}
.col-33 img {
width: 100%;
}
.col-33 .description {
width: 100%;
text-align: center;
padding: 5px 0px;
line-height: 1.5;
background-color: rgba(204, 204, 204, 0.6);
}
<div class="city-container container" id="popupContainer">
<div class="row">
<div class="col col-33">
<img src="http://dummyimage.com/150x50/00cf75/fff.png&text=IMG" ng-click="showTabDialogOpera($event)"/>
<div class="description" style="font-size: 8pt"><strong>Opera de Lyon</strong></div>
</div>
<div class="col col-33">
<img src="http://dummyimage.com/150x50/00cf75/fff.png&text=IMG" ng-click="showTabDialogBasilique($event)"/>
<div class="description" style="font-size: 8pt"><strong>Basilique de Fourvière</strong></div>
</div>
<div class="col col-33">
<img src="http://dummyimage.com/150x50/00cf75/fff.png&text=IMG" ng-click="showTabDialogHotel($event)"/>
<div class="description" style="font-size: 8pt"><strong>Hotel de villde de Lyon</strong></div>
</div>
</div>
There's a column of about 50px wide on the right of the document that i have no idea where it comes from, I have tripled checked both my html and css and can't find where it is generated.
Here is my html:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="?.?">
<meta name="author" content="?.?">
<meta property="og:title" content="Sitio Web de Balam Tech">
<meta property="og:image" content="assets/img/balamtech-logo.png">
<meta property="og:site_mame" content="Balam Tech">
<meta property="og:description" content="?.?">
<title>Balam Tech - Inicio</title>
<link rel="stylesheet" type="text/css" href="assets/libs/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/main.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<img class="topbar-thumbnail" src="assets/img/balamtech-logo.png" alt="Balam Tech Logo"> Balam Tech
<button class="navbar-toggle" data-toggle="collapse" data-target=".mainNavbar">
<span class="glyphicon glyphicon-th-large"></span>
</button>
<div class="collapse navbar-collapse mainNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active-tab">¿Quiénes somos?</li>
<li>Servicios</li>
<li>Contáctanos</li>
<li>Login</li>
<li>Regístrate</li>
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col-md-12">
<div class="jumbotron jumbotron-main-page" role="main">
<div class="container space-top-jumbotron-main-page text-center">
<h1>Balam Tech</h1>
<p>Productos y Servicios de Primera Calidad</p>
Contáctanos
</div>
</div>
</div>
</div>
<div class="row">
<div class="container" id="quien">
<div class="col-md-12">
<h2 class="text-center">¿Quiénes somos?</h2>
<div style="height: 40px;"></div>
</div>
</div>
<div class="row">
<div class="container">
<div class="col-md-3">
<img src="assets/img/balamtech-logo.png" alt="logo de Balam Tech" title="Balam Tech" class="img-logo-main-page">
</div>
<div class="col-md-9">
<h3>Balam Tech</h3>
<article class="text-main-page">
<p><b>Balam Tech</b> es una empresa que pertene a Grupo San Martín.</p>
<p><b>Balam Tech</b> se dedicada a prestar servicios de desarrollo de software web y
a la venta de productos de software genérico. Más Información en la sección de servicios y productos.</p>
<p>Puedes ponerte en contacto con nosotros al correo
<b>info#balamtech.com</b></p>
</article>
Leer Más
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<div style="height: 70px;"></div>
<div class="second-tier">
<div class="row">
<div class="container">
<div class="col-md-12">
<h2 class="text-center">Nuestros Servicios</h2>
<div style="height: 40px;"></div>
</div>
</div>
</div>
<div class="row">
<div class="container">
<div class="col-md-3">
<h3 class="text-center">Software Web a la Medida</h3>
<article class="text-main-page">
<p>Nosotros desarrollamos <b>Software Web</b> con los estándares más altos, con
tecnología de punta y con escalabilidad horizontal y vertical.</p>
<p>El <b>Software Web</b> te ofrece la ventaja de ser compatible con muchos de los dispositivos
que se utilizan hoy en día. ¿Smartphones, tabletas, ipads?, No te preocupes, te tenemos
cubierto.</p>
</article>
</div>
<div class="col-md-3">
<h3 class="text-center">Desarrollo de Portales y Plataformas Web</h3>
<article class="text-main-page">
<p>Hoy en día los portales y plataformas empresariales y de negocios son un indicio del
grado de calidad y profesionalidad que una empresa, compañia o institución posee.</p>
<p>Nuestros desarrolladores y diseñadores se encargan de que tu empresa tenga una imágen
estrictamente profesional y seria en la Web.</p>
</article>
</div>
<div class="col-md-3">
<h3 class="text-center">Diseño de Correos Electrónicos</h3>
<article class="text-main-page">
<p>Siempre hay una razón para mandar un correo a un cliente, a un contacto, a una empresa, etc.</p>
<p>Se vuelve un problema poder visualizar de manera uniforme un correo al haber tantos dispositivos
y resoluciones diferentes en el mercado.</p>
<p>Nosotros te ofrecemos una solución que las grandes empresas internacionales utilizan: Diseño de Correo Electrónico Responsivo.</p>
</article>
</div>
<div class="col-md-3">
<h3 class="text-center">Desarrollo de Aplicaciones Móviles</h3>
<article class="text-main-page">
<p>Hoy en día, mas del 50% de la audiencia que visita un sitio o aplicación web
lo hace desde un dispositivo móvil, es decir un smartphone o tableta.</p>
<p>El diseño responsivo es una solución bastante útil, pero muchas veces, es
el grado de complejidad de el sitio o aplicación requiere de mayor especialización,
para el cual te ofrecemos otra solución: <b>Aplicaciones Móviles.</b></p>
</article>
</div>
</div>
</div>
<div style="height: 30px;"></div>
<div class="row">
<div class="container">
<div class="col-md-12">
<img src="assets/img/techs.png" class="img-tech-main">
</div>
</div>
</div>
</div>
<div class="row">
<div class="container">
<div style="height: 50px;"></div>
<h2 class="text-center">Contáctanos</h2>
<hr>
<div style="height: 40px;"></div>
<div class="col-md-4">
<img src="assets/img/androidmessage.png" class="icon-message pull-left">
</div>
<div class="col-md-8">
<form method="post" role="form" class="text-center">
<div class="form-group">
<label class="control-label" for="uname">Nombre</label>
<input type="text" class="form-control input-lg" id="uname" name="uname" placeholder="nombre">
</div>
<div class="form-group">
<label class="control-label" for="uemail">Correo</label>
<input type="email" class="form-control input-lg" id="uemail" name="uemail" placeholder="correo electrónico">
</div>
<div class="form-group">
<label class="control-label" for="uempresa">Empresa</label>
<input type="email" class="form-control input-lg" id="uempresa" name="uempresa" placeholder="empresa">
</div>
<div class="form-group">
<label class="control-label" for="umensaje">Mensaje</label>
<textarea class="form-control" id="umensaje" name="umensaje" placeholder="mensaje..."></textarea>
</div>
<button type="submit" class="btn btn-success btn-lg pull-right">Enviar Mensaje</button>
</form>
</div>
</div>
</div>
<footer class="footer">
</footer>
<script src="assets/libs/js/jquery.min.js"></script>
<script src="assets/libs/js/bootstrap.min.js"></script>
</body>
</html>
and here is my css:
#import url(http://fonts.googleapis.com/css?family=Roboto);
body, html{
font-family: 'Roboto', sans-serif !important;
height: 100% !important;
width: 100% !important;
}
.jumbotron-main-page{
background: url('../img/bg.jpg') 50% 50% fixed no-repeat;
background-size: cover;
box-shadow: 1px 1px 25px #999;
color: #fff;
}
.jumbotron-main-page h1{
text-shadow: 1px 3px #333;
}
.jumbotron-main-page p{
text-shadow: 1px 3px #333;
}
.icon-message{
width: 256px !important;
height: 256px !important;
position: absolute;
top: 20%;
margin-top: 60px;
}
.topbar-thumbnail{
width: 36px;
height: auto;
margin-top: -7px;
}
.text-main-page{
margin: 20px;
font-size: 1.2em;
text-align: justify;
}
.active-tab{
border-bottom: #93c840 5px solid;
}
.second-tier{
box-shadow: 1px 1px 10px #333;
background-color: #ededed;
}
.jumbotron-no-support{
background-color: #fff;
border: 5px #999 solid;
}
.no-support-panel-text{
text-align: justify;
font-size: 1.2em;
}
.img-tech-main{
display: block;
margin-left: auto;
margin-right: auto;
}
.btn-no-support{
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 15px;
width: 200px;
content: '';
}
.frowny-face{
text-align: center;
font-size: 130px;
color: #919191;
line-height: 1.1;
margin-top: 0px;
margin-bottom: 50px;
}
.img-tech-main{
width: 960px !important;
height: auto !important;
}
.web-explorer-thumbnail{
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
}
.img-logo-main-page{
width: 250px;
height: 250px;
margin-top: -20px;
display: block;
margin-left: auto;
margin-right: auto;
}
.footer{
position: absolute;
bottom: 0;
width: 100%;
height: 70px;
}
#media only screen and (min-device-width : 320px) and (max-device-width : 480px){
.img-logo-main-page{
display: none;
}
.img-tech-main{
display: none;
}
.icon-message{
display: none;
}
}
#media only screen and (min-width : 1224px) {
.jumbotron-main-page{
height: 450px;
min-height: 300px;
max-height: 450px;
}
.space-top-jumbotron-main-page{
margin-top: 50px;
}
}
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
.img-tech-main{
display: none;
}
.img-logo-main-page{
display: none;
}
.icon-message{
display: none;
}
}
Here is a picture of what it looks like:
If somebody has any idea why this frame appears there please let me know how to fix it!
The browser automatically adds margin to body so you need to remove that by setting the margin to 0.
body {
margin: 0;
}
This will remove the vertical scrollbar.
In order to find what is causing the blank area to the right you can use the browsers builtin tools. I Firefox you can right click on the page and select "Inspect element" to get info about it and select difference element to se where the elements start to change size.
If you want me to find it, it would be better with a link to the page. I tried your code but i'm not getting the same results as the screenshot.
Have you included CSS reset?
http://meyerweb.com/eric/tools/css/reset/
(I don't see the white frame in the screenshot)