Docs

[pdopchev]

Hi guys,

Just wandering if, the following layout is possible with Ethos: http://www.backcountry.com/stories/the-search-for-winter

I am referring to the photos that go full width across the screen and the content stays narrow. Or just like the header of this page but looking to put more photos like that in mid post:http://www.enjoycrestedbutte.com/9-things-you-must-do-on-your-first-crested-butte-visit

Thanks!

[Friech]

Hi There,

Thanks for writing in! It actually depends on the page template that you’re using. If the template is a No Container template. Then it is possible to make the Section full-width, by turning off the container of its Row.

Let us know if something is not clear.

Cheers!

[pdopchev]

Thank you for the info, I should have been more clear with the question – is it possible to have a full width photo/section and the rest of the layout to be kept the same?

[Rupok]

Hi there,

Thanks for writing back. You can use No Container template and add x-container class to the Rows for the sections where you don’t want fullwidth.

Hope this makes sense.

[pdopchev]

Thank you for your help again! Just noticed that the layout is already at full width but the site max width is set to 990px. Is there a different way to go about the full width photo in that case, since it would be more practical to change 10 elements for the whole website total (will probably have about 10 full width photos) than almost every single row…

[Rue Nel]

Hello There,

Thanks for updating in! If you want your images to be fullwidth (which only applies to single blog posts), something like this: http://prntscr.com/dp6do3

Please do the following:
1] Please find this css code:

.single-post .entry-wrap {
    max-width: 1200px;
    margin: 0 auto;
}

and replace it with code instead:

.single-post .entry-wrap {
    max-width: 100%;
    margin: 0 auto;
}

2] Please edit the post back in Cornerstone and make sure that in the section containing the images, the column container needs to be disabled in the row settings.

3]And insert the following custom css in the settings tab, Settings > Custom CSS

.x-container:not(max) .x-column img{
    min-width: 100%;
}

With this code, the images will be stretched out because at the moment the images were only 900 x 900 pixels.

Hope this helps.

[pdopchev]

Great work again! Thank you so much!

By the way, if anyone else is trying to do something similar but keep all other elements the same width as well as the title of the post, you could add a few more lines of code:

.single-post .entry-wrap {
    max-width: 100%;
    margin: 0 auto;
}

.x-container:not(max) .x-column img{
    min-width: 100%;
}

header.entry-header {
    max-width:1200px;;
    margin: 0 auto;
}

[Friech]

You’re more than welcome, glad we could help.

Cheers!

[Author]

Posts