Move the button and hide heading in mobile view

Store Design
,

Topic summary

A user seeks to reposition a button to the center and hide a heading on their Shopify store’s mobile view.

Solutions Provided:

Multiple developers offered CSS code snippets to address both issues:

  • Hide the heading: Add CSS targeting the banner heading element with display: none and visibility: hidden within a mobile media query (max-width: 749px or 768px).

  • Center the button: Apply text-align: center and margin-left: 0 to the banner buttons container.

Implementation Steps:

  1. Navigate to Online Store → Themes → Edit Code
  2. Locate the base.css file
  3. Paste the provided CSS at the bottom of the file
  4. Save changes

All responses include similar CSS approaches with minor variations in selectors and properties. One respondent included a screenshot demonstrating the expected result. The discussion remains open with no confirmation from the original poster about which solution worked.

Summarized with AI on November 19. AI used: claude-sonnet-4-5-20250929.
1

Hello,

The image below is of my store in the mobile view. I want to move the button up so that it’s placed in the middle. Also want to hide the heading in the mobile view.

Store link: https://0bc922.myshopify.com/

randomchikibum_0-1687393477355.png
randomchikibum_0-1687393477355.png563×271 111 KB

1 Like
2

@randomchikibum - to hide the heading on mobile, add this css to the very end of your base.css file and check

@media screen and (max-width:749px){
#shopify-section-template--19406554300738__9780f8d3-7570-43d0-a54d-029ceabb5f54{display: none;    visibility: hidden;}
}
3

Hello @randomchikibum

Step 1: Go to Online Store → Theme → Edit code.
Step 2: Search file base.css
Step 3: Paste the below code at bottom of the file → Save

@media screen and (max-width: 749px) {
#Banner-template--19406554300738__9780f8d3-7570-43d0-a54d-029ceabb5f54 {
    min-height: 175px;
}

#Banner-template--19406554300738__9780f8d3-7570-43d0-a54d-029ceabb5f54 .banner__box {
    text-align: center;
    padding-right: 35px;
}

#Banner-template--19406554300738__9780f8d3-7570-43d0-a54d-029ceabb5f54 .banner__box  .banner__buttons {
    margin-left: 0;
}
}
4

Hi @randomchikibum

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the base.css file:

@media screen and (max-width: 749px) {

.banner__heading {display: none;}

.banner__box .banner__buttons {margin-left: 0 !important;}

.banner–content-align-mobile-right .banner__box {text-align: center !important;}

}

Regards,

San

5

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
@media (max-width: 768px){
.banner__heading.inline-richtext.h1 {
display: none;
}
.banner__box>*+.banner__buttons {
text-align: center;
margin: 0;
display: block!important;
}
.banner__box.content-container.content-container--full-width-mobile.color-accent-1.gradient {
padding: 0;
}
}

ZestardTech_0-1687413725563.png
ZestardTech_0-1687413725563.png695×824 119 KB