Custom CSS to make some posts full width

Support
#1

Hi,

I have recently asked about the same CSS for my portfolio items and it worked perfectly.
Unfortunately after upgrading Jetpack (on which the portfolio was enabled it the first place) all my portfolio pages are gone.
I don’t want to relay on Jetpack any more and I would like to simplify the structure of my website. I would like to have all my new content as Posts.
I have few types (wedding blog, galleries, other events) which I can tag and assign categories. The only thing is, that I would like to use different layouts for different categories.
At the moment it is set up correctly for all my wedding blogs, but I would like to use fullwidth layout for all my galleries and events. I would also like to hide the page title for them.

Would you be able to help me with that, please?

#2

Hi @pablo102,

Try the following CSS:

/*Hide category titles*/
.category-events header.x-header-landmark,
.category-gallery header.x-header-landmark {
    display: none;
}
/*Make category content fullwidth*/
.category-events .x-main,
.category-gallery .x-main {
    width: 100%;
} 
/*HIDE category sidebar*/
.category-events .x-sidebar,
.category-gallery .x-sidebar {
    display: none; 
}

Hope this helps.

#3

Hi,

thank you, there is no change yet:

#4

Hello Pablo,

Thanks for writing in!

I see that the URL you have shared is already having full width layout. However, to hide the page title please use following CSS under X > Theme Options > CSS:

.category-gallery .entry-header {
    display: none;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

#5

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