Skip Navigation

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

This support ticket is created 7 years, 2 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Our next available supporter will start replying to tickets in about 2.04 hours from now. Thank you for your understanding.

Sun Mon Tue Wed Thu Fri Sat
- 12:00 – 17:00 12:00 – 17:00 12:00 – 17:00 12:00 – 17:00 12:00 – 17:00 -
- 18:00 – 21:00 18:00 – 21:00 18:00 – 21:00 18:00 – 21:00 18:00 – 21:00 -

Supporter timezone: Asia/Karachi (GMT+05:00)

This topic contains 3 replies, has 2 voices.

Last updated by Noman 7 years, 2 months ago.

Assisted by: Noman.

Author
Posts
#567471
QQ图片20170907011121.png
QQ图片20170907011009.png

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

#567530

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

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

#567659
QQ图片20170907090457.png

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

#567702

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

View.png

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