WordPress twenty fourteen full width

New Page

How to Create a Fullwidth Twenty Fourteen WordPress Theme

This year, WordPress gave us an amazing Twenty Fourteen theme with a responsive design; however, the theme width is set to 1260px, and for those of us using high resolution monitors, it looks like this:

WordPressThemeWidthFull WordPressThemeFullWidth

So there is a lot of unused space and I like my themes to be full width🙂

This is what I did to make the Twenty Four Eighteen theme full width. Sure, it might not be the perfect or the easiest way, but it gets the job done.

1/ Locate the theme style.css file (which is in your wp-content/themes/twentyfourteen folder) and search for the following code:

.square {

couleur de fond : #fff ; largeur maximale : 1 260 pixels ; position relative; }

y modifique el ancho máximo al 100% en lugar de 1260px.

2/ Encuentra el siguiente fragmento de código:

.sitio-encabezado {

background-color: #000; max-width: 1260px; position: relative; width: 100%; z-index: 4; }

and again modify the max-width to 100% instead 1260px.

Now it should like this, which I find a lot better.

WordPressThemeFullWidth2 WordPressThemeFullWidth2

However, your posts, pages etc. content is shrunk to 474px and I personally like to add a bit more width to it and if you too wish to make it a bit wider, locate the following code:

.site-content .entry-header, .site-content .entry-content, .site-content .entry-summary, .site-content .entry-meta, .page-content { margin: 0 auto; max-width: 474px; }

Change the max width from 474px to 80%.

You will notice that the comment box will stay in the middle which is quite good and if you like it, okay, but if you wish to make it wider, look for the following code:

.comments-area {

margin: 48px auto; max-width: 474px; padding: 0 10px; }

and change the max-width from 474px to 80%. Also locate the following code:

.site-content .entry-meta { background-color: #fff; margin-bottom: 8px; }

and replace it with:

.site-content .entry-meta { background-color: #fff; margin-bottom: 8px; max-width:100%; }

Managed WordPress Hosting with WP Personal Assistant Managed WordPress Hosting with Personal WP Assistant

Now your WordPress should look like this and hopefully this is the full-width you are looking for 🙂

WordPressThemeFullWidth3 WordPressThemeFullWidth3

Personalmente, me gusta que los botones de la barra lateral sean un poco más llamativos cuando los desplazamos y, si a ustedes también les gusta, pueden probar este estilo. Localice el siguiente código en su style.css:

.widget un {

color: #fff;

}

.widget a: hover {

color: #41a62a;

}

y reemplazarlo con:

.widget un {

 color: #fff;

 bloqueo de pantalla;

 }

 

.widget a: hover {

 bloqueo de pantalla;

 color de fondo: #41a62a;

 alineación de texto: centro;

 }

Ahora, cuando pasas el cursor sobre un botón en la barra lateral, estará en un cuadro verde en lugar de simplemente cambiar su título a verde.

 

WordPressThemeFullWidth5 WordPressThemeFullWidth5

Did you find this Knowledge Base article helpful? Was this Knowledge Base article helpful?

Apoyo »Tema:Veinte catorce » Ancho de página completo con woocommerce y tema veinticuatro

Ancho de página completo con woocommerce y tema veinticuatro

  • a170a249fb6e46d9725a76e6eeb7e7abvanhaakonnen

    (@vanhaakonnen)

    hace 12 months

    ¡Hola a todos!

    I have a wordpress with a twenty four theme and a woocommerce installed. My problem is that I can’t get it to be set, so it uses the full width of the pages… I have a large space to the left and right of the woocommerce content…

    Everything I tried failed. Do you have any idea what to do?

    Thanks!

    The page I need help with: [log in to view link]

Showing 3 answers – 1 to 3 (of 3 total)

  • a170a249fb6e46d9725a76e6eeb7e7abvanhaakonnen yarn starter

    (@vanhaakonnen)

    10 months, 2 weeks ago

    Hi there!

    I just want to push this topic again… I have tried different things in the meantime but can’t find any working solution.

    Two examples with left and right white space in woocommerce:

    https://www.greencorals.de/produkt-kategorie/green-corals-riffe/ https://www.greencorals.de/produkt/kleine-felshoehle-4er/

    How can I get fullwidth Woocommerce?

    Ideas? :-/

    9bb0e4c5fd15861d779c7dc3a4381ae6entrepreneurdofunk

    (@empresariodofunk)

    9 months, 2 weeks ago

    Try adding this CSS:

    #page { max width: none; } #masthead { max-width: none; }

    9bb0e4c5fd15861d779c7dc3a4381ae6entrepreneurdofunk

    (@empresariodofunk)

    9 months, 2 weeks ago

    Tell me, how do you center the page?

Showing 3 answers – 1 to 3 (of 3 total)

  • The topic ‘Full page width with woocommerce and theme twenty-four’ is closed and does not allow any more replies.

Posted on June 25, 2019June 25, 2019 by Consulting Brain

How to Create a Fullwidth Twenty Fourteen WordPress Theme

While updating a client’s WordPress site, I felt that the Twenty Fourteen WordPress theme had too much white space. As with many things in our connected world, I wasn’t the first and someone already had a solution.

A fairly simple process:

  1. Locate the theme’s style.css file (in wp-content/themes/twentyfourteen folder) and find the following code and change the max width to 100% instead of 1260px. .site { background color: #fff; maximum width: 1260 pixels; relative position; }
  2. Find the following code snippet and change the maximum width back to 100% instead of 1260px. .site-header { background-color: #000; maximum width: 1260 pixels; relative position; width: 100%; z-index: 4; }

CategoriesBlog


Video WordPress twenty fourteen full width

Related Posts

Free chat room code for my website

Contents1 How to set up a free chat room on the website.2 3 comentarios2.1 Trackbacks/Pingbacks2.2 Submit a Comment Cancel reply3 How to Create a Chat Room Website…

Background image full screen css

Contents1 Cómo – Full Page Image1.1 Example1.2 Example2 CSS background image tamaño tutorial: how to codify a complete page background image3 Perfect Full Page Background Image3.1 Méthode CSS géniale,…

WordPress leverage browser caching

Contents1 Aproveche el almacenamiento in hidden del navegador1.1 Will it works for my website?1.2 Where are plugin options1.3 Some JavaScript files still display under Leverage Browser Caching1.4…

WordPress post to facebook page

Contents1 How to Automatically Post to Facebook from WordPress1.1 Download Now: How to Launch a WordPress Website [Free Guide + Checklist]1.2 1. Create an IFTTT account.1.3 2….

Download images from wordpress media library

Contents1 How to export your WordPress media library1.1 Download maintenant : How to launch a WordPress website [Free Guide + Checklist]1.2 How to export your WordPress media…

WordPress single post template

Contents1 How to Create Custom Unique Post Templates in WordPress2 Post Template Files2.1 author.php2.2 Fecha.php3 Handbook navigation4 How to Create Custom Single Post Templates in WordPress5 Video…