[Resolved] Featured images / container block images displaying inconsistently

Hi there,

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

You can use the private information field:
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Let me know 🙂

Hi there,

https://ibb.co/bbmBk3x
PAGE CONTENT CONTAINER TYPE: FULL WIDTH: Container block with background image: sits flush to top so top is covered by menu. This appears to be the standard behaviour?

https://ibb.co/BNdRNG3
PAGE CONTENT CONTAINER TYPE: FULL WIDTH: Featured image: sits flush to top, so top is covered by menu (standard?) but the image is NOT displaying full width, so there seems to be an issue here.

https://ibb.co/BGX4sPk
PAGE CONTENT CONTAINER TYPE: DEFAULT: Featured image: sits flush to top, so top is covered by menu (standard?)

https://ibb.co/pbF1qzf
PAGE CONTENT CONTAINER TYPE: DEFAULT: Container block with background image: does not sit flush to top, so top is only half covered by menu, so there seems to be an issue here.

This occurs if the site has an active Header Element with it’s “Merge with Content” set to “Merge”. You can change it up if don’t wish for the menu to overlay ontop of the menu.

Hi there,

The Default Container Type has Padding ( set in Customizer > Layout > Container ). So when no featured image is present you will have the top padding creating a gap.
Featured images on pages are located by default above the Content container, so the padding gap above will come after the featured image.

Image width – unless you throw CSS width: 100%; at an image it won’t display any wider then its actual size. eg. if you upload a 1024px image and add that to your page then it will only display at a max width of 1024px unless CSS is used.

When working on a site with a merged header you need to consider this in your design for the various layouts you want.

For example:

1. All pages could be set Content Container – Full Width and you build out content using GenerateBlocks or a Page Builder.
2. All Posts could be set to Content Container – Default. In this instance you may want to consider disabling the merged header for single posts or use a Page Hero.

Let us know if this helps.

RE: IMG embed – it has to be direct URL to the image source, so providing links to other shared sources is absolutely fine.

Probably best we go through how that site works.

1. The Merged header is created using a Header Element.
You can edit that in Dashboard > Appearance > Elements – there is a shortcut to that in the Admin Bar > Elements menu when viewing the page:

https://docs.generatepress.com/article/header-element-overview/

The sole purpose of this element is to merge the site header with whatever content is at the top of the page.
Note that this element sets the navigation colors which overrides those in the Customizer.

Setting it to display where required is done via the Display Rules tab. It is set to Entire Site. You can change those rules accordingly.

2. The Home Page Content Container is set to Full Width. This removes the padding from the Customizer. So there is no gap whether there be a featured image or not.

3. The Full Width Image – this is because the Image is being displayed as the background to a Container Block that is being displayed Full Width. Background Images use CSS and by default are set to Cover which means the fill the available space. Which is completely different to when you use an Image Block

Creating a new page that has a Full width and Container content.

1. Create a new page.
2. Set the Content Container to Full Width.
3. Build your pages using the GB Container Block:
https://docs.generateblocks.com/article/container-overview/
3.1 Each container Block you can set its widths ( full or contained ) its inner width and its padding.

This applies to featured images ( or any image ) on a Full Width Container:

Image width – unless you throw CSS width: 100%; at an image it won’t display any wider then its actual size. eg. if you upload a 1024px image and add that to your page then it will only display at a max width of 1024px unless CSS is used.

Page heros using a block element are explained here:

https://docs.generatepress.com/article/block-element-page-hero/

We would need to see the site to ascertain what is going on there.

That full-width option on the metabox will remove the max-width imposed to the page it is applied on but that doesn’t necessarily mean it will automatically make the contents go 100% width of the page.

But I can understand why your site is showing a seemingly full-width image if it has 5000px if you’re viewing the site on a screen with resolution of 4k or lower and having no padding for the site-content. The screen size simply is too small to give it horizontal space.

Another image that would go full-width are any Container blocks that are set to full-width with it’s background set to cover.

As for consistency, I think it’s best of you make all the pages go full-width so we’re sure there’s always no gaps on the sides. (This can be done by creating a Layout Element set to full-width applied to Entire site)

also make sure that the first containers of the pages don’t have padding-top, padding-left or padding-right values so it doesn’t create any top or side spaces so the menu is always overlaying ontop of the first section of the pages as Solo’s design intended.