Slider Image

[Kelly_Nelson]

HELP PLEASE!! After what felt like years attempting to adjust the size of the slider image on the Minimal theme, I was finally able to do so! The homepage looks perfect, I was able to make the images smaller than what the template originally sets them at. HOWEVER, it only looks perfect on the desktop. When I view my website on a tablet or mobile phone, the slider images are huge and not centered. This was never the problem before, the slider images always looked perfect on mobile and tablet, desktop was my only issue. Soooooo, how do I get my slider images to look normal again, meaning that they actually fit on the tablet or mobile screen, withouth affecting the desktop slider image size?

[Bhavesh_Parmar]

Hello,

i just checked http://brassandburlap.com.

you want to display slider image same as it right now, and solve issue of images in tablet and mobile view.

am i right?

i can solve your problem immediatly.

my email : bhavesh067@gmail.com

Thanks!

[Jason]

Part of the problem is that you set a width and height for the pics and flexsider div when you should have just set a max-width on the img instead. This would have constrained the width on larger screens but still allowed for them to scale on smaller ones. 

This is more likely the styles you had hoped to add / modify: 

.flexslider .slides img {
  max-width: 800px; /* or whatever the max width should be */
  width: 100%;
}

.flexslider {
  margin: 0 auto 2em;
  padding: 0;
}

Compare that to what you've got. Be sure to test this in a theme copy just to avoid breaking things further.

[Kelly_Nelson]

I removed the height setting, and I only left the width. However, desktop and mobile view are still too large and aligning to the right of the page. So you have a better idea, this is what I currently have:

/* 6.1 - FlexSlider */
.flex-container a:active,.flexslider a:active,.flex-container a:focus,.flexslider a:focus  {outline: none;}
.slides,.flex-control-nav,.flex-direction-nav {margin: 0; padding: 0; list-style: none;}
.flexslider {width: 800px; margin-left: auto; margin-right: auto;; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden; margin-bottom: 0px !important;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {max-width: 800px; display: block;}
.flex-pauseplay span {text-transform: capitalize;}
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}

Please let me know if you notice what's wrong or what could be causing the disorienation on the mobile and tablet view. Thank you so much for the help!!!

[Bhavesh_Parmar]

Hi.

Replace the above code with the following code :

/* 6.1 - FlexSlider */
.flex-container a:active,.flexslider a:active,.flex-container a:focus,.flexslider a:focus  {outline: none;}
.slides,.flex-control-nav,.flex-direction-nav {margin: 0; padding: 0; list-style: none;}
.flexslider {max-width: 800px; width:100%; margin-left: auto; margin-right: auto;; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden; margin-bottom: 0px !important;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {max-width: 800px; width:100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}

Hope this will work!

Thanks!

[Jason]

You've still got the width set on the .flexslider class.
The example I gave removed that.

Also the .flexslider .slides img class added a width of 100%.

[Kelly_Nelson]

It worked, thank you so much for all your help! The tablet and mobile view are back to normal. However, the slider image width is perfect but the height is a little large. Im hesitant to adjust it now that everything is fixed, but it's kind of bothering me. What's the best way to adjust the image height?

[Bhavesh_Parmar]

Hi

Add max-height

.flexslider {max-height:yourheight;width: 800px; margin-left: auto; margin-right: auto;; padding: 0;}

and .flexslider .slides img{max-height:yourheight; max-width: 800px; width:100%; display: block;}

[bigwidegrin]

Hi, 

We have the minimal theme and have the same problem, when viewing on pc its fine, but when we view on phone the slider is cropped and only can see part of the slider. Please help, have been trying to sort this out looking through the shopify discussions,, but just don't seem to work