Mobile header on a Shopify store shows very small text and the header section height isn’t adjusting to the intended 70% on small screens. The header is supposed to be transparent but appears opaque, possibly due to a stretched image.
A reviewer requested the store URL; the merchant provided it. The reviewer advised that fixing fonts and layout requires custom code changes rather than simple hardcoded tweaks, suggesting professional help.
The theme developer reportedly resolved the initial issue, but a new problem emerged: the header now appears grey instead of transparent on mobile.
Key terms: “hardcoding” = making direct, fixed changes in CSS/HTML that may not cover all cases; “custom code” = modifying theme code for comprehensive, responsive behavior.
Attachment: an image showing the grey header is relevant to diagnosing the transparency issue.
Status: partially resolved (font/height addressed). Open issue: restore true transparency for the mobile header. Next step requested: guidance on adjusting code to make the header transparent.
I am trying to edit the mobile version as the text is really small and the header section is not adjusting to 70%, see attached. The header is also meant to be transparent which it isn’t but I wonder if it’s because the image is being stretched?
If anyone knows how to adjust, please let me know!
Hi @GWDesign234 , can you share the store URL, so that I can look at the issue?
@GWDesign234 , It appears that the font issue you’re encountering on your website will require code fixes rather than just hardcoding changes. Additionally, access to custom code within your store will be necessary to implement these fixes effectively. Simply hardcoding changes may not address all the issues you’re facing, so a more comprehensive approach through custom code modification is recommended. You can hire professionals for the fixes.
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
