Comunidad de diseño web y desarrollo en internet online

Ayuda con diseño responsivo

Citar            
MensajeEscrito el 17 Oct 2019 01:59 am
Hola buenas noches, estoy haciendo un diseño responsivo pero en tipo web si toma las características que necesito, pero cuando pasa a 480 px pierde todo, fuente letra, imágenes se pegan a la izquierda



@media ( min-width:480px){
.argumento{
font-family: 'arial';
font-family: var(--fuenteprincipal);
text-decoration-color: white;
text-align: center;
text-align: justify;
padding-right: 15rem;
line-height: 25pt;
padding-top: -5rem;
text-decoration: white;
text-size-adjust: 2rem;
font-size: 26px;
text-indent: 10%;
padding-left: 15rem;
}
}

@media all and (min-width:480px){
.barra1{

max-width: 100%;
padding: 0rem 4rem;
padding-bottom: 0;
padding-top: 7.5rem;
margin:0 auto;
position: relative;
}
.barra1 .nav1{
display: grid;
grid-template-columns: repeat(4, 2fr);
grid-column-gap: 5rem;
}
.barra1 .nav1 a{
font-family: var(--fuenteprincipal);
font-size: 4rem;
color: white;
vertical-align:middle;
object-fit: cover;
}
}

Por hector7dxt

1 de clabLevel



 

chrome
Citar            
MensajeEscrito el 18 Oct 2019 10:39 pm

hector7dxt escribió:

Hola buenas noches, estoy haciendo un diseño responsivo pero en tipo web si toma las características que necesito, pero cuando pasa a 480 px pierde todo, fuente letra, imágenes se pegan a la izquierda



@media ( min-width:480px){
.argumento{
font-family: 'arial';
font-family: var(--fuenteprincipal);
text-decoration-color: white;
text-align: center;
text-align: justify;
padding-right: 15rem;
line-height: 25pt;
padding-top: -5rem;
text-decoration: white;
text-size-adjust: 2rem;
font-size: 26px;
text-indent: 10%;
padding-left: 15rem;
}
}

@media all and (min-width:480px){
.barra1{

max-width: 100%;
padding: 0rem 4rem;
padding-bottom: 0;
padding-top: 7.5rem;
margin:0 auto;
position: relative;
}
.barra1 .nav1{
display: grid;
grid-template-columns: repeat(4, 2fr);
grid-column-gap: 5rem;
}
.barra1 .nav1 a{
font-family: var(--fuenteprincipal);
font-size: 4rem;
color: white;
vertical-align:middle;
object-fit: cover;
}
}


Aque lo quieres adaptar. A movil tablet...
Para table es:

Código :

@media screen and (max-width:768px){
   //code
}

y para movil:

Código :

@media screen and (max-width:600px){
   //code
}


P.D: Recomiendo que especifiques muchisimos más para que te podamos ayudar (tu html y css, a donde lo quieres adaptar, especificamente donde te sale el error)

Por IVAN HEREDIA PLANAS

53 de clabLevel



Genero:Masculino  

Lo increíble, no es lo que ves, sino como es

chrome
Citar            
MensajeEscrito el 19 Oct 2019 07:26 pm

IVAN HEREDIA PLANAS escribió:

hector7dxt escribió:

Hola buenas noches, estoy haciendo un diseño responsivo pero en tipo web si toma las características que necesito, pero cuando pasa a 480 px pierde todo, fuente letra, imágenes se pegan a la izquierda



@media ( min-width:480px){
.argumento{
font-family: 'arial';
font-family: var(--fuenteprincipal);
text-decoration-color: white;
text-align: center;
text-align: justify;
padding-right: 15rem;
line-height: 25pt;
padding-top: -5rem;
text-decoration: white;
text-size-adjust: 2rem;
font-size: 26px;
text-indent: 10%;
padding-left: 15rem;
}
}

@media all and (min-width:480px){
.barra1{

max-width: 100%;
padding: 0rem 4rem;
padding-bottom: 0;
padding-top: 7.5rem;
margin:0 auto;
position: relative;
}
.barra1 .nav1{
display: grid;
grid-template-columns: repeat(4, 2fr);
grid-column-gap: 5rem;
}
.barra1 .nav1 a{
font-family: var(--fuenteprincipal);
font-size: 4rem;
color: white;
vertical-align:middle;
object-fit: cover;
}
}


Aque lo quieres adaptar. A movil tablet...
Para table es:

Código :

@media screen and (max-width:768px){
   //code
}

y para movil:

Código :

@media screen and (max-width:600px){
   //code
}


P.D: Recomiendo que especifiques muchisimos más para que te podamos ayudar (tu html y css, a donde lo quieres adaptar, especificamente donde te sale el error)




Hola, gracias por el apoyo, cambiare el codigo para saber si funciona, el tema es que lo hice sin la intencion de volverlo responsivo, por lo tanto agregue una serie de cosas especificas en el texto, como interlineados cambio de fuentes y de mas, al volverlo responsivo, perdio todas esas especificaciones, tambien la galeria de imagenes que cree dentro del grid se pega a la izquierda tampoco toma los atributos para que se muestre centrado el <div>

Por hector7dxt

1 de clabLevel



 

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.