Can not get slider full width

Hi Kirby,

This is because your theme has some outer padding. How did you add the slideshow? Could you add it a little higher up in the code? Just after the header.

Hi,

Thank you for coming back to me.

I’ve added it using the add slider plugin by storefront, i don’t know how to add it higher :-/

Hi @kirbysab,

You might get better answers from their support team as the fix here involves changing their theme styles. The issue is that there’s a container that wraps all the content, so you will need to use absolute positioning. I can get you started with it but you’ll have to do testing and check how it works on mobile devices, etc. Add this to your stylesheet

.front__slider div.metaslider {
    position: absolute;
    top: 0;
    left: 0;
}
.site-content {
    position: relative;
}
.front__slider {
    height: 520px;
}

That’s worked perfectly thank you! I did reach out to storefront but they advised there was nothing they could do :-/

THANK YOU!

Actually it has created a very large gap between the Slider and Categories content on Mobile version but had the desired effect otherwise. Anything you can do to help with that please? If not i’ll reach back out to Storefront ??

Hi @kirbysab,

You might want to ask them for more specifics. With a wide browser it also breaks.

You could use a set of media queries to change the height. So you would set a media query for anything up until 600px

@media (max-width: 600px) {
  .front__slider {
    height: 200px;
  }
}

Storefront have resolved this now, thank you very much for your help ??

RESOLVED