Moving Text Lower on Desktop but Not on Mobile - Showcase Theme

Store Design
1

Hi Everyone,

I wanted to see if anyone could help with an issue I’m having. In my theme (showcase), my headline text that is over the hero image (first picture under the logo) is set to “Middle Center”. On this setting I like how it looks on mobile but on desktop the text gets lost in the clouds on the picture. If I adjust the setting in the theme to “Bottom Center” it will look good on desktop but too low on mobile.

I’m wondering if it is possible to drop in some code to have it appear “Bottom Center” on desktop but “Middle Center” on mobile. Any help is appreciated. Some screenshots illustrating the issue attached.

Site: bessocoffee.myshopify.com/

Password for shop: cr7

2

@RockGomes

Please add the following code at the bottom of your assets/styles.css file.

@media (min-width: 768px){
body:not(.nav-opaque) #page-content .shopify-section:first-child .header-overlap-section .image-overlay .overlay__content, body:not(.nav-opaque) #page-content .shopify-section:first-child.header-overlap-section .image-overlay .overlay__content {
    padding-top: 160px !important;
}
}

Hope this works.

Thanks!

3

@RockGomes

sorry for that issue can you please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/styles.css ->paste below code at the bottom of the file.
    this code apply for after 5 - 6 second
@media (min-width: 768px) {
.overlay .inner>* {vertical-align: bottom;}
}
4

Hi @dmwwebartisan thanks for the code. It worked nicely but I noticed it impacted the first “media with text overlay” section in the Subscriber Experience page as well. My brother and I tried a variation of what you provided and that seemed to control the impact to only the homepage “Buenos Dias” section.

@media (min-width: 768px){
body:not(.nav-opaque) #page-content .shopify-section:first-child.header-overlap-section .image-overlay .overlay__content {
    padding-top: 160px !important;
}
}

Do you think this is the best way to go or should it be something else? If it helps I’ve noticed the theme calls that section “Slideshow”. Thanks again for your help on this!

Screen Shot 2021-08-27 at 3.40.39 PM.png
Screen Shot 2021-08-27 at 3.40.39 PM.png2297×1106 413 KB

5

Thanks @KetanKumar but that actually impacted all the long sections of the site and moved the text to the bottom. That wasn’t what I was trying to do. Nonetheless, thanks for the suggestion.

6

@RockGomes

let me know where do you need change this?

7

Hi @dmwwebartisan when you have a moment can you check out my reply? Curious to know your thoughts on the slight change to the code you proposed.