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
Citar            
MensajeEscrito el 19 Ene 2020 10:42 pm
bueno tienes que agregar el codigo y para movil:
Código :

Código HTML :

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


espero que te sea util ,yo no utilizo para tablet prefiero para celulalar que que todo el mundo tiene un celular

--------------------------------
cklass catalogos

Por magalitell045

6 de clabLevel



 

chrome
Citar            
MensajeEscrito el 08 Feb 2020 10:36 am

hector7dxt escribió:

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>


Te recomiendo que todas las medidas css que pongas, sean relativas:

em: Relativo al tamaño de letra de un elemento (recomendable al hacer responsive en los p, h1, h2, h3..., span, todo lo que contenga texto)
ex: Relativo a la altura de la fuente
ch: Relativo a la anchura del zero
rem: Relativo al tamaño de fuente del elemento
vw: Relativo a la anchura del viewport (pantalla)
vh: Relativo a la altura del viewport (pantala)
vmin: Alto y ancho minimo
vmax: Alto y ancho máximo
%: Porcentaje

Por IVAN HEREDIA PLANAS

53 de clabLevel



Genero:Masculino  

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

firefox

   Página 1 de 1

 

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