Solved

Make Homepage Slide Image bigger (desktop) as the other slides

shelbyra
Excursionist
15 1 3

Here's the down and dirty. I paid a designer from Fiverr to make my site gorgeous and he didn't do his job. I am now attempting to do it myself. The latest hurdle I need to get over is the size of the slide images. He created a few on my homepage. I like them. I'm releasing a new collection and want to add a new slide with the same dimensions. I have uploaded my image with the same px numbers, but it is smaller in height (top to bottom) than the others. I think it is worth mentioning that he purchased a 3rd party theme and that puts me at a rock and a hard place. He won't do it, and Shopify cannot help me as they cannot access the back end. I am going to run into this issue repeatedly as I release and add new collections as I really like the slide size and want to continue to use it. Maybe it is a code that I can keep saved somewhere? Someone please help! This is the last thing I need to learn/fix before I launch my store. I've attached screen shots. This is my shop https://www.ratheboutique.com/

 

Thank you so much in advance

shelbyra_1-1709647925709.png

 

shelbyra_0-1709647900255.png

 

 

The picture of the Memories of Tulum Collection is the slide size I want

The picture of the Festival Edit is the slide that is too small in height and I cannot figure out how to make taller? higher?

Accepted Solution (1)
shelbyra
Excursionist
15 1 3

This is an accepted solution.

OMG you are a saint! I added the code like you said, and boom, the slide looks so great! When I add another collection will I have to re paste the code in again?

 

I very much appreciate you taking the time to help me. In my opinion its the difference between a wicked homepage and a good one. There was no way I was ever going to figure that out on my own. I hope you have the best day!

View solution in original post

Replies 4 (4)

ThePrimeWeb
Shopify Partner
1771 498 365

Hey @shelbyra,

 

Funnily enough, I've met someone else who had the exact same theme code structure as yours and that person also mentioned they got it from Fiverr. It was a different problem I looked into, but the code structure is so similar. 

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

 

<style>
@media only screen and (min-width: 990px) {
    .Slideshow__Carousel.Carousel.Carousel--fadeIn.Carousel--fixed.Carousel--insideDots.flickity-enabled {
        height: 95vh !important;
        min-height: unset !important;
        max-height: none !important;
    }
    
    .Slideshow.Slideshow--fullscreen {
        height: max-content !important;
    }
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1709649049749.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
shelbyra
Excursionist
15 1 3

This is an accepted solution.

OMG you are a saint! I added the code like you said, and boom, the slide looks so great! When I add another collection will I have to re paste the code in again?

 

I very much appreciate you taking the time to help me. In my opinion its the difference between a wicked homepage and a good one. There was no way I was ever going to figure that out on my own. I hope you have the best day!

ThePrimeWeb
Shopify Partner
1771 498 365

Hey @shelbyra,

 

I can't tell for sure, but if they have the same settings, it should work globally.

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
shelbyra
Excursionist
15 1 3

RIGHT ONNNNNN