Page content overlaps slideshow [venture theme]

[OLIVERD]

Hi guys,

Please help me with this issue... I use the Venture Theme and I want my slideshow to be 'small size' so it is full width, but then the next page content which is right underneath the slideshow overlaps the slideshow. (this is not the case on mobile phones)

Please see my attached screenshot. I want the [1/3-+-<->-learn more] to be higher so you can see it and click on the button...

How can I change this? It has something to do with the code, but I cannot figure out with which. 

See it yourself -> www.derrins.com

Thanks in advance! 

[Katy · Accepted solution]

Hey @OLIVERD!

Katy here from Shopify. I hope all is well with you and thank you for chatting in!

I do see what you mean here:

In this case you could apply styling in order to move these buttons up on larger screens.

If you could go to your: Admin> Online store > Themes > Actions> Edit code> Assets > theme.scss.liquid

At the bottom of this file, if you could paste the following Media Query:

@media only screen and (min-width: 750px) {
.hero-content {
bottom: 80px;
   }
}

This should then allow these to be visible on tablets / larger screens. I recommend that you first test this out on a duplicate version of your theme, just in case. 

Do let me know how this goes, or if you have any questions.

Cheers,
Katy

[OLIVERD]

Amazing!!! All solved, I adjusted the pixel to 50px and it looks fantastic now! Thank you so much!! 

[Katy]

Ah that's brilliant @OLIVERD. Glad to hear it, and you're very welcome. 🙂

[eSportz]

Hello, I am having issues with slideshow in Venture theme. The two slideshows I have looks like they are cut-off because I have chosen image position as Top Left. But the problem is I don't see any option within the 'image position' drop-down that could list full image. Please advise. My web is https://esportz.ca/. However, in the mobile view there seems to be no issue as it displays full image for 2 slides I have. 

[Katy]

Hey, @eSportz !

Thanks so much for reaching out here.

Although this does relate to the Venture theme and it's slideshow, your query is slightly different.

Venture is one of our free themes which uses hero or full-width images where the image is applied as background image to fill the screen. We have some info  on this here in our video guide which goes through this in lots more detail. While this may currently sit for you on mobile (and smaller devices) - just as wide images become cropped on mobile, using tall images will then result in it cropping the top and bottom of the image on wider screens/devices. In the case of your theme, while it may have a focal point, you would not be able to show the image in its entirety across all devices. Our guide helps to offer best practices which you can follow with themes that use full-width sideshow images. 

Great work so far on getting your store up and running. Perhaps what may help here, would be to apply one image per slide only. Usually this offers the best effect, and clearest way to showcase your products. We have some great insights in our blog article here and also in this one here. Each talk about the benefits of having a simplified slideshow, which aims to focus the users attention. It can be helpful to guide the user to focus on one particular area of each slide, with a call to action button for example, rather than prompting them to look in multiple directions.

I hope this helps to clear things up for you, though if you have any questions at all feel free to let me know.

Cheers,

Katy