I don’t really understand why having a full width post that covers the entire page is such a hard thing to get. No matter what theme I have tried, they all place some constraints on post width and image sizes in posts. Shapely limits posted images and text to 1140px wide, other templates have different limits but never full width for some reason.
I like this theme overall quite a lot, but this part is a deal breaker for me if I can’t get the post width to cover the entire browser window. 1140px is NOT a modern size.
Please, is there any way to get full width posts on Shapely? Selecting the option “full width” in the separate post template options does NOT make the post take up the entire page.
I hope you are well today and thank you for your question.
Actually what is working for you is called full width post/page which doesn’t have sidebar but if you want the post/page to fill all space of browser window then you can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.
Admin Area -> Appearance -> Customize -> Shapely Options -> Other
For the page :
body.page-id-2 #main.container {
width: 100%;
}
For the post:
body.postid-1898 #main.container {
width: 100%;
}
Change the post or page id in the above custom CSS code to the post or page id that you want full width.
Tried those things, the container still holds the top text/logo/title/navbar area, plus images and text on each page/post, within a tight 1140px-ish width area no matter what. The only way I can make anything take up more of the screen is through my slideshow plugin masterslider which will bypass the width constraints, but that doesn’t fix my text or image width, top logo/navbar area, etc. limits.
This is how the theme is working and as described above what is working for you is called full width post/page which doesn’t have sidebar but you are expecting it to fill all space of browser window which is custom functionality and not the theme provided functionality.
Actually developing custom code for custom functionality is beyond the scope of support that we provide here but we are still helping you to achieve it so please have a patience.
Also, I have probably more than 100 posts so naming them separately would be an extremely inconvenient option (even if it worked).
If you want to apply it for all posts then you can use the below CSS code which will work on all single posts.
body.single-post #main.container {
width: 100%;
}
And for the page please use the below code.
body.page #main.container {
width: 100%;
}
No matter what, full width, main container, etc., always maxes out at around 1140px width.
After using the above CSS code could you please share me the screenshot of it and page URL from your site where it’s not displaying correctly so that i can troubleshoot it?
That’s so odd, it wasn’t displaying full width before when I added those, but today it seems to have changes its mind. Thank you! What about the top navbar/logo text? I really want it to display full width as well so the logo is farther left and the navbar is farther right.
Yes that worked exactly like I wanted. Thank you for giving me the tools I needed to get my website to behave the way I’ve been wanting it to. Until last week my website was quite outdated in appearance and using a rather old and limited wordpress theme, but now I feel it’s greatly improved and can finally take advantage of modern screen resolutions.
@hangover To help us keep support thread separates it would be great if you create your own thread for your question here https://colorlibsupport.com/c/shapely/ instead of replying on others thread as it makes the thread messy and hard to read.
