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
