• Author
  • #150684

    Hello there
    Recently i’ve been having trouble fixing the whitespace on the sides of my screen when customizing my site. I can’t seem to extend the featured images on my pages to fit the entire width of my screen and therefore the “Full width template” still leaves a bunch of white space on each side of my screen. Is there any CSS or tips on how I can minimize this whitespace as much as possible? Thank you!

    The blog I need help with is dataversive.wordpress.com.


    Theme Author


    The Full-Width template is designed to display a page without a sidebar. Here is an example: https://prosperitydemo.wordpress.com/full-width-template/

    The page has white spaces on both sides because its content is wrapped within a container that has a set maximum width. The reason why we use this container is to avoid readability issues.

    It’s possible to modify the container by using a custom CSS. Could you please post a link to the page where you want to change this container, so I can provide you a custom CSS?

    Thank you,


    Hey there
    I have 5 pages where I would like this container change as I would like to make this change almost site-wide. I can probably figure out the CSS for any new pages on my own.
    Here are the links:

    Thank you,


    Theme Author

    Hi Callum,
    Thank you for providing links.

    “…as I would like to make this change almost site-wide.”
    – In this case, you can add this custom CSS:

    .inactive-sidebar.blog .site-main, 
    .inactive-sidebar.archive:not(.post-type-archive-jetpack-testimonial) .site-main,
    .inactive-sidebar.search .site-main,
    .inactive-sidebar.single .site-main,
    .inactive-sidebar.page.page-template-default .site-main {
      max-width: 100%;

    Let me know if you have any additional questions.

    Thank you,

The topic ‘Whitespace’ is closed to new replies.