FROM CACHE - en_header

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 

Replies 11 (11)
dmwwebartisan
Shopify Partner
11014 2377 3400

@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 | Click here GemPages The most powerful Shopify page builder.
vitamentltd
Tourist
38 0 1
vitamentltd
Tourist
38 0 1
dmwwebartisan
Shopify Partner
11014 2377 3400

@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 | Click here GemPages The most powerful Shopify page builder.
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

dmwwebartisan
Shopify Partner
11014 2377 3400

@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 | Click here GemPages The most powerful Shopify page builder.
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. 

dmwwebartisan
Shopify Partner
11014 2377 3400

@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 | Click here GemPages The most powerful Shopify page builder.
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

dmwwebartisan
Shopify Partner
11014 2377 3400

@vitamentltd 

Please remove previous css after add this new css

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

.collection-slider .product-card__title {
    font-size: 10px;
    text-transform:uppercase !important;
}

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

.collection-slider .price__regular {
    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;
}
}


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 | Click here GemPages The most powerful Shopify page builder.
vitamentltd
Tourist
38 0 1

This made it worse. 

This is the best code when you change it from -32 to 10px

Are you looking on Mobile?

 

@media screen and (max-width: 750px) {
  .collection-slider .slick-slide {
  opacity: 1;
  }
  
}
@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 10px;
}
}