Why is my website slideshow appearing blurry?

Store Design
1

I can not figure out how to get the slideshow not to be blurry. Homepage is https://pennylanefineart.com/.

Right now I’m working off a test theme, but I upload a 4000x3000 banner, and then when published or previewed, it’s 1380x699. There isn’t anywhere in the code that I can find max settings for the slideshow. Not sure where that setting would be hidden.

Thanks!

1 Like
2

@AliBeachPL

sorry for that issue

can you please send Slideshow section code

3

@KetanKumar Do you know where that would be? I’m searching through all the code and the only thing I can find is pasted below. There is no “slideshow.liquid” or any area that’s specified as slideshow code, I can only find the word slideshow within the theme.liquid code. I am totally new to shopify though, we lost an employee, so this might be a stupid question :slightly_smiling_face: Thank you!

{% if template contains ‘index’ and settings.show_slideshow %}
{{ ‘jquery.flexslider-min.js’ | asset_url | script_tag }}
{% endif %}

4

@KetanKumar Ok, I did also find that the jquery.flexslider-min.js that it references in the theme.liquid. But again, no slideshow.liquid…

I don’t see any place where it says a max width, though. Again, a little new to editing within the back end. I feel like it has to be something simple as to why it’s compressing what’s uploaded, but I’m at a loss.

/* FlexSlider Necessary Styles
********************************/
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {padding:0; display: none; -webkit-backface-visibility: hidden;} / Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: “.”; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}

  • html .slides {height: 1%;}

/* No JavaScript Fallback /
/ If you are not using another script, such as Modernizr, make sure you

  • include js that eliminates this class on page load */
    .no-js .slides > li:first-child {display: block;}

/* FlexSlider Default Theme
*********************************/
.flexslider {position: relative;z-index:5;}
.flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
.loading .flex-viewport { max-height: 300px; }
.flexslider .slides { zoom: 1; }
.carousel li { margin-right: 5px; }
{% if settings.slideshow_mask %}
.flexslider .slides .slider-mask{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: {{settings.slideshow_mask_colour}};
opacity: {{settings.slideshow_mask_opacity}};
filter: alpha(opacity={{settings.slideshow_mask_opacity | times:100}});
}
{% endif %}