Docs

[awecesar]

Hey, on my site:

http://the-hole-story.golf/top-5-best-golf-club-sets/

1. I’d like to have the featured image being displayed fullscreen.

2. When I choose the layout to be “Content Left and Sidebar Right” it splits my featured image and the content to be on the left and the sidebar on the right. I still want my featured image to be fullscreen and the split of content (left) and sidebar (right) to happen below the featured image.
Could you tell me how I can do that?
Thanks a lot!
I’ll share my data below privately in case you need them.

[awecesar]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing in!

#1. You can add this under Custom > CSS in the Customizer.

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

.single-post .entry-content.content, .single-post footer.entry-footer, .single-post .x-comments-area {
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  width: 88%;
}

#2. If you decide to set sidebar layout for the posts then set the layout and let us know.

Thanks!

[awecesar]

Thanks for the code
somehow nothing happens when I choose a Content left Sidebar Right layout. Could you look into that?
THanks!

[Rue Nel]

Hello There,

Thank you for the updates! The given code is only good for fullwidth. If you want to have something that will apply to any of the content layouts (fullwidth, sidebar left+content right or content left + sidebar right), you can try this alternative.

1] Please add the following JS code in the customizer, Appearance > Customize > Custom > Javascript

(function($){
  $('.single-post .entry-featured').insertBefore('.x-container.offset');
})(jQuery);

2] Please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.single-post .entry-featured img{
    width: auto;
    min-height: calc(100vh - 120px);
}

Again, this is a different approach. This does not depend on the given previous code. It would be good if you remove the old code before testing out this method.

Please let us know if this works out for you.

[awecesar]

I have the page display pretty much as I want now – BUT:
I’d like to have the featured image be fullscreen – and now just on the left next to the sidebar.

[Christopher]

Hi there,

If we make featured image full width we have to remove sidebar.

.single-post .x-main{
width:100%;
}
.single-post .x-sidebar{
display:none;
}

Hope it helps.

[awecesar]

Is there a way to have content and sidebar start below the featured image?
I’d like to have a fullscreen image on top and content and a sidebar below that.

[Rue Nel]

Hello Again,

Did you happen to try out my suggestion in this reply: https://community.theme.co/forums/topic/fullscreen-featured-image-and-sidebar-below-it/#post-1188732

I have tested it in your site before giving it to you. The expected resulted with that alternative method will look like this: http://prntscr.com/clzt2z

Please do try it out.

[Author]

Posts