Restructuring The Layout

[Sufia]

Hi, I’m bit of an alignment freak.

I set the width of the container on my blog as 850 and then inside the container I moved the elements away from the edges – https://prnt.sc/tk77os.

1. I want the feature image to cover the container from end to end like this – https://prnt.sc/tk78rx. How do I do that?

2. Also, the container has become 850 site-wide. I don’t want the home page to be so contained. I would prefer the homepage width to be 950. Or more like this website – https://woorkup.com/. How can I achieve that?

3. In the homepage I want the structure to be boxed like this – https://prnt.sc/tk7dsv. Right now they are running to the edges like here – https://prnt.sc/tk7dpt. Possible to do that?

[David]

Hi there,

1. In Customizer > Layout > Blog –> Featured images – you can uncheck Display padding around featured image for the Posts. You must ensure that the image is large enough to fill the space.

2. Set your Customizer Width to 950px. Then use a Layout Element to set Content width to 850px for your Posts.

3. Can you explain more what that change is ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sufia]

2. Set your Customizer Width to 950px. Then use a Layout Element to set Content width to 850px for your Posts.– Didn’t follow the last part. I went to Layout and then what?

[Leo]

This is what David is referring to:
https://docs.generatepress.com/article/layout-element-overview/#content-1

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sufia]

Got it Leo.
But this happened – https://prnt.sc/tk8xpp
The white background did not expand to the entire container. Not sure why.

[Leo]

Any chance you can link us to the site in question?

You can edit the original topic and use the private URL field.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sufia]

Hi Leo, I’ve linked my website.

[Leo]

Are you using any caching plugins?

If so can you disable so I can inspect the code better?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sufia]

Done

[Leo]

Ahh the box-shadow on the container is giving the illusion.

Go to Additional CSS field in the customizer and replace this block:

.site-header, .main-navigation, .container, .site-footer, .site-info {
    box-shadow: 0 8px 8px #D0D0D0;
}

with this:

.site-header, .main-navigation, .inside-article, .site-footer, .site-info {
    box-shadow: 0 8px 8px #D0D0D0;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts