How can I fix the right gap in mobile view?

[GrainneRyles]

Hey Guys, I tried to fix this issue but to no avail. when i swap between desktop and mobile view, there is a gap on the right in mobile view. I tried so many things to fix it but my solution gets undone when i reload the page. Any Idea how to fix this will be much appreciated

[Moeed · Accepted solution]

Hey @GrainneRyles 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag.

<style>
@media (max-width: 767px) {
slideshow-component {
    width: 110% !important;
}
}
</style>

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Moeed]

Hey @GrainneRyles 
Kindly share your Store URL and Password if enabled

[GrainneRyles]

my apologies its https://rylespharmacy.ie/ and there is no password

[Moeed · Accepted solution]

Hey @GrainneRyles 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag.

<style>
@media (max-width: 767px) {
slideshow-component {
    width: 110% !important;
}
}
</style>

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[GrainneRyles]

Hey @Moeed Thank you for the speedy response. It has fixed the slideshow width but not the featured products components as  shown in the picture below.  I am assuming i would do a similar media size for that component. I am not sure what the component would be called in CSS

[Moeed · Accepted solution]

Hey @GrainneRyles 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag.

<style>
@media (max-width: 767px) {
.color-accent-2.isolate.gradient {
    width: 110% !important;
}
.color-accent-1.isolate.gradient {
    width: 110% !important;
}
.multicolumn.color-accent-2.gradient.background-primary {
    width: 110% !important;
}
}
</style>

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[GrainneRyles]

@Moeed you are an absolute hero. Thank you for your time today. You have given me a greater understanding of shopify. Its been a pleasure.