Parallax Pro need css adjustment for front page section

[addiesgram]

I've added css code to scale down the background images on the widgetized front page. Now on some mobile screens (e.g. iPad portrait orientation and iPhone portrait) the text in the Section 1 widget is no longer superimposed over the background image. Landscape orientation seems ok on smaller screens.

What edits do I need to correct the position of Section 1 widget text so it is correctly superimposed over its background image?

As always, thanks in advance.

https://lifehearttech.com

[andytc]

Looks like you've added -

background-size: contain;

in a media query which will overrule the default media query of -

background-size: auto;

That's why the images and text aren't behaving as you expect.

If the images on smaller screens aren't displaying with a focus on an area of the image that looks good , try adjusting the background-position: element for a better look.

Try the example below after removing your CSS edits -

@media only screen and (max-width: 1180px) {
.home-section-1, .home-section-3, .home-section-5 {
 background-position: center;
}

}

[addiesgram]

Thanks for replying andytc, I'll keep playing with images and image placement. It sounds like I can't have the best of both worlds -- ie, images scaled down for smaller screens as I'd had them with my earlier edited css, *and* text centered on (and superimposed over) the background image in section 1.

[Author]

Posts