Support Forums

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Smart Slider cuts images in responsive mode

Featured Lock Resolved Issue
Hi,

I'm using SP Smart Slider with the Awetive template. By using a mobile device to access the homepage, the images which are used in smart slider will be cut off instead of being resized. Is there a possibility to resize and show the full image even on a mobile device?

Link to homepage: http://www.baxframe.at

Thanks in advance!
Gerald

8 Answers

Arun Sasi

More than a month ago #Permalink
Hi,

For mobile version you can override the CSS in the resposnive.less. paste the below css in media query

@media (max-width: 767px){

#sp-slider-wrapper .sp-smart-slider.sp-awetive-layout .sp-slider-content {
background: transparent;
}
#sp-slider-wrapper .sp-smart-slider.sp-awetive-layout .sp-slider-content:after {
border-left: none;
}

}

Thanks
Arun

Guy Walder

More than a month ago #Permalink
Hello,

I'm trying to achieve the same result with Glamour template. The slider is being cut off at the sides and I would like it to keep 100% width at all times (ps and mobile).
Tried to add this code to my responsive.less file:
#sp-custom-position-wrapper .sp-smart-slider.sp-glamour-layout .sp-slider-content {
background: transparent;
}
#sp-custom-position-wrapper .sp-smart-slider.sp-glamour-layout .sp-slider-content:after {
border-left: none;
}


It didn't work. Can you please provide the code for this feature.

Regards,

Guy.

Arun Sasi

More than a month ago #Permalink
Hi,

Please share your website and PM the admin details.
Thanks
Arun

Guy Walder

More than a month ago #Permalink
Hi Arun,

Thank you for your replay, here is my site URL:
http://fitin.guywalderonline.com/index.php/he/

Thank you again,

Guy.

Arun Sasi

More than a month ago #Permalink
Hi,

Please try below css
@media only screen and (max-width: 767px)
.responsive section, .responsive header#sp-header-wrapper {
padding-left: 0;
padding-right: 0;
box-sizing: border-box;
}


Thanks
Arun

Guy Walder

More than a month ago #Permalink
Hi Arun,

Thank you for your kind help.
Sadly the solution did not work. In addition, the changes to the code somehow messed up the sticky menu. Changed it back and it worked again.
Any other options?

Thank you again for your help,

Guy.

Arun Sasi

More than a month ago #Permalink
Hi,

I have checked your website. The slider is working perfectly..

Thanks
Arun

Guy Walder

More than a month ago #Permalink
Hi Arun,

Thank you. Yes, I've solved this issue by adding new breaking points to the responsive.less file and adding the following line:
#sp-smart-slider.sp-glamour-layout, .sp-glamour-layout .sp-slider-item {
height: the desired height for this breaking point px;
}
I hope it will help someone with the same issue in the future :)

Thank you again,

Guy.


There are no replies made for this post yet.
However, you are not allowed to reply to this post.

Leaderboard (30 days)

Sifat

Sifat

Total Accepted Answers: 123
Paul Frankowski

Paul Frankowski

Total Accepted Answers: 101
Toufiq

Toufiq

Total Accepted Answers: 36
Pavel

Pavel

Total Accepted Answers: 3
J

johnny

Total Accepted Answers: 3

100+

Templates

200,000+

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us