Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Feb 2008
    Posts
    99
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Resize slider for mobile version of website

    Hi, I have a slider/promotional image set up for my website, which you can see under the menu bar HERE.

    I'm happy with this and how it looks/works on the desktop version of the site, but as soon as you can view the page in mobile, it cuts off most of the images, due to the size of them.

    My question is does anyone have an idea on how I can get the slider to resize and fit the screen when looking on a mobile? Basically I'd like it to scale instead of cropping.

    Thank you!


    Code:
    <div class="vc_row wpb_row row vc_custom_1425491842711"><div class="vc_column_container col-md-12"><div class="wpb_wrapper vc_column-inner"><div class="vc_row wpb_row vc_inner row"><div class="vc_column_container col-md-12"><div class="wpb_wrapper vc_column-inner"><div id="img-responsive" class="wpb_images_carousel wpb_content_element vc_clearfix img-responsive wpb_animate_when_almost_visible wpb_flipInX flipInX">
    <div class="wpb_wrapper">
    <div id="vc_images-carousel-1-1553468478" data-ride="vc_carousel" data-wrap="true" style="width: 1920px;" data-interval="5000" data-auto-height="yes" data-mode="horizontal" data-partial="false" data-per-view="1" data-hide-on-end="false" class="vc_slide vc_images_carousel">
    <!-- Indicators -->
    <ol class="vc_carousel-indicators">
    <li data-target="#vc_images-carousel-1-1553468478" data-slide-to="0"></li>
    <li data-target="#vc_images-carousel-1-1553468478" data-slide-to="1"></li>
    <li data-target="#vc_images-carousel-1-1553468478" data-slide-to="2"></li>
    </ol>
    <!-- Wrapper for slides -->
    <div class="vc_carousel-inner">
    <div class="vc_carousel-slideline">
    <div class="vc_carousel-slideline-inner">
    <div class="vc_item">
    <div class="vc_inner">
    <img class="" src="http://yourwebexample.co.uk/gymonline/wp-content/uploads/2019/03/gymequipmentbanners-func.jpg" width="1110" height="250" alt="gymequipmentbanners-func" title="gymequipmentbanners-func" />
    </div>
    </div>
    <div class="vc_item">
    <div class="vc_inner">
    <img class="" src="http://yourwebexample.co.uk/gymonline/wp-content/uploads/2019/03/gymequipmentbanners-func.jpg" width="1110" height="250" alt="gymequipmentbanners-func" title="gymequipmentbanners-func" />
    </div>
    </div>
    <div class="vc_item">
    <div class="vc_inner">
    <img class="" src="http://yourwebexample.co.uk/gymonline/wp-content/uploads/2019/03/gymequipmentbanners-func.jpg" width="1110" height="250" alt="gymequipmentbanners-func" title="gymequipmentbanners-func" />
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>

  2. #2
    Administrator VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    11,314
    Thanks
    7
    Thanked 1,361 Times in 1,330 Posts
    The first thing to do would be to remove the fixed width that is applied as inline style:

    Code:
    <div id="vc_images-carousel-1-1553468478" data-ride="vc_carousel" data-wrap="true" style="width: 1920px;" data-interval="5000" data-auto-height="yes" data-mode="horizontal" data-partial="false" data-per-view="1" data-hide-on-end="false" class="vc_slide vc_images_carousel">
    I tried it via the browser’s developer tools (code inspector) but it didn’t make a difference but that might be because everything has been loaded already, based on that width. So, remove that and then let’s see again.

  3. #3
    New Coder
    Join Date
    Feb 2008
    Posts
    99
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    The first thing to do would be to remove the fixed width that is applied as inline style:

    Code:
    <div id="vc_images-carousel-1-1553468478" data-ride="vc_carousel" data-wrap="true" style="width: 1920px;" data-interval="5000" data-auto-height="yes" data-mode="horizontal" data-partial="false" data-per-view="1" data-hide-on-end="false" class="vc_slide vc_images_carousel">
    I tried it via the browser’s developer tools (code inspector) but it didn’t make a difference but that might be because everything has been loaded already, based on that width. So, remove that and then let’s see again.

    I have just removed it and it seems to make it all go smaller. I also tried changing that width to "100%", but it also did not work.

  4. #4
    Administrator VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    11,314
    Thanks
    7
    Thanked 1,361 Times in 1,330 Posts
    It seems like all your images have changed to thumbnails. Did you do that on purpose?

  5. #5
    New Coder
    Join Date
    Feb 2008
    Posts
    99
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    It seems like all your images have changed to thumbnails. Did you do that on purpose?
    On the slider? No, they've all gone like that since I removed the 1920px size off the div.

  6. #6
    New Coder
    Join Date
    Feb 2008
    Posts
    99
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Edit: I should of pointed it out in OP, but I'm actually using WPBakery to create/design the homepage and I've just found out that if I remove the size, they automatically use thumbnails:

    Enter image size. Example: thumbnail, medium, large, full or other sizes defined by current theme. Alternatively enter image size in pixels: 200x100 (Width x Height). Leave empty to use "thumbnail" size. If used slides per view, this will be used to define carousel wrapper size.


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •