Image full container width

[Oskar]

Hello!
I wonder if its possible show an image on a page with full container widht, in other words with no space between the image and the container?

[Tom]

Hi there,

So you want the image to push right up against the edges of the container?

Do you want this with regular images you’ve added to your content or with the page header/featured images?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Oskar]

Yes exactly! Is it possible? I want to to this with regular images added to the site, for example on my first page!

Thanks! Oskar

[Tom]

You can wrap regular images in this class: ignore-xy-spacing

For example:

<div class="ignore-xy-spacing">
      My image HTML in here
</div>

That should do it 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Oskar]

Thanks! Im a bit new to this: Can I use the Jetpack plugin and “edit css” for this?

Should I write:

<div class="ignore-xy-spacing">
      http://www.kbtterapistockholm.se/wp-content/uploads/2015/09/ImageResizer.net-42nhjz88gudcv2p.jpg
</div>

Thank you, Oskar

[Tom]

No need to write any CSS – GP does it for you.

That’s exactly what you should write in your content 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Oskar]

Thanks! The imgage looks like this in my content now:

Can you help me where to place the new code?

<div class="ignore-xy-spacing">
      http://www.kbtterapistockholm.se/wp-content/uploads/2015/09/ImageResizer.net-42nhjz88gudcv2p.jpg
</div>

[Tom]

You would place that code in your “Text” editor wherever you’d like it to show up in your content.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Oskar]

Great, thanks!! Is it also possible to remove the space abow the image? (between the image and the container)

[Tom]

That should do it – can you link me to a page where the space above is present?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Oskar]

Here is an example with the space abow present: http://www.kbtterapistockholm.se/

Regards, Oskar

[Tom]

Are you using GP Premium? If so, use the Disable Elements add-on to disable the headline/page title.

That should remove that gap.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Oskar]

Hello!
I use the GP premium but when Im trying to make it dissapear with the disable elements add-on nothing happens. Do u know whats wrong?

I checked the Post Image / Page Header
Headline / Post Title boxes in the disable elements section on the page…

//Oskar

[Tom]

Looks like it worked to me? Try clearing your cache 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Oskar]

Cleared my cache and it worked! Thanks alot!

//Oskar

[Author]

Posts