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
dawgmom
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.

HTML:

CODE
<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>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

CSS:
CODE
}
.wnwcontent .wnwpostcontent-0 .layout-item-5 {
    color: #737373;
    background: #FFFFFF;
    padding-top: 17px;
    padding-right: 17px;
    padding-bottom: 17px;
    padding-left: 17px;
    text-align:center;
}
.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(?):
CODE
jQuery(function ($) {
       'use strict';
       if ($.fn.themeSlider) {
           $(".wnwslidecontainersocial44").each(function () {
               var slideContainer = $(this), tmp;
               var inner = $(".wnwslider-inner", slideContainer);
               inner.children().filter("script").remove();
               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 () {
                       helper.processSlide($(this));
                   });

                  
               } else if (browser.ie && 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);
                   });
               }

               inner.children().eq(0).addClass("active");
               slideContainer.themeSlider({
                   pause: 2600,
                   speed: 600,
                   repeat: true,
                   animation: "fade",
                   direction: "next",
                   navigator: slideContainer.siblings(".wnwslidenavigatorsocial44"),
                   helper: helper
               });
              
                          
           });
       }
    });
    </script>

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

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

 



- Lo-Fi Version Time is now: 19th March 2024 - 02:48 AM