"Supply" theme - Full width flexslider

Highlighted
New Member
4 0 1

Hi All,

I'm currently running on Supply theme for my store, and i would like to know how to modify flexslider to fullwidth?

I've tried changing the CSS around but it doesn't seem to work.

.flexslider {
  margin: 0 0 $gutter*1.5;
  padding: 0;
  max-width: 100%;
}
.flexslider li { 
  margin: 0; 
  max-width: 100%; }

.flexslider .slides > li {
  display: none; /* Hide the slides before the JS is loaded. Avoids image jumping */
  margin: 0;
  position: relative;
  @include backface();

  .slide-hide {
      visibility: hidden;
    }
}
.flexslider .slides img {
  max-width: 1056px;
  margin: auto;
  display: block;
}

.flexslider .slides .placeholder-noblocks {
  height: auto;
  width: 100%;
  max-height: 100%;
  @include at-query ($min, $large) {
    height: 430px;
  }
  @include at-query ($max, $medium) {
    height: 30vh;
  }
}

 

What did i do wrong?

 

Thank you very much for your help.

Best,

Adrian

1 Like
Highlighted
Shopify Staff
Shopify Staff
97 0 21

Hey Adrian,

David here from the Shopify Guru team!

I've reached out to you directly about this so you can respond to that email with any questions you may have :)

Cheers,

David Mc | Shopify Guru

0 Likes
Highlighted
New Member
2 0 0

Hi 

David, can you tell me how I could align my slider image to the rest of my homepage:

Here is my site: https://www.liastones.com/

0 Likes
Highlighted
Shopify Partner
3 0 0

I'm also using the supply theme I would like to do the same thing

can you help me make my slide images full width

thank you

Mike Mc Avoy

http://a1productsource.myshopify.com

0 Likes
Highlighted
Shopify Partner
3 0 0

can some please help me with this

i'm using supply theme and I want to make the image slider full width of the browser

 

Peter Mc Avoy 

from   a1productsource.myshopify.com

0 Likes
Highlighted
Tourist
15 0 1

any update for the coding on this? Thanks

0 Likes
Excursionist
41 0 6

While trying to figure out what the issue here is I noticed that the problem here is not entirely in the CSS.

I noticed that Flexslider adds a little parameter to the image URL '_1024x' which actually returns the image with a 1024px width.

Image URL

How do we fix this?

Martin Schwartz - Coding your dream to life - iconstudiosny.com
0 Likes
Highlighted
Excursionist
41 0 6

Ok, Guys & Gals! Here it is.

Go to your theme files > Sections > slideshow.liquid by me it was on lines 10-11

<img src="{{ block.settings.slide | img_url: '1024x' }}" srcset="{{ block.settings.slide | img_url: '1024x' }} 1x, {{ block.settings.slide | img_url: '1024x', scale: 2 }} 2x" alt="{{ block.settings.slide.alt }}">

As you will see the attribute 

img_url: '1024x'

Is what forces the image width, Just change it to your desired width and you are good to go!

Martin Schwartz - Coding your dream to life - iconstudiosny.com
1 Like
Highlighted
New Member
1 0 0

David Mc,

Can you please reach out to me to provide direction on how to make the supply theme slider full width?

Thanks!

0 Likes
Highlighted
New Member
6 0 0

 I found this thread looking for something else, but I have actually got this working on my site - https://bee-equipment.co.uk/

It was a pain to set up about a year ago, but I thought if I could help someone else get through it then great. I hope the code makes sense.

Basically you have to subtract the margins around the slider rather than just resize it to fit the supply theme. There are a few other things going on as well. This is for 1060px width.

The mobile view becomes a bit crampt at the size of slide I was working with so I had it crop the slide somewhat on smaller devices.

This might not work for your site it might help you find an answer.

/*Main slideshow full width code*/

.main-content {
  padding-top: 20px;
  background-color: white;
}

.breadcrumb {
  margin-top: 0px;
}

.slider-section {
  margin-left: -30px;
  margin-right: -30px;
  margin-top: -20px;
}

@media screen and (max-width: 719px) {
  .slider-section {
  margin-left: -15px;
  margin-right: -15px;
}
}

.flexslider .slides img {
    width: 1060px;
    height: 100%;
    margin: 0 auto;
    display: block;
}

/*slideshow mobile zoom*/

@media screen and (max-width: 480px) {
  .flexslider {
    transform: scale(1.2);
    margin-top: 10px;
  }
}

@media screen and (max-width: 480px) {
#shopify-section-slideshow {
  overflow: hidden;
}
}

 

0 Likes