Full screen layouts are gaining popularity these days, but it is not always easy to know how to change this in the CSS code as there could always be more than 1 thing you have to edit in the code to make that happen.

Before making your layouts full width there are a few things to consider:

  1. Readability – Will your posts and pages be easier or harder to read with a wider layout?
  2. Mobile Devices – Are you taking into consideration the screen size? Some WordPress themes have specific features for mobile devices, so we need to be sure that we do not influence the mobile layout in a negative way
  3. Does it look good? A wider or full width design may not be suitable for what you are trying to build. If you’ll have lots of images and use the grid style layouts more than the list style layouts in the Smart Theme then the wider layout would look much better. Also, using a slightly larger font with a little extra letter spacing may help with the wider layout.

With those in mind, lets take a look at what is required to make the OptimizePress Smart Theme have a wider layout.

The Body Class

If you don’t want the entire site to be wider, there are quite a few CSS classes that you could target.

.home (this is only for the blog home page)
.category (obviously for category pages)
.archive (for archive pages – including category, but also for author archives)
.page (for any page that doesn’t have one of the other CSS classes)
.single-post (only when someone is viewing the full blog post)
.search-results (when search results are generated)
.search-no-results (when a search has no results)
.error404 (when the 404 page template is being used)
.author (when author page is used – also .archive will style this page but you could use .author .archive to specifically target this page)
There could be more that I haven’t found yet…

The container

The first thing is each page and post layout has the container in the CSS code. The CSS class for this is .op-container

It is best to use a percentage in the width of the container like width:90%; max-width:90%;

Columns

The Smart Theme also uses a couple of columns depending on whether there is a sidebar or not.

If you are not using a Sidebar then you’ll want to set the width of .col-md-8 to 100% otherwise there will still be a space for the sidebar. The code below will adjust for whether you use a sidebar or not.

Now that you know a little about what CSS classes we will be using, and know what they are for, here is the CSS code for making the layouts wider. Note that this is NOT a copy and paste code. You will need to choose the code that suites your needs and also uncomment some code by removing the /* and the */ on the sides of the line of code mentioned (noted in the code) if you are not using a sidebar.

This is experimental code and I have not fully 100% tested with every single type of page/post available in the Smart Theme. Also, the CSS formatting is not yet “perfect” and I’m not sure if all the “!important” included in the code are needed, but to rule out any issues I have added those for now.

This code will be modified with proper formatting and any fixes that come up so please check back often!

Update: Note that with recent changes this code doesn’t seem to work in all cases. I’ll review this and see if I can improve the code in the future.

Leave a Reply

Your email address will not be published.