Resizing the slideshow on the fashe theme for mobile screens

Need some help here, I’ve been stuck on this for 2 days now.

I am pretty new to web development. I am using the theme (GitHub - ColorlibHQ/Fashe: Free Shopify ecommerce theme) Fashe from this link.

Right now, when the site is viewed on a mobile device, the slideshow image is cropped on the sides.

Can someone help me with adding a check for when users are using a mobile device? Any help would be greatly appreciated.

Hey there

Please provide a link to your page and i will check your problem

Please help! Same question as above.

I need the slideshow graphics to be mobile responsive.

www.gotohaircare.com

Hi there

Gotohaircare - the problem here is in the images, the slider itself is responsive but image like this: https://cdn.shopify.com/s/files/1/0293/4764/3529/files/Slider_1_1920x570.png
can fit desktop and laptop screens but it’s impossible to use same images for mobile screens, you cant fin this horizontal images on the vertical screen of mobile and tablet

That’s the recommended size that the template provided. When I made the graphic smaller the image would become blurry.

To me, there needs to be a code in place so it doesn’t do that. Any suggestions for the fix?

I just want a fixed banner/slideshow size that does not crop in mobile or desktop.

Ok, in this case, you can try this CSS code:

@media (max-width: 576px) {
.item-slick1 {
height: 120px;
}
}

Let me know if it worked

There’s no section called media, see attached photo. Where is the code supposed to go?

I’ve tried adding it to the slideshow (error message) & theme (nothing changed). At this point I give up :frowning:

Hi there

Please add this code in Appearance > customize > additional css

I am using the Fashe Website theme, and when i upload my header logo, it seems to be super small.

Is there a way to make the logo size bigger so i can actually see my logo?

Hey there

@fsalrash please post url of the website

Here is the link:

https://stylemaroc.myshopify.com/

Hey there

You can use this CSS code to change size of the logo:

.logo img {
max-height: 80px;
}

it worked in the normal front page, but in the phone it is still small.

Also, for my checkout page it is still too small

Hi

Add this code as well:

.logo-mobile img {
max-height: 89px;
}

Hi,

Also, the checkout page the logo is too small

Hi

Use this code:

.logo__image–large {
max-height: 90px;
}

Hello,

It didn’t work.

HI

It’s not added, please add this version:

.logo__image–large {
max-height: 90px !important;
}

Or increase value in the code