Modificar ancho container Home

[tramp67]

Hola a todos,

 Quisiera modificar el ancho en el container correspondiente al Home, entre el slider y el footer. Quiero utilizar el 100% según el tamaño de las imágenes. Estoy utilizando el módulo ContentBox para incluir unos banners y enlazarlos a la categoría correspondiente. Las imágenes ya tienen el estilo correspondiente en css para ocupar el 100% de la caja donde estén y sean responsive, pero claro esa caja o div, está metido a su vez en el container del Home. Es a ese container al que le tengo que dar el ancho 100% para que  el div donde está la imagen y la imagen propia se ajusten al 100%.

He estado tocando desde el inspector de elementos algunos valores el css, pero no consigo que solo ese container tenga el 100%, siempre afecta a todas las páginas o al propio home.

Lo estoy haciendo en local.

Sé que tengo que cambiar o añadir algún etilo en css, pero no tengo claro dónde.

He visto muchos posts relacionados para dar ancho 100%, pero no para este caso en concreto.

Espero podáis ayudarme.

Gracias y saludos.

 

P.D.:

Ah, y si alguien me va a estar pidiendo datos para solucionarlo y cuando me diga que tiene la solución me va a pedir dinero, que no se moleste en escribir.

Edited March 16, 2020 by tramp67 (see edit history)

[ana_bella]

No tengo mucha idea en codigo, pero la etiqueta container suele aparecer en tres zonas, en la cabecera, en el contenido y en el footer, y aparece solo como container, no tiene añadida ninguna clase para identificar unas de otras. Para que un container ocupe todo el ancho de pantalla tendrías que poner:

.container{

witdh: 100%;

}

pero claro esto afectará a todos los containers que tengas en la plantilla. Mira a ver si la estructura html tiene antes del container un identificador como puede ser el footer, que antes del container tiene el html id="footer" y prueba con esto:

#footer .container{

witdh:100%:

}

cambiando el footer por el id que tengas antes del container en el Home.

 

 

Edited March 16, 2020 by ana_bella (see edit history)

[tramp67]

Hola ana_bella, gracias por responder.

Buena idea, lo puedo probar. ahora me falta saber bien el archivo "php" o ".tpl" correspondiente a ese bloque, ya que prestashop no tiene un index como una página web tradicional.

 

Me pongo a ello, en cuanto tenga algo te comento.

Gracias.

[tramp67]

hace 1 hora, tramp67 dijo:

 

Nada, no lo consigo. En "global.css" he insertado el id nuevo con 100% ancho y desde el inspector de elementos he ido probando en los distintos "div" de todo el bloque correspondiente a partir del slider y hasta el footer,sin incluir este.

No sé, creo que hay que hacer algo más, o no lo estoy haciendo bien yo.......🙄

Ya he activado la tienda, dejo enlace: https://sexshopdulceorgasmo.com.es/

Cualquier ayuda será bien recibida.

Gracias de antemano.

[ana_bella]

Lo que estas intentando cambiar son las dimensiones, no la estructura de la página en sí, no debes tocar ningún archivo tpl ni nada parecido, Eso se cambia desde el css correspondiente. Por lo que veo tienes dos etiquetas que hacen que tu portada no admita el ancho completo de pantalla, una es el container y otra es el "outer-container". Tienes que cambiar los parametros en el css correspondiente a esas etiquetas, quitar su max-width y poner witdh en 100%. A ver que sucede. Yo empezaría con el outer-container que pertenece al home. Tambien debes tener claro si quieres la pantalla completa en cualquier dispositivo o solo en ordenadores, por que en ese caso actuan las media-queris y debes cambiar donde quieras aplicarlo solamente.

[tramp67]

Hola de nuevo, sí lo sé. Creo que me he explicado mal.

Con esas dos clases estaba trasteando: .container y outer-container. El primero modifica la zona de los banners encima del Footer y al propio Footer.

El segundo consigo modificar el ancho de esa zona pero también afecta  a todas las páginas.

 

Edited March 17, 2020 by tramp67 (see edit history)

[ana_bella]

Entonces tu lo que quieres es que solo tu portada se ponga full ancho, las páginas secundarias se mantengan igual. Si es así tendrías que aplicar las dimensiones a la etiqueta siguiente no común que este en las páginas y no en el home.

imaginemos que la estructura del home es:

container

 outer-container

      main

            product

             ....

y de las páginas interiores:

 container

  out-container

    main

    product-container

                       ......

pues las reglas del ancho del container y del out-container deberas aplicarlas en el product-container, para que si se hagan efectivas en esas páginas.No se si me explico.

[tramp67]

Puff, me estoy volviendo loquito. Lo que toco afecta a todo, prestashop tiene mil css`s. seguro que pudiendo cambiar lo que quiero y afectando a otras páginas, esas otras páginas las podría arreglar desde otro css. Un especialista en prestashop, lo arreglaba en 5 minutos, yo llevo días y no soy capaz de más.

ana_bella, gracias por tu ayuda,te lo agradezco de verdad, pero no llego a más.

Seguro que la solución la he tenido delante, pero no soy capaz de verla. Quisiera dejar el home actualizado según los diseños actuales, y no me puedo permitir llamar a un programador.

Bueno, gracias de nuevo. Si lo consigo te lo haré saber.

[ana_bella]

Sinceramente la estructura de tú página es algo enrevesada, seguro es una plantilla comprada, por que yo trabajo con la classic y no esta tan enrevesada como la tuya. Se podría hacer, mirare a ver si puedo hacer algo así a simple vista, pero hay que cambiar código css en varios sitios de la cadena escalonada.  También debes darte cuenta de que en cuanto cambies el tamaño del home a pantalla completa la cantidad de productos en linea que ahora aparecen pueden aumentar. Debes tener en cuenta si solo quieres 5 productos como tienes ahora o que entre alguno más. Pero todo tiene solución. no desesperes que hacerse, se puede hacer.

[tramp67]

Muchas gracias, sí lo sé se puede cambiar. 

Sí es una plantilla comprada, y como dices algo enrevesada.

En cuanto a los productos, no voy a mostrar productos en la home, tan solo un pequeño slider con lo más vendido. El slider principal eliminarlo y dejar una imagen fija. Y en el resto de la página unos banners con enlaces a otras categorías,con los títulos correspondientes claro. De ahí que quiera dejar el diseño de esos banners al 100% de la pantalla en la que se visualice, con un pequeño padding o margin en los extremos.

En definitiva cambiar el bloque central del home, a partir de slider principal,hasta encima del footer.

Algo parecido al archivo adjunto.

Y de nuevo mil gracias ana_bella.

Doc3.docx

Edited March 18, 2020 by tramp67 (see edit history)

[ana_bella]

Entonces lo primero que debes hacer es hacer esos cambios en la estructura, quitar el slider ,quitar lo de los productos y una vez presentada tu portada como la quieres ya podemos trabajar con el css, por que seguro que hay cosas que ahora se están aplicando y es tontería tocarlas ahora si luego las vas a quitar. creo yo, es mi opinión. A lo mejor luego es hasta más fáacil.

[tramp67]

Me has leído la mente, estaba haciendo pruebas en local, trasteando con otra instalación. Pero mejor hago los cambios en la tienda online y después veremos de darle al ancho que quiera.

El slider de los productos no me preocupa ya que desde la config del mismo puedo cambiar ancho y alto.Y el slider principal tampoco, lo puedo dejar fijo y también darle ancho 100% desde la config.

El problemilla son las nuevas imagenes que quiero poner, supongo que lo haré con ContntBox. Y ya darles un css responsive.

Me pongo atrabajar con las imágenes que quiero colocar, cuando lo tenga te doy un toque.

😉

[tramp67]

En 18/3/2020 a las 5:56 PM, ana_bella dijo:

Entonces lo primero que debes hacer es hacer esos cambios en la estructura, quitar el slider ,quitar lo de los productos y una vez presentada tu portada como la quieres ya podemos trabajar con el css, por que seguro que hay cosas que ahora se están aplicando y es tontería tocarlas ahora si luego las vas a quitar. creo yo, es mi opinión. A lo mejor luego es hasta más fáacil.

Hola de nuevo, ya he hecho los cambios. Pero claro, seguimos trabajando con las mismas clases. Estoy haciendo pruebas desde inspector de elementos, de momento sigo como al principio. Le estoy dando vueltas…….