Docs

[Steve L]

Please tell me how to re-position my background image when the screen size is reduced. If you reduce the screen my background needs to move down so it doesn’t cut the guys head off. Please see https://www.johnmooreservices.com/specials/49-dollar-kitchen-drain-clean/

I’ve tried various @media queries but can’t seem to get it to work. What am I missing?

[Rahul]

Hey There,

Thanks for writing in!

You can re-position your background image by following this thread :

https://community.theme.co/forums/topic/parallax-content-band-background-image-how-do-i-position-it-correctly/

Hope this helps!

[Steve L]

No. It doesn’t even address my question. I want to be able to add margin at the top to move background image down when the screen resolution is reduced. Is there an @media query I could use to add a % margin at top on a 13 inch laptop? 1280 X 800 or similar?

[Rupok]

Hi Steve,

It seems fine on 1280×800 resolution. But the 1024px screen has some issue since the menu is dropping hence cutting the guy’s head.

You can try this to solve the issue:

@media only screen and (min-width: 980px) and (max-width: 1169px) {
.x-navbar-inner .x-container {
  width: 95%;
}
}

Hope this will do the job. If you still have any issue; kindly add a screenshot and mention the exact screen resolution.

Cheers!

[Author]

Posts