Help With Athens Theme

[Dan_MW]

Hi

I'm happy with the design of my store for a desktop view however the mobile view isn't how I want it.

First issue is slides on mobile view. Id like this to be sized and look the same as they do on a desktop.

Second issue is i want 2 product columns on the different collections pages, there doesn't seem to be an option for this however the home page does. 

Id also like to change the colour of the add to basket button to green for desktop and mobile views 

Any help would be massively appreciated 

www.moon-whale.com

[Moeed · Accepted solution]

Hey @Dan_MW 

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 screen and (max-width: 767px) {
.slideshow-media img {
    object-fit: contain !important;
}
ul#product-grid li {
    width: 47% !important;
}
}
</style>

RESULT

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

Best Regards,
Moeed

[Dan_MW]

Thanks so much moeed, it solved the column issue.

The slide isnt quite right, it fits the image however its leaving this ugly space around it, is there a way to shrink this too?

Thanks

Dan

[Moeed]

In the code mentioned above, just simply replace the word "contain" with "fill" and it should fix that problem too.

Best Regards,

Moeed

[Dan_MW]

it went back to a squashed square, i like the original solution you gave however take look further down the page at the journey together banner, i want to make that block more narrow to the size of the banner, is that possible?

thanks

Dan

[Dan_MW]

so i want the banner to remain that size for mobile but remove all that white space around it, basically shrinking the box that holds the slide