Background Header Image not responsive on mobile

I’m using the Construction Theme which is really great but when I add a background header image to individual pages, they are not responsive and don’t resize on mobile devices. Is there any way to make this happen or are there any other suggestions to fix my issue? View from a computer and all looks fine but view on a mobile device to see what I’m talking about. Thanks!


Theme author would be the right person to help you, you can contact them here -

Hello @jdhaasdmb

You can inspect elements and check responsive

you can remove this css in media query for responsive

Thanks :slight_smile:

Thank you for offering help joomlastars. I notice you are recommending removing top padding but I’m not sure how that fixes the issue as removing the top padding just shifted the background image higher into my overall website header/nav. I updated that in my wordpress page-edit front end options.

Sorry to be as inexperienced as I am, but I’m not sure where the “media query for responsive” is located. The only CSS I know of to update is adding additional CSS under the appearance customization. When I review some of the php files within the theme under my Cpanel admin backend area, I’m only seeing mobile responsiveness mentioned under the style.php file.


You can check this link:

You can add media query in css file and add padding-top:0px; in css for your device

/* 1 & 2 ( 240 x 320 (small phone) (320 x 480 (iPhone)) */

@media screen and (min-width:200px) and (max-width:350px){

/* 3 480 x 640 (small tablet) */

@media screen and (min-width:351px) and (max-width:500px){

/* 4 (768 x 1024 (iPad - Portrait)) */

@media screen and (min-width:501px) and (max-width:800px){

/* 5 (801 x 1024 (Desktop)) */

@media screen and (min-width:801px) and (max-width:1200px){

Thanks :slight_smile: