[Plugin: Promotion Slider] Slider in Responsive Theme

  • Resolved McTomTom

    (@mctomtom)


    12 years, 3 months ago

    Hi, first of all: Great PlugIn. I like to use the slider in the header of responsive theme. There are several breakpoints, where the slider should be sized down in height and width – corresponding to the responive grid. After researching a bit, i found the following script:

    .promo_slider_wrapper { margin:0; position:relative; height: full; z-index:-1000;}
    .promo_slider {height:196pxpx; overflow:hidden; position:relative; }
    .promo_slider img { margin:0; padding:0; width: 960px; height: 196px;}

    The problem is, that the total height of the slider stays at 196px (the original height of the images used) and creates a blank space between the correct shrinked image and the following Menu. I tried several parameters für the width, but “full”, “automatic” or “100%” does’nt work. Because than, it takes the sum of all images, included in the slider and adds it to the total height of the slider. The width is working perfectly with the script above.

    My question is: How can I set the correct height, so that the slider HEIGHT (and width) will fit to the different grid “resolutions”.

    Thank you for any comment.

    https://www.ads-software.com/extend/plugins/promotion-slider/

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hello world, I’ve got the same problem…
    is there any solution to get rid oft that gap? Otherways I will have to stop using it.
    Thanks a lot

    Plugin Author Micah Wood

    (@woodent)

    @samsala,

    Can you paste a link to the page where your slider is? It is just a basic CSS issue that I could help you resolve if I can see it in context.

    Hi, I have exactly the same problem. I was thinking this was an issue with my theme but I figure it’s actually an inherent issue with the plug-in which comes from having to specify the height in pixels.

    Example: https://matthewsinclair.net/

    Then use something like screenfly to see how that page looks at different screen resolutions, such as netbook, tablet or smartphone:

    (default view on above link is netbook and the big gap is quite obvious at the bottom).

    Is there anything that can be done, does any one know?

    Thanks in advance.

    The hackish way I got the slider to appear correctly for me in my responsive theme was to override the height of ‘promo_slider’ in each of the media queries (for the different responsive screen sizes).
    For the responsive mobile media query for your website you could add something like

    .promo_slider {
		height: 250px !important;
	}

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘[Plugin: Promotion Slider] Slider in Responsive Theme’ is closed to new replies.