The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

Reply to this topicStart new topic
> Carousel cut off when scaling / resizing browser
post May 30 2019, 12:00 PM
Post #1

Group: Members
Posts: 2
Joined: 29-March 16
Member No.: 24,111

Please help me with this. Here's what the site I'm working on looks like as I scale my browser from right to left. The image is actually a JQuery slider and I'm trying to keep it centered with padding around it:

IPB Image

So, full width is fine, shrinking cuts off the slider until it centers at the smallest scale. I can't get the image to retain it's margin / padding as it resizes.

Here's my section of HTML and the CSS. Thanks so much. P.S. The site isn't live yet but I could upload to a shared server if really necessary.


<div id="social44">
                                                        <div class="wnwslider wnwslidecontainersocial44" data-height="200" data-width="200">
                                                            <div class="wnwslider-inner" >
                                                                <div class="wnwslide-item wnwslidesocial440"></div>
                                                                <div class="wnwslide-item wnwslidesocial441"></div>

.wnwcontent .wnwpostcontent-0 .layout-item-5 {
    color: #737373;
    background: #FFFFFF;
    padding-top: 17px;
    padding-right: 17px;
    padding-bottom: 17px;
    padding-left: 17px;
.wnwslidecontainersocial44 {
    width: 200px;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
.wnwslider-inner {
    overflow: auto;
    width: 100%;
    height: 100%;
.wnwslidesocial440 {
    background-image: url('images/social-4.png');
    background-size: 200px;    
    background-position: center center;
    background-repeat: no-repeat;
.wnwslidesocial441 {
    background-image: url('images/social-1.png');
    background-size: auto auto;
    background-position: center center;
    background-repeat: no-repeat;

I'm also including the JQuery - I think this is where the wnwslide-item function is(?):
jQuery(function ($) {
       'use strict';
       if ($.fn.themeSlider) {
           $(".wnwslidecontainersocial44").each(function () {
               var slideContainer = $(this), tmp;
               var inner = $(".wnwslider-inner", slideContainer);
               var helper = null;
               if ($.support.themeTransition) {
                   helper = new BackgroundHelper();
                   helper.init("fadeext", $(".wnwslide-item", inner).first().css($.support.themeTransition.prefix + "transition-duration"));
                   inner.children().each(function () {

               } else if ( && browser.version <= 8) {
                   var slidesInfo = {
    ".wnwslidesocial440": {
       "bgimage" : "url('images/slidesocial440.jpg')",
       "bgposition": "center top",
       "images": "",
       "positions": ""
    ".wnwslidesocial441": {
       "bgimage" : "url('images/slidesocial441.jpg')",
       "bgposition": "center top",
       "images": "",
       "positions": ""
                   $.each(slidesInfo, function(selector, info) {
                       processElementMultiplyBg(slideContainer.find(selector), info);

                   pause: 2600,
                   speed: 600,
                   repeat: true,
                   animation: "fade",
                   direction: "next",
                   navigator: slideContainer.siblings(".wnwslidenavigatorsocial44"),
                   helper: helper

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:


- Lo-Fi Version Time is now: 5th June 2020 - 07:55 AM