Docs

[magmachamber]

Hi and forgive me if this question has been asked, I tried searching but my terms might be wrong.

I am using Integrity, fullwidth, 90% site width. The page in question is using the fullwidth layout template.

I would like to make a custom image class that will ignore the normal padding on the inside of the container.

Please see the attached image as an example. I would like that image to expand to the full width of the container. I would prefer to not have to convert all my pages to cornerstone pages in order to achieve this.

Thank you so much.

[magmachamber]

Picture resized to meet 512k limit.

[Rue Nel]

Hello There,

Thanks for writing in! To make your image fullwidth on smaller screens, please edit your page and change the page template to Blank – No Container | Header, Footer. Or you can make use of this custom css code in the customizer, Appearance > Customize > Custom > CSS

@media(max-width: 767px){
  .site > .x-container.max.width.offset {
    width: 100%;
    width: 100%;
  }
}

Please let us know if this works out for you.

[magmachamber]

Hi and thanks for the reply. I was hoping to either:

A. Come up with a class that I can apply to specific images, making them fill the container width.

or if this isn’t possible,

B. Modify the CSS globally so that ALL images always fill the container width (provided the resolution of the image is high enough).

It seems your advice was intended to achieve option B, but it didn’t work. It just removed the container on mobile altogether. Maybe you can point me in a different direction? I very much appreciate your help.

John

[Lely]

Hello John,

Thank you for the screenshot. Currently, the image is displayed 100% on your container. The container holds the space you want to get rid off so we can’t just control it by adding a class. This mean that removing those will also adjust the text since they belong on the same container. Please try adding the following code instead?

@media (max-width: 767px){
.page-id-595 .entry-wrap {
    padding: 0;
    box-shadow: none;
}
}

Please note that both of those text and images are inside the paragraph tag. Unless you’re using Cornerstone, were we can add image element that is not inside a text element, we can achieve what you want using class. But for your current setup above CSS is what will work to achieve the screenshot.

Hope this helps.

[magmachamber]

Thank you again and I appreciate your sleuthing to provide me with the correct page ID. I have implemented the changes, but once again it just makes the container goes away on mobile.

http://nailfungusdiary.com/nail-fungus-treatment-guide/

EDIT: I actually like this! I applied it site-wide. Although it would be nice to know how to do what I originally set out to achieve, if it is indeed possible. Thanks 🙂

[Rue Nel]

Hello There,

Sorry if it didn’t quite work out. To resolve this issue, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media(max-width: 767px){
  .page .entry-content.content img,
  .single-post .entry-content.content img {
    max-width: 112%;
    margin: 0 -6%;
  }
}

http://prntscr.com/bik9qm
http://prntscr.com/bik9mr

Please let us know if this works out for you.

[magmachamber]

Thanks! I’m all set, thanks again for the great support.

[Rupok]

You are welcome!

Glad that it helped. Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[Author]

Posts