How can I adjust homepage text position on mobile view?

Store Design

Topic summary

Goal: move the homepage text slightly lower on mobile for the North theme; a screenshot was provided and the site URL shared.

Proposed solution:

  • Add a CSS media query to the theme’s assets > app.css file via Online Store > Theme > Edit code.
  • Code: @media (min-width: 280px) and (max-width: 767px) { .columns.small-12.large-8.medium-10 { margin-top: 130px; } }

Explanation:

  • A CSS media query applies styles only within specified viewport widths (here, typical mobile sizes).
  • Increasing margin-top adds space above the targeted element, pushing the text downward on mobile screens.

Status/outcome:

  • A concrete fix was suggested with steps and exact CSS.
  • No confirmation from the original poster yet; resolution remains open.

Notes:

  • An image (screenshot) was attached but the CSS change is central to understanding the proposed adjustment.
Summarized with AI on February 7. AI used: gpt-5.
1

Hey!

Hoping someone might be able to help.

I am trying to move the text on the homepage down slightly (Mobile Only) and hoped someone could help (Screenshot attached)

Site url: www.notacard.com

Theme: North Theme

site-header-cart { display none !important; } (1).jpg
site-header-cart { display none !important; } (1).jpg3240×5760 356 KB

Any help would be very much appreciated!

Thanks in advance,

James

2

@mrjaengland

This is PageFly - Advanced Page Builder. I would love to give you some recommendations

Add this css at the bottom

Online Store->Theme->Edit code

assets-> app.css

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

.columns.small-12.large-8.medium-10 {

margin-top: 130px;

}

}

Hope you find my answer helpful!

Regards,

PageFly