Avisos
Vaciar todo

[Resuelto] ANCHO DE LA PÁGINA PRINCIPAL (HOMEPAGE) TEMA TWENTY SEVENTEEN  

 
Pilar
 Pilar
Usuario activo

Hola! Uso el tema Twenty Seventeen en Wordpress, y tenía dificultad con el ancho, ya que era muy estrecho, por lo que agregué un CSS que funcionó bastante bien para ampliar el ancho, salvo por estas excepciones, que espero puedan ayudarme a resolver.

1. La página de inicio, que es una página estática y reúne otras páginas interiores, sigue con el ancho 100%, pese a que las páginas interiores, le he colocado ancho 70%, quisiera que la página de inicio también tuviera 70% y no se vea como actualmente de ancho completo.

2. La página de entradas (blog) BITÁCORA – Mona y Emilio The Retro Vintage Shop, tiene el sidebar demasiado ancho, comparado con otros lugares donde aparece el sidebar (como la sección TIENDA). Quisiera que tuviera menos ancho, o igual al de la sección TIENDA.

El CSS colocado es:

#content.wrap {
/* margin-left: auto; */
/* margin-right: auto; */
max-width: 100%;
/* padding-left: 2em; */
/* padding-right: 2em; */
}

@media screen and (min-width: 48em) {
#content .wrap {
max-width: 100%;
/* padding-left: 3em; */
/* padding-right: 3em; */
}
}

.page.page-one-column:not(.twentyseventeen-front-page) #primary {
/*margin-left: auto;*/
/*margin-right: auto;*/
max-width: 70%;
}

@media screen and (min-width: 30em) {
.page-one-column .panel-content .wrap
{
max-width: 100%;
}
}

Espero puedan ayudarme con la solución a 1 o ambas consultas.

 

Muchas gracias

 

Pilar

Contenido solo visible a usuarios registrados

Respondido : 08/04/2021 1:34 am
Bulmaro
 Bulmaro
Soporte CMS Webempresa Moderator

Hola,

Inserta el siguiente CSS desde Apariencia ->  Personalizar -> CSS Adicional:

body.page-id-433 #page {
  max-width: 70%;
  margin: auto;
}

aside#secondary{
   max-width: 20%;
}

Saludos 🙂

Respondido : 08/04/2021 2:34 am

Pilar
 Pilar
Usuario activo

Hola @bulmaro-webempresa excelente !Gracias! El del sidebar funcionó muy bien. El de la pagina de inicio tiene un inconveniente, y es que las fotos de cabecera también se recortan,  y la idea es que sólo el texto sea 70%, así como la página interior (como ejemplo QUIENES SOMOS – Mona y Emilio The Retro Vintage Shop

Y la edición de mi pregunta ya no salió, pero quería agregar cómo podría hacer para que estos cambios no afecten el modo responsive (que en responsive se vea 100%, porque 70% de la pantalla de celular es muy pequeño).

 

Gracias por la ayuda!

Pilar

Respondido : 08/04/2021 4:02 am
Bulmaro
 Bulmaro
Soporte CMS Webempresa Moderator

Hola Pilar,

Elimina el código anterior:

body.page-id-433 #page {
  max-width: 70%;
  margin: auto;
}

Posteriormente agrega lo siguiente desde Apariencia -> Personalizar -> CSS Adicional:

body.home #post-433 > div.panel-content, body.home #panel1 > div.panel-content, body.home #panel2 > div.panel-content, body.home #panel3 > div.panel-content, body.home #panel4 > div.panel-content{
width: 70%;
margin: auto;
} @media only screen and (max-width: 767px) {
     body.home #post-433 > div.panel-content, body.home #panel1 > div.panel-content, body.home #panel2 > div.panel-content, body.home #panel3 > div.panel-content, body.home #panel4 > div.panel-content{
    width: 100%;
    margin: auto;
    }
}

Saludos 🙂

Esta publicación ha sido modificada el hace 4 años por Bulmaro
Respondido : 08/04/2021 4:32 am

Cursos Gratuitos WordPress

Pilar
 Pilar
Usuario activo

@bulmaro-webempresa muchas gracias!! Funcionó perfecto! 

Respondido : 08/04/2021 5:29 am
Bulmaro
 Bulmaro
Soporte CMS Webempresa Moderator

Hola Pilar, 

Excelente, me alegra que nuestra asesoría te fuera de utilidad. 

Gracias a ti por consultarnos en el foro, por tu confianza y preferencia en Webempresa. 

Quedamos atentos a tus futuras consultas en el foro.

Saludos 🙂

Respondido : 08/04/2021 5:33 am

wpdoctor-revisa-la-salud-de-tu-wordpress