Landing page hero image "shop now" button - Dawn Theme

Shopify Discussion
1

I’m using the basic Dawn theme and we currently have an image on our landing page where the verbiage was overlaid on the background image using a header block.

The problem is that on the mobile view, the verbiage runs into the photo and doesn’t read well (see below). There is nothing in the set up that will allow me to start a 2nd line of text to prevent this.

It was recommended that we put the verbiage in the image and then upload it, so I did (not yet public), but the problem is that the black “shop now” button is overlapping the verbiage in the mobile view, but is totally fine in the desktop view (see both below).

Website:

www.theblacksheepfam.com

Current Mobile View (Live) - wording running into image (set up as header block)

Screenshot_20231017_144338_Chrome.jpg
Screenshot_20231017_144338_Chrome.jpg1080×959 110 KB

Mobile View (preview only, not live) - verbiage embedded in image, button overlapping.

mobile_preview.png
mobile_preview.png385×303 76.7 KB

Desktop View (preview, not live) - perfect

Screenshot_20231017_144308_Slack.jpg
Screenshot_20231017_144308_Slack.jpg867×345 48.1 KB

Can someone please advise CSS code to move that button down further on the mobile view only? Also, is it possible to make that button size a little smaller in mobile only?

The CSS code that currently exists on our live page is here:

h2.banner__heading {
color: #121212;
}
.banner–desktop-transparent .banner__box {
max-width: 38rem;
}
.banner__buttons a.button–primary {
background-color: #121212;
color: #ffffff;
}
@media screen and (min-width: 750px) {
#Banner-template–19303453098259__image_banner::before,
#Banner-template–19303453098259__image_banner .banner__media::before {
padding-bottom: 40%;
}
.banner–desktop-transparent .banner__box {
max-width: 65rem;
}
h2.banner__heading {
font-size: 96px;
}
}

2

Hello, while what you are trying to do can be done using CSS code to adjust the elements. It may be easier to show two different sections: one for desktop, one for mobile.

You can use the code below to hide a section on mobile, you just need to replace the section id with the one you’d like to hide. This can also be adjusted and used for desktop as well:

 

@media screen and (max-width:749px){
#shopify-section-template--14201274990728__ed564e79-f18f-4564-b421-0ab4e6fc975c {display:none; visibility:hidden;}
}

Hope this will be helpful!
@biznazz101

3

Thanks for the response. I’m not trying to hide anything though. I just need to move the button down on mobile view only. I’m in the basic Dawn them, so I don’t have separate customization for mobile & desktop, it’s all in one spot. I do have a custom CSS section though and the code I pasted in my original message is what is currently there.

Is there CSS code that would move that button down just on mobile?