Text/Button placement needs to be different in mobile than in desktop view (Slideshow)

Store Design

Topic summary

Issue: In the Shopify Venue theme, the slideshow’s text/button position can only be set globally. The goal is “Left” on desktop and “Bottom left” on mobile to avoid covering the image.

Solution provided: Add Custom CSS in Theme settings with a desktop-only media query (@media screen and (min-width: 768px)) targeting .home-carousel__content.home-carousel__content–btn and applying transform: translateY(-50%) to adjust desktop placement. An alternative selector was suggested.

Outcome: The desktop positioning change works, confirmed by the requester.

Next step requested: Nudge the text/button block further to the right on desktop to increase spacing from the edge. No response yet; thread remains open.

Notes:

  • Code snippet is central to the fix; screenshots illustrate the backend control and the visual result.
  • Media query: a CSS rule that applies styles based on viewport width (e.g., desktop vs mobile).
  • Venue: a Shopify theme; changes were made via Online store > Customize > Theme settings > Custom CSS.
Summarized with AI on December 15. AI used: gpt-5.
1

Hi there,

I just have a short question:

Using the Venue theme I´m not able to choose a different position for my text/button block on the first slider on my shop: https://shop.kevinkrautgartner.com/
Unfortunately I can only set the position globally in the backend (see screenshot attached). The thing is I want to place the text/button “left” on desktop and “Bottom left” on mobile as it otherwise sits exactly above the image.

In general it would be nice to move the text/button block a bit more to the right - but this not so important.

Thanks so much for your help in advance (it´s my first post here)

Kevin

Bildschirmfoto 2024-11-08 um 09.31.21.png
Bildschirmfoto 2024-11-08 um 09.31.21.png630×1866 98.3 KB

2

Hi @Kevin1188

You can follow the steps here to make the button to be positioned “Left” on Desktop instead of Bottom Left:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/ypQ7nly2wv27
Step 3: Copy the code below and paste it there

Here is the code for step 3:

@media screen and (min-width: 768px){
.home-carousel__content.home-carousel__content--btn {
    transform: translateY(-50%) !important;
}
}

Here is the result:

DaisyVo_0-1731056215001.png
DaisyVo_0-1731056215001.png1340×748 158 KB

Let me know if it works! Thank you!

Best,

Daisy

3

Hello @Kevin1188 , Try this

@media screen and (min-width: 768px){
.home-carousel__item-wrapper .home-carousel__content.home-carousel__content--btn {
    transform: translateY(-50%) !important;
}
}
4

Wow - thanks a lot! That works juts great! Thanks again for the really quick help - didn´t expect that :slightly_smiling_face:
Just one last question: May you know if it also possible to put the text/button block a little bit more to the right? Just that it only is not so close to the edge. (Desktop only)

Thanks again :slightly_smiling_face:

5

Wow - thanks a lot! That works juts great! Thanks again for the really quick help - didn´t expect that :slightly_smiling_face:
Just one last question: May you know if it also possible to put the text/button block a little bit more to the right? Just that it only is not so close to the edge. (Desktop only)

Thanks again :slightly_smiling_face: