Make Header image and Parallax images properly responsive on mobile

Shapely
1

Hi,

I’ve just been designing a website with the Shapely theme. However, the header and parallax images don’t work properly at all on mobiles - I just get a tiny portion of the image showing. I’ve tried a few bits of code but to no avail.

I’ve tried

@media (max-width: 480){
.header-image-bg {
background: no-repeat center center;
width: 100%;
height: 100%;

}
}

Unfortunately the website isn’t live currently, but do you have any tips for the CSS to make this work? I’ve got a different header image coded onto each page.

I also have the same problem with the parallax on the front page. The images just look silly because you get a bit of hair from a face or a bit of ear!

I’ve attached a few screen shots for you for reference.

I really hope you can solve this for me - we were very happy with the look of the site and about to launch it!

Gemma

2

hi Gemma

Probably I can help you but not without your website url, I need it to generate custom CSS for you

3

I did it!! Very pleased with myself - I’m just learning CSS. It’s remembering the !important; bit that I forgot.

For anyone else having the same issue, this is what I did:

@media only screen and (max-width: 900px){
.parallax-window {
background-position: 90% 0% !important;
}
}

and

@media only screen and (max-width: 900px){ .page-title-section {
height: 100px !important;
}
.header-image-bg {
background-repeat: no-repeat;
background-size: auto 100% !important;
background-position: 40% 0% !important;
}

4

Hi, there

Sounds good, thank you for sharing solution

I will close this case now, Feel free to contact us again if you have other questions

Thanks!