How can I align buttons and text for mobile view in CSS?

Store Design
,

Topic summary

A user is struggling to properly align buttons, text, and images in mobile view on their Shopify store. The image appears overly zoomed in, and elements are misaligned.

Troubleshooting attempts:

  • Another user provided custom CSS code targeting .parallax-banner__wraper--has-background with background-size: cover for screens above 460px width
  • Multiple CSS snippets were suggested, including modifications to base.css and template-specific selectors
  • The original poster tried each solution but reported none resolved the alignment issues

Current status:

  • The problem remains unresolved after several CSS attempts
  • Images shared in the thread (screenshots and captures) appear to demonstrate the alignment issues
  • The helper offered to continue troubleshooting via direct message to solve the problem immediately

The discussion involves custom CSS modifications for Shopify sections, specifically addressing responsive design challenges in mobile viewport.

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

Hi all, I am having a hard time getting the buttons and texts to align for mobile view. Even the image is way to zoomed in.

Can someone please assist? I see that I can add custom CSS to sections in shopify now, would that be a good place to add the code?

You can view the page here

Thanks!

1 Like
2

@therookie

if you want it like this use this in custom css

Capture.PNG
Capture.PNG483×352 151 KB

@media (min-width: 460px)
.parallax-banner__wraper--has-background {
    background-size: cover;
}
3

Hmm not working

1 Like
4

use it in base.css in assets at bottom @therookie

5

I did that too but it messed up my site

6

Screenshot 2023-03-07 123338.png
Screenshot 2023-03-07 123338.png328×330 12.1 KB

7 
@media (min-width: 460px){
.parallax-banner__wraper--has-background {
    background-size: cover;
}
}

use this code as i foret braces @therookie

8

Still not working

9

Use this please

@therookie

@media (min-width: 460px)
{
#template--16688289382619__b95428ce-d0fc-45cd-b8a3-a09af704425a{
    background-size: cover;
}
}
10

Still nothing. The buttons arent aligning either.

11

if image got correct let me now please so i can adjust buttons code as well @therookie

12

nothing is correct

13

if you can DM we can solve right away @therookie