Create space between header & section - Mobile Origin

Store Design
, ,

Topic summary

A user needed to add spacing between the header and content on mobile devices but encountered a save error in the editor.

Initial Approach:

  • Attempted CSS targeting .banner__content--bottom-right with margin-top: 80px inside a media query for screens up to 749px wide
  • Code worked in the editor but failed to save

Solution Provided:

  • Another user identified a syntax error: double opening curly brackets in the CSS
  • Corrected code was shared with proper bracket structure

Outcome:

  • The fix resolved the issue and worked perfectly
  • The discussion is now resolved
Summarized with AI on November 18. AI used: claude-sonnet-4-5-20250929.
1

Hi there,

I would like to add some space between the header and the content on the first image on mobile.

I tried adding below code, which worked in the editor, but I am not able to save it in the editor (it gives an error).

Is there a way to edit the code and add it to theme file?

blog page

password: skoffi

@media screen and (max-width: 749px) {
.banner__content--bottom-right {
    margin-top: 80px !important;
{
   
}

Screenshot 2023-07-28 at 22.30.57.png
Screenshot 2023-07-28 at 22.30.57.png872×1104 242 KB

thanks so much!

1 Like
2

Hi @INFRA ,

You have a double open curly bracket:

@media only screen and (max-width: 749px){
.banner__content.banner__content--bottom-right.page-width.scroll-trigger.animate--slide-in {
    margin-top: 80px;
}
}

i hope it help.

1 Like
3

thank you, this worked perfectly!

1 Like