Header images don't resize on mobile

Hi my header images don’t resize to fit mobile devices and only show partially upon loading. Surely this is not right for a theme that is mobile friendly. Is there anything that can be done?
many thanks

Hi,

Thank you for contacting us.

Which header type did you enable? Can you share a link to your website here, so I can check it directly?

Adding, if you have enabled the header slider, I’d recommend checking the Slider mobile behavior setting under the Appearance menu > Customize > Header area > Header Slider. And ensure the responsive option is enabled.

Regards,
Kharis
aThemes Support

Hi Kharis thank you for coming back to me. Thank you, You were right I didn’t have my header slider on the responsive setting. I have now done this and it has reset the size of my header image on my Home Page, but it hasn’t reset the size of my header images on the other pages of my website? They are still too large for the mobile screen. I do have a SiteOrigin Headline on these pages and the font is set to 50px - I don’t know if this is affecting the size of the header picture?
Also I have added additional CSS to increase the size of my main title and sub title on my website, so now the titles have not resized on my mobile version and are too big for the (now resized header image) This is my website https://tabitha-yoga.co.uk/
Once again thank you for your help it is as always invaluable :pray:t2:

Hi,

As checked with my web browser’s inspector tool, your website is being cached and it has been managed with WP Rocked plugin. You should flush the cache from the plugin’s menu. Otherwise, your actual website will still retain the cached version and ignore the recent changes have made.

Adding, you may also need to clear cache, history, and restart your web browser before reloading your website.

I hope that helps. Let me know your views.

Regards,
Kharis
aThemes Support

Hi Kharis ok I have done all of this, I have flushed the cache in wp rocket, I have also clear my cache, history and I restarted my web browser. I have also cleared my cache on my Iphone. There is no difference to the website on my mobile. The font is too large on the homepage and the background header images have not resized
Do you have any other suggestions?
many thanks

Hi,

Thank you for getting back.

I think, the best approach to address the font readability on mobile screen is to resize down the font. Is that make sense? If so, I can provide a few lines of CSS code for that. Please confirm.

Regards,
Kharis
aThemes Support

Hi Kharis is it possible to resize the text just on mobile. I don’t want it smaller on desktop. Also that doesn’t address the issue of the header images on the other pages.

Best wishes

Hi,

Yes, it is possible.

Try adding this CSS code to your website’s Additional CSS under the Appearance menu > Customize.

    @media only screen and (max-width: 680px) {

      .header-slider .text-slider .maintitle {
        font-size: 32px;
      }

      .header-slider .text-slider .maintitle {
        font-size: 18px;
      }
      
    }

Regards,
Kharis
aThemes Support

Hi Kharis, thank you for this code it has worked to change the size of the text on the home page header. The problem of the images on the header of the other pages still exists. They have not resized to mobile size and you can only see a portion of them on a mobile device.
These images are set as background images in the top row of my Site Origin Page Builder, on each page, why are they not resizing , when the site is loaded on mobile? What can I do to change this

many thanks for all your help

Hi,

Great! Glad to hear the code worked.

The settings for this should fall into the Page Builder. And I’d recommend checking this discussion, that may help resolve with the issue.

Regards,
Kharis
aThemes Support