Move Button only on Phone view to a certain spot

Store Design
, ,

Topic summary

A user is trying to reposition a button labeled “sunnies” to center-right between images on mobile view only, while keeping its desktop placement unchanged. They provided screenshots showing the desired location marked with a black rectangle.

Proposed Solutions:
Multiple respondents offered CSS-based fixes with slight variations:

  • Common approach: Add media query targeting mobile screens (max-width: 749px or 767px) to modify .banner__content and .banner__buttons properties
  • Key CSS properties suggested: align-items: flex-end, padding-top adjustments (30px or 14rem), and !important flags
  • Implementation location: Most recommend adding code to base.css or theme.liquid file via the Shopify theme editor

Status:
The discussion remains open with no confirmed resolution. Seven different users provided similar but not identical CSS solutions, all targeting mobile-specific styling through media queries. The original poster has not indicated which solution worked or if the issue was resolved.

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

Hi, How are we

I’m struggling bringing the Button “sunnies” on the center right in between images where I placed the black rectangle only on phone view. On computer it’s well placed already.

Thanks for your time and help

Url: https://www.lasdunasbyron.com/

Screen Shot 2023-10-05 at 5.30.22 pm.png
Screen Shot 2023-10-05 at 5.30.22 pm.png2880×1800 552 KB

2

Hi @BERNAT-LASDUNAS

You can do that by adding this CSS code to Custom CSS of that section

@media screen (max-width: 749px) {
.banner__content { align-items: flex-end !important; }
.banner__buttons { top: 30px !important; }
}

Screenshot 2023-10-05 at 13.47.27.png
Screenshot 2023-10-05 at 13.47.27.png412×515 305 KB

3

Hi @BERNAT-LASDUNAS

You can follow the following steps:

  1. Please go to the Online Store
  2. Then Edit Code
  3. Please find the theme.liquid file
  4. And add the following code in theme.liquid file above the tag

laddisahsi_0-1696488823621.png
laddisahsi_0-1696488823621.png417×515 283 KB

If this solution is worked, then please Like this and Mark this as accepted solution!

Laddi

4

Hi @BERNAT-LASDUNAS

Follow these Steps:
Go to Online Store Edit Code Find theme.liquid file or base.css
Add the following code in the bottom of the file above tag

@media screen (max-width: 749px) {
.banner__box.content-container.content-container--full-width-mobile.color-background-1.gradient {
    padding-top: 67%;
}
}

topnewyork_0-1696489130768.png
topnewyork_0-1696489130768.png357×316 117 KB

5

Hello @BERNAT-LASDUNAS

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

#shopify-section-template--18894434730306__bde2c142-d58b-4297-8f39-a8e9bcc4acdd .banner__buttons {
    top: 14rem !important;
}
6

Hi, @BERNAT-LASDUNAS .

Follow These Steps.

Goto Online store > Assets > Edit code > find Base.css File and paste the code mentioned below.

@media (min-width:320px) and (max-width:767px) {

.banner__content {
    align-items: flex-end;
}
.banner__buttons {
    top: 30px;
}

}

Result:

websensepro_0-1696490972082.png
websensepro_0-1696490972082.png336×418 205 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Websensepro

7

@BERNAT-LASDUNAS

add this code to your base.css file.

Navigate to the online store >> Click edit theme code.

Now find base.css and paste the following code:

@media(max-width:980px){
.banner__content.banner__content--bottom-center{
    align-items: flex-start;
}
}