Heads-Up Bar not being responsive

Hi Kathy_Goss,
The text display will for the most part conform to your site’s CSS.
If you pop in a URL I’ll take a quick look at it for you.

Thanks ??

No pro version. I don’t see enough interest in it to spend the development time, thanks for asking.

Hi Greenweb, thank you for the response. I wish I could upload the mobile device screenshots here.

The site that the heads-up bar image is not responsive is here: https://ustemplate.vitalityadvocates.com

The example of the same type of heads-up using image that is responsive on mobile is here:
https://demo.usingessentialoils.com

I checked my style.css for the one that is working and I don’t see that we needed to add anything special on that site.
Thanks for your help.

Kathy_Goss the bar is responsive – the issue is the image. Its size is determined by the HTML used to embed it.

You could override this using CSS; here are two possible solutions:

1. inline CSS:

<img class="aligncenter size-full wp-image-368" src="https://ustemplate.vitalityadvocates.com/wp-content/uploads/sites/2/2016/03/emovite-bar-banner-no-border.jpg" alt="emovite bar banner-no border" width="1120" height="187" style="max-width: 80%;height: auto;">

2. CSS in your theme or custom css file if you use one:

.wp-image-368 {
    max-width: 80%;
    height: auto;
}

Thank you. I tried the inline CSS and it works – but now it is quite small for mobile. See: https://ustemplate.vitalityadvocates.com/emovite/
Perhaps I should create an alternative image for mobile? Would that be a good idea and if so, how would I do it? I guess worst case is to increase the font in the image so that it is not too large on desktop but also readable on phone?

Kathy, I think that the best solution would be to rethink it maybe break it down into three images?
Or if you’re a CSS wiz you could swap out images at different breakpoints.

More on that here https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints