Make Blog Post Page Full Width

Support
#1

Hi,

I would like my individual blog post pages to be full width (stretch the entire width of the screen) to match the rest of my website.

After browsing the forums, I attempted adding this to functions.php, which did not work so I removed it.

function add_post_mysidebar($layout) {
if(is_singular(‘post’)){
$layout = ‘full-width’;
}
return $layout;
}

add_filter(‘x_option_x_layout_content’, ‘add_post_mysidebar’,999);

Then I tried adding this to the customizer as suggested with no luck. I have also removed that since it didn’t work.

.single-post .x-main.left {
width: 100%;
max-width: none;
}
.single-post aside.x-sidebar.right {
display: none;
}
.single-post .entry-content {
padding: 0 !important;
}

.single-post .entry-wrap .x-container.max {

min-width: 100%;
width: 100%;
}
.single-post .p-meta {

display: none;

}

Can someone please help?

Thank you.

#2

Hi there,

Please add this code in the custom CSS:

.single-post .entry-wrap {
    padding: 0;
    background-color: transparent;
    box-shadow: none;
}

You can find more info on how to check for CSS selectors here.
Then information about writing your custom CSS here.

Hope this helps.

#3

Hi, Thank you. This removed the background but it doesn’t make the content stretch the whole width of the screen.

#4

Hi There,

Thanks for asking again and sorry for the confusion!
Please add this CSS to make the blog post full width.

.single-post .x-container.max {
 max-width: 100% !important;
}

Hope this helps!

Thanks

#5

Hello,

That’s close but still not giving me the edge to edge coverage i’m looking for to match the rest of my site.

Can you help please?

Thanks!

#6

Hi There,

I could not check your site, it seems that your site is down (see secure note).

Let us know once you resolve this issue, so that we can assist you further.

Thanks!

#7

The site may have been down for a minute. It’s not down now.

#8

Hi There,

Please update the previous CSS to this:

.single-post .x-container.max {
 max-width: 100% !important;
 width: 100%;
}

Hope it helps :slight_smile:

#9

Great! Thank you!

Now, I just need a little bit of padding for the comment area. While I’m in there, can you tell me how to make “leave a reply” a smaller font?

Thank you!

#10

Hello @StickAndGrow,

Thanks for updating the thread. :slight_smile:

Your website is not opening on my end. I am getting following message:

This site can’t be reached
stongmountainmedia.com’s server IP address could not be found.

Please try adding following CSS under X/Pro > Theme Options > CSS:

#reply-title {
    font-size: 200%;
}

Let us know how it goes.

Thanks.

#11

Hi,

Yes, that did help with the title size! Can you help with adding some margin on the left side of the whole comment section?

#12

Hi There,

Please add this to Theme Options > CSS to add padding on the comment section

/*comment section padding*/
.x-comments-area {
	padding-left: 5em;
	padding-right: 5em;
}

Feel free to adjust the 5em value.

Cheers!

#14

Thank you,

That worked. However, I just noticed most of these changes I made in this thread had no effect on mobile.

#15

Hi There,

Thanks for the confirmation!

For the mobile device, you have to use media query CSS for that.

Please add this CSS to your theme option -> global CSS.

@media (max-width: 979px) {
.single-post .x-container.max {
 max-width: 100% !important;
 width: 100%;
}
.single-post .entry-wrap {
 padding: 0px !important;
}
}

Hope this helps!

#16

Thank you. Unfortunately the mobile code doesn’t seem to be working.

#17

Hi there,

Please check this line of code present in the Global CSS:

@media ( min-width:980px ){.tco-subscribe-form fieldset{width:32%;float:left;margin-right: 1%;} .tco-subscribe-form fieldset:last-of-type,.tco-subscribe-form fieldset:last-child{margin-right: 0;}

It has a missing closing curly brace which is why the codes next to it are not working as intended.

Please update it to:

@media ( min-width:980px ) {
    .tco-subscribe-form fieldset {
        width:32%;
        float:left;
        margin-right: 1%;
    } 
    .tco-subscribe-form fieldset:last-of-type,
    .tco-subscribe-form fieldset:last-child {
        margin-right: 0;
    }
}

Hope this helps.

#18

That was it! Thanks :slight_smile:

#19

You’re welcome!
We’re glad we were able to help you out.

#20

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.