Slider Issues, Different formatting on the same slider (mobile)

vitamentltd
Tourist
38 0 1

Hi,

 

CAN ANYONE PLEASE HELP. 

When viewing my site on mobile view i have 3 of the same sliders but each one displays differently. 

One is correct. One has incorrect padding/spacing and the last has incorrect font sizes. 

 

See attached images. 

Oil Drops Slider - This is the correctly formatted slider

Alpha - This has small fonts

Cordycepts - - this slider has incorrect spacing and fonts. 

IMG_2807.PNGIMG_2808.PNGIMG_2809.jpg 

 

 

Please help 

0 Likes
dmwwebartisan
Shopify Partner
7292 1721 2292

@vitamentltd 

Please share your web shop URL.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
vitamentltd
Tourist
38 0 1

thank you so much www.vitament.co.uk

0 Likes
vitamentltd
Tourist
38 0 1
Thank you so much  www.vitament.co.uk


0 Likes
dmwwebartisan
Shopify Partner
7292 1721 2292

@vitamentltd 

 please Go to Online Store->Theme->Edit code then go to assets/theme.scss.liquid ->paste below code at the bottom of the file. 

@media only screen and (max-width:749px){
.collection-slider .grid-view-item__image-wrapper {
    max-width: 150px !important;
}
}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
vitamentltd
Tourist
38 0 1

sorry, this did not work, just made images very small, the gaps and fonts were still incorrect. 

The images need to be full size and so does font size

0 Likes
dmwwebartisan
Shopify Partner
7292 1721 2292

@vitamentltd 

Please try this css 

@media only screen and (max-width:749px){
.collection-slider .slick-slide {
    transform: none !important;
}

.collection-slider .product-card__title {
    font-size: 10px;
}

.collection-slider .price__vendor--listing {
    font-size: 10px;
}

.collection-slider .price--on-sale .price__sale {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 10px;
}

.collection-slider .grid-view-item {
    margin: 0 auto -38px;
}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
vitamentltd
Tourist
38 0 1

This fixed a alot thank you! problem now is the padding/gaps.

 

On mobile 2 slider have text cut off. The top slider is ok. 

 

New Issue: The first 3 products of the slider are small text. after the first 3 it is correct. 

0 Likes
dmwwebartisan
Shopify Partner
7292 1721 2292

@vitamentltd 

Please share screenshot .

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
vitamentltd
Tourist
38 0 1

Sure, attached.

 

The font issue i think i have found, It is on mobile and when there is a special offer price. It is ok when no special offer. 

IMG_2810.jpgIMG_2811.jpgIMG_2812.jpg

0 Likes