HELP! Need text to be below the picture in the desktop version, the same as in the mobile version

Store Design

Topic summary

Main issue: On desktop, slideshow text overlays the image; requester wants the text to appear below the image as it does on mobile.

Proposed solution: A contributor suggested adding CSS in base.css for screens ≥750px to adjust the slideshow layout:

  • Set .slideshow__media.banner__media to height: 34rem and position: relative.
  • Set .slideshow__text-wrapper.banner__content.banner__content–bottom-right to height: auto and justify-content: center.
    (Shared via code snippet and screenshot; images are central to understanding the layout.)

Feedback/side effects: At least two users reported that applying this CSS caused the image to become “squished” and introduced excessive empty space/padding beneath the text. They asked for a fix to these new issues.

Outcome/status: No follow-up solution or adjustment addressing the image distortion and extra spacing was provided. The thread remains unresolved with open questions about achieving text-below-image on desktop without squashing images or adding unwanted space.

Summarized with AI on December 28. AI used: gpt-5.
1

LakeBaez_0-1692909004087.jpeg
LakeBaez_0-1692909004087.jpeg307Ă—400 18.1 KB

LakeBaez_1-1692909004000.jpeg
LakeBaez_1-1692909004000.jpeg305Ă—400 13.8 KB

you can see in the mobile slideshow the text is below the picture, while in the desktop it is right on top of the picture. I would like the text to be below the picture in the desktop version. What code will I need to resolve this, thank you! My store URL is: lakebaez.com

1 Like
2

Hello @LakeBaez

Its Artzen Technologies! We will be happy to help you today.

Go to the Online Store->Theme->Edit code->Assets->base.css>

@media screen and (min-width: 750px){
.slideshow__media.banner__media {
    height: 34rem;
    position: relative;
}
}
@media screen and (min-width: 750px){
.slideshow__text-wrapper.banner__content.banner__content--bottom-right {
    height: auto;
    justify-content: center;
}
}

after code look like this :–

Artzen_tech_0-1692949396882.png
Artzen_tech_0-1692949396882.png1135Ă—682 84.7 KB

Let me know if need further assistance
Regards,
Artzen Technologies

3

I followed this advice, but now my image is all squished and the wording underneath is padded by a lot of empty space. Is there a way to fix that?

4

Did they ever tell you how to fix the squished image and empty space? I had the same result that you did