Hero image adjustment in mobile

Hi there,

I am using hero image on my website. the hero image works well on desktop and tablet but the wording is cut off in mobile.
If use contained view for mobile, I worried that the wording is too small to read.

Is there anyway I can do about this?

Hope can get some help here.

Thanks and regards,
limpeek

Hello there,

As the text is part of the image, it is difficult to maintain its visibility on smaller screen. What I can suggest is use different image which is specifically designed for smaller screen size. Then replace the main image with it using CSS media query.


@media only screen and (max-width: 640px) {
  
  .so-widget-sow-hero .sow-slider-images li{
    background-image: url('http://www.herbeaskincare.com/path/to/your-image.jpg') !important;
  }
  
}
  

Regards,
Kharis

Hi Kharis,

Thanks for the reply.
Means I just create another image and upload it to WordPress, then apply this css code?

Hope to hear from you soon.

Thanks and regards,
limpeek

Hi Kharis,

I have uploaded the image to wordpress (YearEndSales.png) and use the CSS code given, but the hero image space become blank.

What should I do about this?

Hope to hear from you soon.

Thanks and regards,
limpeek

> Means I just create another image and upload it to WordPress, then apply this css code?

Yes, you are right.

> I have uploaded the image to wordpress (YearEndSales.png) and use the CSS code given, but the hero image space become blank.

Please share the code you applied.

Maybe it is just a matter of web browser’s cache which might can’t immediately take the new code addition. Try to clear your web browser’s cache and reload your site.

Regards,
Kharis

Hi Kharis,

This is the code i used.

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

.so-widget-sow-hero .sow-slider-images li{
background-image: url(‘http://www.herbeaskincare.com/path/to/YearEndSales.png’) !important;
}

}

The url of the image given in the wordpress media is as below.
http://www.herbeaskincare.com/wp-content/uploads/2016/12/YearEndSales.png

Thanks and regards,
limpeek

Hello there,

Please replace http://www.herbeaskincare.com/path/to/YearEndSales.png with http://www.herbeaskincare.com/wp-content/uploads/2016/12/YearEndSales.png.

Regards,
Kharis