View Replies (5)

Resolved Slideshow Slider Item image does not adjust correctly for smartphone

  1. Issue
  1. Restora
  2. Monday, 24 August 2020
On the slideshow for Restora you can add an image to a slider item. However when the image reduces for smartphones, the image becomes distorted. See attached files.

I've tried adding my own CSS in the style section of the slider item, but it seems to be overridden by other code. How can I get an image to adjust correctly for screen size?
Attachments (2)
Screen Shot 2020-08-24 at 1.09.23 PM.png Screen Shot 2020-08-24 at 1.09.23 PM.png
Screen Shot 2020-08-24 at 1.09.37 PM.png Screen Shot 2020-08-24 at 1.09.37 PM.png
Responses (5)
Hi,
Could you please share your site URL so that I can check?
  1. more than a month ago
  2. Restora
  3. # 1
http://headcake.info/PanosRestora/
  1. more than a month ago
  2. Restora
  3. # 2
Hi,
Use this custom css






@media (max-width: 767px){

.sp-slider #sp-slider-item-1595621548144-num-1-key #sp-slider-inner-item-1595621548146-num-1-key img {

    height: auto !important;

    width: 100% !important;

}



}


Add this css code inside the custom.css file.
Note: Path towards custom CSS:
Extensions>Templates>Styles>
Click on your current default template name then choose Template Options.
Then find custom CSS within the custom code.
https://prnt.sc/pu705g
https://prnt.sc/pu70zn
In Extensions>Template> Template Options > Custom Code > Custom CSS please add this
Thanks
  1. more than a month ago
  2. Restora
  3. # 3
That did the trick! Thanks.
  1. more than a month ago
  2. Restora
  3. # 4
Welcome
  1. more than a month ago
  2. Restora
  3. # 5


There are no replies made for this post yet.
Be one of the first to reply to this post!


This forum is archived

This forum has been archived. Please use JoomShaper official support system.

Please publish modules in sidebar position.