Header image not scaling on mobile

Tagged: header, header image, mobile, Scaling

This topic has 5 replies, 4 voices, and was last updated 3 weeks, 2 days ago by joealex41.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
June 20, 2019 at 4:04 pm #55768
mormonjesus69420
Participant
Hello!

My website is salwerowi.cz, I have a problem with the header image on main page not scaling for mobile devices, instead it cuts it on both sides. However if I go to blog page, that uses same picture as header image, it is scaled properly instead of being cut.

Is it possible to fix it, so that header image on main page is being scaled too? Like do I need to edit some CSS or JavaScript code for it to work?

Unscaled header image on main page:

Scaled header image on blog page:
- This topic was modified 6 years, 4 months ago by mormonjesus69420. Reason: Fixed image links
- This topic was modified 6 years, 4 months ago by mormonjesus69420. Reason: Reoriented images
June 21, 2019 at 5:37 pm #55836
acmethemes
Keymaster
Dear mormonjesus,
Please use the following css code to adjust scale image in small devices.
Appearance > Customize > Additional CSS
```
@media (max-width:767px){
    .image-slider-wrapper .slick-list, .image-slider-wrapper .slick-track{
        height:35vh !important;
    }
}
```
Note: You can adjust the height value as per your requirement.

Best Regards!
June 21, 2019 at 6:16 pm #55846

mormonjesus69420
Participant

That a lot! That helped!

June 22, 2019 at 3:25 pm #55897

acmethemes
Keymaster

Dear mormonjesus,
You are Most Welcome 🙂
Best Regards!

October 1, 2019 at 5:02 pm #70379

kalp23
Participant

Thank You Very Much This Article Really Helped me
God will DO Good For You

October 13, 2025 at 7:32 pm #115085

joealex41
Participant

I am also encountering the same issue with my website’s header image — it looks perfectly fine on desktop, but on mobile devices, it gets cropped on the sides instead of scaling down proportionally. What’s odd is that other pages using the same header or background image seem to scale correctly, just like you described.

I’ve tried adjusting some CSS properties like background-size: cover and background-position: center, but that only partially fixes it — the image still doesn’t resize properly on smaller screens. I’m wondering if there’s a difference in how the main page container or layout handles responsive scaling compared to other pages.

If anyone has figured out which specific CSS or JavaScript tweak can make the header image scale smoothly across all devices, I’d really appreciate some guidance. You can check my site thetexasroadhousemenu.com and please guide me as I am not a technical person.
Author

Posts