[Resolved] how to make extra width single image be responsive using post slider module

[Author]

Posts

[Jeffrey]

Could I ask a help with the module of width post slider? I am trying to use the ready to use module of width post slider on homepage, it is very great. 🙂 but normally, most people would like to use extra width images on slider, it will cause image transformed on mobile devices if I limit image height, if not, the images will be shrinked too small. how can I resize or scale up the images with properly size. the attachments are the sample which I drew up. Thank you so much

[Noman]

Hi Jeffrey,

Thank you for contacting Toolset support. This question basically should be directed towards your Slider plugin support since this is not related to Toolset, I believe this is the slider plugin you are using:
hidden link

Please note we do not support or consult on 3rd party plugins as per our support policy (https://toolset.com/toolset-support-policy/) so this out of our support. But I will give it a quick look and see if I can provide you with something.

1. Please provide page link for this slider.
2. Which mobile device you are currently using to view this page (iPhone 6, Samsung galaxy, etc)?

Thank you

[Jeffrey]

Hi Noman, I am using ready to use module which toolset provided, you can see it by https://toolset.com/home/module-manager/ . I know just add a class to image like lass='img-responsive ' alt='100%x250' style='height: 400px; width:100%; display: center-block;' Wide Post Slider , it will make image responsive on mobile devices, but for extra width, will be ugly on mobile devices, I just want to look for a help with css to make image keep orign and automatically cut out both sides. I have searched many webpages about this, but didn't find a simple way. could you help with it? Thank you

[Noman]

Ok I apologize I get it wrong at first. You can achieve this by updating HTML in the View like below -- screenshot attached:

<div class="post-slider-image">
    <div class="slider-image" style='background-image:url([types field="slide-image" output="raw"][/types])'>  </div>
  </div>

And add CSS like this in the View >> CSS editor section:

.slider-image {
  background-repeat:no-repeat;
  width:100%;
  height:400px;
  background-position: center center;
}

It will give your image desired look, modify the css as necessary and to use it only for Mobile devices, you can use css media query.

Thank you