Mobile header getting cut off-Flow Active theme

Topic summary

Main issue: On the Flow Active Shopify theme, mobile homepage banners appear cut off at the top on hvfoods.com, despite being sized correctly.

What was tried:

  • A suggested CSS fix: add a media query that applies margin-top: 140px to .flow-homepage for screens under 767px (intended to create space so the header doesn’t overlap).
  • First location: main.css (not found by the store owner).
  • Alternative location: insert the same CSS into theme.liquid inside the tag (a screenshot was provided to show where).

Outcome:

  • The CSS appeared as visible text at the top of the homepage, indicating the change didn’t apply as intended and the visual issue persisted.

Context/terms:

  • theme.liquid: the main theme layout file where global assets (like CSS) can be referenced.
  • CSS media query: style rules applied only on specific screen sizes (e.g., mobile).

Status: Unresolved. The original fix did not work, and further suggestions or theme-specific guidance are requested.

Summarized with AI on January 3. AI used: gpt-5.

Hi,

I am using the Flow active theme and my mobile banners keep getting cut off on my home page, hvfoods.com. They are sized correctly but the top continues to get cut off. Does anyone have a quick fix for this?

Thank you!

Hi @jdecedue

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file main.css

Step 3: Paste the below code at bottom of the file → Save

@media (max-width: 767px){

.flow-homepage {

margin-top: 140px !important;

}}

Hope that my solution works for you.

Best regards,

Henry | PageFly

Hi Henry and thanks for responding! I do not have a file named main.css. Could it be named something else?

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: paste bellow code in tag → save.

@media (max-width: 767px){

.flow-homepage {

margin-top: 140px !important;

}}

That didn’t work, the code was showing up at the top of my home page, any other suggestions are very much appreciated and thank you!