Decreasing Header height in mobile view only

Store Design

Topic summary

A user’s mobile header is overlapping the image beneath it and needs to be resized for mobile view only.

Solution Provided:

  • Navigate to Shopify Admin → Online Store → Themes → Actions → Edit Code
  • Open the base.css file under Assets
  • Add CSS media query targeting screens up to 767px width
  • Apply font-size: 30px to the .banner__heading class

Status: The solution was successfully implemented and resolved the issue. The thread appears closed with the original poster confirming it worked.

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

Hey, i need help, my header section in mobile view is covering the image behind, can i change size of it only in mobile view&
https://f35b35-f9.myshopify.com/ this is my store url, thanks

Drews1k_0-1718350022626.png
Drews1k_0-1718350022626.png493×146 38.9 KB

1 Like
2

Hi @Drews1k

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
@media (max-width:767px){
.banner__heading {
font-size: 30px;
}
}

ZestardTech_0-1718362732491.png
ZestardTech_0-1718362732491.png585×726 216 KB

1 Like
3

Hi @Drews1k

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance.
If helpful then please Like and Accept Solution.

1 Like