Full Width Page

Hi D

to do this, while publishing/editing page, under page attributes, in template choose full width and update the page.

This will do the trick ??

Thank you for your response! This is for my home page though. I have a static home page for now, and when I change that page to full width, it removes my side bar. I want the side bar and home page of my website to be full width like the demo as opposed to a lot of space on either side. Can you help with that?

Also if you notice the search widget on the right … the field and the box labeled search are stacked, where on the sample they are on one line.
How can this be fixed?

Hi D

The space is same as in the demo, only prob is it looks compact in the customizer look. Here is the link to another demo from the theme’s site
https://demo.athemes.com/hiero/

Still you can increase the width of the container to fill in the whitespace, presently it is 980px

use the following css

.container {
    width: 1080px;
}

or something you would like.

Now to make the search field and button in one single line, use the below css

.site-sidebar .widget_search .search-submit {
    font-size: 13px;
    width: 24%;
}

Please make all the changes using a child theme or by using a custom css plugin, so that the changes you do remain preserved even after theme updates.

Thanks

Hi there,

Thanks for your solution Maruti, i just did :

.container {
    width: 1440px;
}

.site-sidebar {
	width: 180px;
	float: left;
	margin: 0 0 0 -300px;
}

With Simple Custom CSS plugin.
But i lose responsiveness. ??
Would you have any key to solving this please ?

EDIT : OK, i’m new to that. I had to copy the whole CSS to my CSS editor…

Now another issue : on my Nexus 5, the page is half cropped (in vertical position), which is annoying… I mean the right half is blank and i have to zoom in to get a non perfect result. Any way to correct that in css ? I suppose yes… But i’ve been trying stuff for 30 mins with no luck.
Also, it’s not perfectly fullscreen neither when in landscape position.

Hello, I used the following css to increase my page width and it worked great on the desktop but wrecked the mobile. Here’s the css and my site:

https://handpaintedabstracts.com

.container {
width: 1080px;
}

Is there a fix that’ll allow for the expanded desktop page while keeping the mobile at the same width?

Also, is there a way to remove the sidebar from posts as well as pages. The theme only allows for full width pages.

Hi Adam,

I checked your site and the container is still at 980px.

can you send us screenshots of the the issue that you face when the container is set to 1080px.

If you are willing to removing sidebars throughout the site and use a full width template, use the following css

.site-content {
    margin: auto;
}
.site-sidebar {
    display: none;
}