0

Estoy tratando de aumentar el padding que existe entre los productos de la tienda y el borde de la pagina y no encuentro la forma de hacerlo.

Claro que la barra de navegación debe ocupar todo el ancho de la pagina Cuando añado lo siguiente, el contenido se desplaza a la izquierda y queda todo el padding ala derecha de la pagina :

.shop-container { padding: auto; width: 80%;}

Con el siguiente ejemplo, consigo que se haga el padding de 20px, pero me gustaría que esto se ajustara a dispositivos móviles

.shop-container {  padding-left: 20px!important; padding-right:20px;}

¿ Como puedo hacer esto y que la pagina siga siendo responsiva?

Espero puedan ver lo que consigo con esto

body {
  background: #08f;
}


#relleno {
  background-color: #360;
  margin: 0;
  padding: 20px; 
  border-width: 0;
  /* padding-left:40px;
   padding-right:40px; */
  height: 100%;
  padding: auto;
width:80%
}
<body>
    <div id="relleno">Este contenedor tiene contenido y un relleno (padding) de 5 pixeles.
      Este contenedor tiene contenido y un relleno (padding) de 5 pixeles.
      Este contenedor tiene contenido y un relleno (padding) de 5 pixeles.
      Este contenedor tiene contenido y un relleno (padding) de 5 pixeles.
      Este contenedor tiene contenido y un relleno (padding) de 5 pixeles.
    </div>
</body>

1 respuesta 1

1

Creo que necesitas usar margin en lugar de padding. El margin te separa los elementos desde el borde del elemento hacia afuera, en cambio el padding agrega espacio del borde del elemento hacia adentro.

body {
  background: #08f;
}

#relleno {
  background-color: #360;
  margin: 20px;
  padding: 5px;
  width: auto;
}
<body>
  <div id="relleno">Este contenedor tiene contenido y un relleno (padding) de 5 pixeles. Este contenedor tiene contenido y un relleno (padding) de 5 pixeles. Este contenedor tiene contenido y un relleno (padding) de 5 pixeles. Este contenedor tiene contenido y un relleno (padding) de 5 pixeles. Este contenedor tiene contenido y un relleno (padding) de 5 pixeles.
  </div>
</body>

2
  • Gracias por tu apoyo @DjCrazy. Exactamente con tu código no lo he conseguido, ya que se mostraba la web en una caja con un margen muy feo. Pero gracias a tu idea, he buscado la clase que contiene a las paginas de la tienda y le he añadido ese estilo. gracias
    – Diana
    el 8 dic. 2022 a las 9:48
  • 1
    Me alegra que te haya servido. Es genial que hayas logrado comprender la idea y adaptarla a tu necesidad puntual. en ocasiones es difícil dar una respuesta 100% acertada ya que desconocemos el contexto del proyecto real del PO, pero hacemos lo que podemos con la información que tenemos. Estamos para apoyar nuestro aprendizaje colectivo. Sigue adelante!
    – DjCrazy
    el 8 dic. 2022 a las 14:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.