0
273
VistasMi página html se está cortando en la pantalla del móvil y la barra de desplazamiento en el eje x se activa automáticamente. ¿Cual es el problema?
Estoy trabajando en mi portafolio. La página html de la sección de mi proyecto se está cortando en la pantalla móvil y la barra de desplazamiento en el eje x se activa automáticamente. ¿Cual es el problema?.
IU: Enlace de interfaz de usuario
O
https://hamzailyas-portfolio-237.web.app/portfolio/projects.html
Código HTML:
Código CSS:
.project-container { float: left; width: 30%; text-align: center; border-radius: 6px; margin: 40px 22px; } #row { margin-top: -100px !important; display: flex; justify-content: space-around; flex-wrap: wrap; } .project-card { box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2); padding: 70px 20px !important; min-width: fit-content; text-align: center; } .project-card a { color: black; text-decoration: none; } .project-card:hover { background: crimson; color: white !important; transition: all 0.3s ease !important; transform: scale(1.05); } .project-card:hover a { color: white !important; } .project-card h1 { font-size: 35px; text-transform: capitalize; font-family: 'Ubuntu', sans-serif; } .project-card p { font-size: larger; margin-top: 30px; display: flex; justify-content: space-evenly; } .project-card p img { height: 30px; margin-top: -5px; } /* @media only screen and (min-width: 651px) and (max-width: 1100px) { .project-container { margin-right: 100px; } } */ @media screen and (max-width: 1319px) { .project-card img { margin-right: 7px; } } @media screen and (max-width: 950px) { .project-container { width: 50%; } } @media screen and (max-width: 650px) { .project-container { width: 70%; } } @media screen and (max-width: 550px) { .project-container { width: 90%; } .project-card img { margin-right: 10px; } } @media screen and (max-width: 450px) { .project-card img { margin-right: 10px; } .project-card { padding: 60px 10px !important; font-size: smaller; } }
·
Juan Pablo Isaza
3 Respuestas
Responde la pregunta0
Si el problema es solo una barra de desplazamiento en el eje x, intente:
body { overflow-x: hidden; }
·
Juan Pablo Isaza
Denunciar
0
Pruebe este código CSS para crear el diseño perfecto para dispositivos pequeños y de escritorio. De esta manera no encontrará ninguna barra de desplazamiento.
#row { display: flex; padding: 15px; flex-wrap: wrap; justify-content: center; margin-top: -100px !important; } .project-container { padding: 15px; flex: 0 0 33.333%; max-width: 33.333%; text-align: center; border-radius: 6px; } .project-card { overflow: hidden; text-align: center; padding: 70px 20px !important; box-shadow: 0 4px 6px 0 rgb(0, 0, 0, 0.2); } @media screen and (max-width: 1199px) { .project-container { flex: 0 0 50%; max-width: 50%; } } @media screen and (max-width: 575px) { .project-container { flex: 0 0 100%; max-width: 100%; } }
·
Juan Pablo Isaza
Denunciar
0
Prueba esto, te ayudará en tu css actual. agregué esto y su trabajo
@media screen and (max-width: 550px){ .project-container { width: 100%; margin: 25px 0px; } } @media screen and (max-width: 450px){ .project-card { margin: 0px 15px; } .project-card a { word-break: break-all; } }
·
Juan Pablo Isaza
Denunciar
Responde la pregunta