# Resizing the slideshow on the fashe theme for mobile screens

**URL:** <https://colorlibsupport.com/t/resizing-the-slideshow-on-the-fashe-theme-for-mobile-screens/24755>\
**Category:** Other\
**Created:** [December 12, 2019, 1:48am UTC](https://colorlibsupport.com/t/resizing-the-slideshow-on-the-fashe-theme-for-mobile-screens/24755 "2019-12-12T01:48:51Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![da360tornado](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/d/bb73d2/32.png) [@da360tornado](https://colorlibsupport.com/u/da360tornado)\
**Post date:** [December 12, 2019, 1:48am UTC](https://colorlibsupport.com/t/resizing-the-slideshow-on-the-fashe-theme-for-mobile-screens/24755/1 "2019-12-12T01:48:51Z")

</div>

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](https://github.com/ColorlibHQ/Fashe)) 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.

---

<div class="post-metadata">

**Author:** ![colorlibsupport](https://colorlibsupport.com/user_avatar/colorlibsupport.com/colorlibsupport/32/1494_2.png) [@colorlibsupport](https://colorlibsupport.com/u/colorlibsupport)\
**Post date:** [December 12, 2019, 10:33am UTC](https://colorlibsupport.com/t/resizing-the-slideshow-on-the-fashe-theme-for-mobile-screens/24755/2 "2019-12-12T10:33:02Z")

</div>

Hey there

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

---

<div class="post-metadata">

**Author:** ![gotohaircare](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/g/cdc98d/32.png) [@gotohaircare](https://colorlibsupport.com/u/gotohaircare)\
**Post date:** [February 10, 2020, 12:51am UTC](https://colorlibsupport.com/t/resizing-the-slideshow-on-the-fashe-theme-for-mobile-screens/24755/3 "2020-02-10T00:51:42Z")

</div>

Please help! Same question as above.

I need the slideshow graphics to be mobile responsive.

[www.gotohaircare.com](http://www.gotohaircare.com)

---

<div class="post-metadata">

**Author:** ![colorlibsupport](https://colorlibsupport.com/user_avatar/colorlibsupport.com/colorlibsupport/32/1494_2.png) [@colorlibsupport](https://colorlibsupport.com/u/colorlibsupport)\
**Post date:** [February 10, 2020, 11:53am UTC](https://colorlibsupport.com/t/resizing-the-slideshow-on-the-fashe-theme-for-mobile-screens/24755/4 "2020-02-10T11:53:19Z")

</div>

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](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

---

<div class="post-metadata">

**Author:** ![gotohaircare](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/g/cdc98d/32.png) [@gotohaircare](https://colorlibsupport.com/u/gotohaircare)\
**Post date:** [February 10, 2020, 6:50pm UTC](https://colorlibsupport.com/t/resizing-the-slideshow-on-the-fashe-theme-for-mobile-screens/24755/5 "2020-02-10T18:50:32Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![gotohaircare](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/g/cdc98d/32.png) [@gotohaircare](https://colorlibsupport.com/u/gotohaircare)\
**Post date:** [February 10, 2020, 8:01pm UTC](https://colorlibsupport.com/t/resizing-the-slideshow-on-the-fashe-theme-for-mobile-screens/24755/6 "2020-02-10T20:01:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![colorlibsupport](https://colorlibsupport.com/user_avatar/colorlibsupport.com/colorlibsupport/32/1494_2.png) [@colorlibsupport](https://colorlibsupport.com/u/colorlibsupport)\
**Post date:** [February 11, 2020, 12:10pm UTC](https://colorlibsupport.com/t/resizing-the-slideshow-on-the-fashe-theme-for-mobile-screens/24755/7 "2020-02-11T12:10:26Z")

</div>

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

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

Let me know if it worked

---

<div class="post-metadata">

**Author:** ![gotohaircare](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/g/cdc98d/32.png) [@gotohaircare](https://colorlibsupport.com/u/gotohaircare)\
**Post date:** [February 11, 2020, 5:58pm UTC](https://colorlibsupport.com/t/resizing-the-slideshow-on-the-fashe-theme-for-mobile-screens/24755/8 "2020-02-11T17:58:53Z")

</div>

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 ☹

---

<div class="post-metadata">

**Author:** ![colorlibsupport](https://colorlibsupport.com/user_avatar/colorlibsupport.com/colorlibsupport/32/1494_2.png) [@colorlibsupport](https://colorlibsupport.com/u/colorlibsupport)\
**Post date:** [February 12, 2020, 10:09am UTC](https://colorlibsupport.com/t/resizing-the-slideshow-on-the-fashe-theme-for-mobile-screens/24755/9 "2020-02-12T10:09:24Z")

</div>

Hi there

Please add this code in Appearance \> customize \> additional css

---

<div class="post-metadata">

**Author:** ![fsalrash](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/f/a9adbd/32.png) [@fsalrash](https://colorlibsupport.com/u/fsalrash)\
**Post date:** [April 22, 2020, 5:49pm UTC](https://colorlibsupport.com/t/resizing-the-slideshow-on-the-fashe-theme-for-mobile-screens/24755/10 "2020-04-22T17:49:54Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![colorlibsupport](https://colorlibsupport.com/user_avatar/colorlibsupport.com/colorlibsupport/32/1494_2.png) [@colorlibsupport](https://colorlibsupport.com/u/colorlibsupport)\
**Post date:** [April 23, 2020, 3:49am UTC](https://colorlibsupport.com/t/resizing-the-slideshow-on-the-fashe-theme-for-mobile-screens/24755/11 "2020-04-23T03:49:28Z")

</div>

Hey there

@fsalrash please post url of the website

---

<div class="post-metadata">

**Author:** ![fsalrash](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/f/a9adbd/32.png) [@fsalrash](https://colorlibsupport.com/u/fsalrash)\
**Post date:** [April 24, 2020, 3:09pm UTC](https://colorlibsupport.com/t/resizing-the-slideshow-on-the-fashe-theme-for-mobile-screens/24755/12 "2020-04-24T15:09:34Z")

</div>

Here is the link:

[https://stylemaroc.myshopify.com/](https://stylemaroc.myshopify.com/)

---

<div class="post-metadata">

**Author:** ![colorlibsupport](https://colorlibsupport.com/user_avatar/colorlibsupport.com/colorlibsupport/32/1494_2.png) [@colorlibsupport](https://colorlibsupport.com/u/colorlibsupport)\
**Post date:** [April 27, 2020, 3:40am UTC](https://colorlibsupport.com/t/resizing-the-slideshow-on-the-fashe-theme-for-mobile-screens/24755/13 "2020-04-27T03:40:08Z")

</div>

Hey there

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

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

---

<div class="post-metadata">

**Author:** ![fsalrash](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/f/a9adbd/32.png) [@fsalrash](https://colorlibsupport.com/u/fsalrash)\
**Post date:** [April 30, 2020, 1:25am UTC](https://colorlibsupport.com/t/resizing-the-slideshow-on-the-fashe-theme-for-mobile-screens/24755/14 "2020-04-30T01:25:23Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![fsalrash](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/f/a9adbd/32.png) [@fsalrash](https://colorlibsupport.com/u/fsalrash)\
**Post date:** [April 30, 2020, 1:33am UTC](https://colorlibsupport.com/t/resizing-the-slideshow-on-the-fashe-theme-for-mobile-screens/24755/15 "2020-04-30T01:33:20Z")

</div>

Also, for my checkout page it is still too small

---

<div class="post-metadata">

**Author:** ![colorlibsupport](https://colorlibsupport.com/user_avatar/colorlibsupport.com/colorlibsupport/32/1494_2.png) [@colorlibsupport](https://colorlibsupport.com/u/colorlibsupport)\
**Post date:** [April 30, 2020, 3:45am UTC](https://colorlibsupport.com/t/resizing-the-slideshow-on-the-fashe-theme-for-mobile-screens/24755/16 "2020-04-30T03:45:13Z")

</div>

Hi

Add this code as well:

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

---

<div class="post-metadata">

**Author:** ![fsalrash](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/f/a9adbd/32.png) [@fsalrash](https://colorlibsupport.com/u/fsalrash)\
**Post date:** [April 30, 2020, 1:45pm UTC](https://colorlibsupport.com/t/resizing-the-slideshow-on-the-fashe-theme-for-mobile-screens/24755/17 "2020-04-30T13:45:55Z")

</div>

Hi,

Also, the checkout page the logo is too small

---

<div class="post-metadata">

**Author:** ![colorlibsupport](https://colorlibsupport.com/user_avatar/colorlibsupport.com/colorlibsupport/32/1494_2.png) [@colorlibsupport](https://colorlibsupport.com/u/colorlibsupport)\
**Post date:** [May 1, 2020, 4:33am UTC](https://colorlibsupport.com/t/resizing-the-slideshow-on-the-fashe-theme-for-mobile-screens/24755/18 "2020-05-01T04:33:05Z")

</div>

Hi

Use this code:

.logo\_\_image–large {  
max-height: 90px;  
}

---

<div class="post-metadata">

**Author:** ![fsalrash](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/f/a9adbd/32.png) [@fsalrash](https://colorlibsupport.com/u/fsalrash)\
**Post date:** [May 1, 2020, 6:12pm UTC](https://colorlibsupport.com/t/resizing-the-slideshow-on-the-fashe-theme-for-mobile-screens/24755/19 "2020-05-01T18:12:49Z")

</div>

Hello,

It didn’t work.

---

<div class="post-metadata">

**Author:** ![colorlibsupport](https://colorlibsupport.com/user_avatar/colorlibsupport.com/colorlibsupport/32/1494_2.png) [@colorlibsupport](https://colorlibsupport.com/u/colorlibsupport)\
**Post date:** [May 4, 2020, 3:42am UTC](https://colorlibsupport.com/t/resizing-the-slideshow-on-the-fashe-theme-for-mobile-screens/24755/20 "2020-05-04T03:42:53Z")

</div>

HI

It’s not added, please add this version:

.logo\_\_image–large {  
max-height: 90px !important;  
}

Or increase value in the code

[Next page](https://colorlibsupport.com/t/resizing-the-slideshow-on-the-fashe-theme-for-mobile-screens/24755.md?page=2)