Cómo ajustar CSS para ocupar todo el ancho de pantalla en móviles

  • Autor Autor Caprese
  • Fecha de inicio Fecha de inicio
Caprese

Caprese

Zeta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde móvil quedan como 10 px vacios en los extremos izquierdo y derecho. Queda mal, quiero ocupar todo el ancho de la pantalla con el texto.

Miro en google y nada
 
Deben ser los bordes de tu tabla/div/section, busca: "css responsive width 100%"

Para que resuelvas tu duda.
 
Caprese dijo:
Desde móvil quedan como 10 px vacios en los extremos izquierdo y derecho. Queda mal, quiero ocupar todo el ancho de la pantalla con el texto.

Miro en google y nada
Hacer clic para expandir...
Busca el container o lo que quiere hacer mas grande y pon:

width: 100%

Si quieres que el width sea nada mas en el movil usa los @Media rules.
 
Quizás podrías añadirle box-sizing: border-box
 
CSS: 
* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}
 
Coloque esto en su css:

@Media screen and (max-width:500px){
.nombredelcontenedor{
width: 100%;
margin: 10px 0px;
padding: 0px;
}
}
 
Nada imposible solucionarlo, al final lo dejé por imposible, ¿algún plugin que ofrezca alguna solución?

El tema es

populariswp.com

Popularis Press - PopularisWP

Fast & Free Blogging WordPress theme Popularis Press Lightweight and super fast blogging WordPress theme with free demo import Free Download Demo Free demo available Import our demo for free You can set up your website in a matter of minutes. Import our demo and start customizing. Demo Popularis...
populariswp.com populariswp.com

es.wordpress.org

Popularis Press | Directorio de temas de WordPress

Popularis Press es un tema multiuso de blog rápido, limpio y moderno para WordPress. El tema funciona perfectamente con cualquiera de los maquetadores de páginas favoritos como Elementor, Beaver Builder, SiteOrigin, Thrive Architect, Divi, Visual Composer, etc. Popularis Press está preparado...
es.wordpress.org es.wordpress.org

En style.css pone

@Media (min-width: 768px) {
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover {
background-color: #fd0707;
color: #fff;

edito: lo acabo de conseguir con elementor pero toca js, ¿esto lastrará la carga??
 
Última edición:
Con esto debería bastar:
CSS: 
@media (min-width: 768px) {
    .container {
        width: 100%!important;
        padding: 0!important;
        margin: 0!important;
    }
}

Debes colocarlo en Apariencia > Personalizar > CSS adicional 👍 saludos!
 
Envíame link, te ayudo free amigo. =)
 
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba