Docs

[John]

Hi gang,

So I’m getting some weird rendering of images on my site:
http://www.advancedosteopathichealth.com/home-005/

What it looks like that the the images that are in a 3 column block aren’t filling all the way to the edges of the col in the live view, check it out:
http://prntscr.com/c8c93k

But here is the weird part in CS they look totally fine in the preview mode:
http://prntscr.com/c8bs2d

I’ve been digging through the CSS but so far I can’t find the source of this bad behavior.

Can you help me out getting my images to stretch all the way to the edge of the column that its inside?

Thanks for the assist

John

[Christopher]

Hi there,

Please add background-size: initial;background-position: top center; in sections’s style field. Not that image won’t stretch to the edge of container on larger screens.

The images are displaying fine, please see the attachment. Please clear cache and check again.

Thanks.

[John]

Ok I’m not doing right:

http://prntscr.com/c8mzfc

I added the CSS but I’m still getting some problems there.

And can you explain this statment to me I’m not sure I get it:

“Not that image won’t stretch to the edge of container on larger screens.”

Thanks for the extra help!

[Lely]

Hello John,

It it showing fine when I checked. See attached screenshot.

“Not that image won’t stretch to the edge of container on larger screens.” means that largest image display is the normal image size. For example, http://www.advancedosteopathichealth.com/wp-content/uploads/pain.jpg this image width is 400px. On normal screen size, 1/3 column of a browser is smaller than 400px. This image will be resize to fit the smaller 1/3 container. It became 350×243. Then on larger screens wherein 1/3 column is more than 400px, the image size will be just 400×275. The image will not adjust to fit the screen when it’s bigger. That’s why you will see a space on the right.

Hope this helps.

[Author]

Posts