Posted by: dawgmom May 30 2019, 12:00 PM
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:
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>