Stretch image to full width?

[Atheri]

Hello again,

How can I add CSS to make one image to be full-width?

I added custom component to top of the page, it’s standard image (5K resolution) and no matter what CSS I use, there seems to be some automatic padding added that keeps it from being full-width.

Current CSS

.headerhero {
display: inline;
margin: 0;
width: 100%;
padding: 0;
}

[nabeel]

Hi @Atheri,

Thank you for reaching out to us. This could be the Section’s default padding, Inspect your Section and set the Padding to 0 (see screenshot)

Now go to the Row settings and turn Off the Global Container

This should make your image fullwidth. If this doesn’t work then please provide the URL of page in question so we can take a closer look.

Thanks!

[Atheri]

Hello,

Thank you for the reply, I added page URL via secure note to my initial post.

It seems I would need to target the container via CSS to disable it, as the picture is added through a custom component not standard Cornerstone block?

[christian]

Hey Rain,

Thank you for providing the URL. It is not possible to make the image fullwidth as the Main container is not fullwidth.

What you need would require custom development as the blog page is not editable using Cornerstone. You’d need to consult with a 3rd party developer to modify the blog page.

If hiring a developer is not possible for you, please consider upgrading to Pro so you could create a custom header so you can add the image to the blog header and make it fullwidth.

If upgrading still is not possible, please kindly wait for our Layout Builder which will allow the creation of custom archive pages.

Hope that helps and thank you for understanding.