Solved

Increase Slideshow Height for Craft Theme

SunkissedBikini
New Member
7 0 0

Hello,

 

so I want to increase the slideshow height for my store. It is already full width I just need it extended a bit more. I found the code for the "large" section of the slide height, I added the "extra large" code but it does not have the translation for it. I do not code but I figured that the translation could be added but I do not know where. I inserted screenshots for reference. Website is SunkissedMaillot.com

 

Thank you.Screen Shot 2024-03-11 at 10.18.06 AM.pngScreen Shot 2024-03-11 at 10.18.16 AM.pngScreen Shot 2024-03-11 at 10.18.50 AM.png

Accepted Solutions (2)

BrainStation23
Shopify Partner
260 43 41

This is an accepted solution.

Hi @SunkissedBikini. Just remove the extra large option that you added.

What you can do is the following:

1. Go to your theme editor.

2. Click Slideshow

3. Click in the Custom Css and paste the following code there.

@media screen and (min-width: 750px) {
  slideshow-component .banner--large:not(.banner--adapt) {
    min-height: 85rem !important;
  }
}

 

You can view the following screenshot as a reference.

Capture.PNG

Let us know if this works for you or not, also if you've any queries.

Thanks a lot. Have a great day.

Brain Station 23 PLC
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email: js.team@brainstation-23.com

View solution in original post

BrainStation23
Shopify Partner
260 43 41

This is an accepted solution.

@SunkissedBikini. Just replace the entire previous code in the theme editor with the following:

slideshow-component .banner--large:not(.banner--adapt) {
    min-height: 85rem !important;
  }

You can view the following screenshot:

BrainStation23_0-1710308475244.png

 

Let us know if you need any help. Have a great day.

Brain Station 23 PLC
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email: js.team@brainstation-23.com

View solution in original post

Replies 5 (5)

BrainStation23
Shopify Partner
260 43 41

This is an accepted solution.

Hi @SunkissedBikini. Just remove the extra large option that you added.

What you can do is the following:

1. Go to your theme editor.

2. Click Slideshow

3. Click in the Custom Css and paste the following code there.

@media screen and (min-width: 750px) {
  slideshow-component .banner--large:not(.banner--adapt) {
    min-height: 85rem !important;
  }
}

 

You can view the following screenshot as a reference.

Capture.PNG

Let us know if this works for you or not, also if you've any queries.

Thanks a lot. Have a great day.

Brain Station 23 PLC
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email: js.team@brainstation-23.com
SunkissedBikini
New Member
7 0 0

Amazing, this worked. Thank you for the help!!!

SunkissedBikini
New Member
7 0 0

I do have one more question, are you able to send me the custom css for the mobile portion of it. The code does work for desktop and I would like it to also work for mobile. Can it be an addition to the existing code so both size heights are different.

 

Thanks.

BrainStation23
Shopify Partner
260 43 41

@SunkissedBikini. You're most welcome. Sure, we're checking for the mobile version. Will let you know

Brain Station 23 PLC
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email: js.team@brainstation-23.com
BrainStation23
Shopify Partner
260 43 41

This is an accepted solution.

@SunkissedBikini. Just replace the entire previous code in the theme editor with the following:

slideshow-component .banner--large:not(.banner--adapt) {
    min-height: 85rem !important;
  }

You can view the following screenshot:

BrainStation23_0-1710308475244.png

 

Let us know if you need any help. Have a great day.

Brain Station 23 PLC
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email: js.team@brainstation-23.com