Homescreen is distorted on smaller laptop screens

Ask & Offer

Topic summary

A Shopify store owner is experiencing header layout issues on smaller laptop screens, where the navigation menu wraps to two lines and elements overlap.

Store URL: infraredhe atingsupplies.com/

Proposed Solutions:

  • Multiple CSS code snippets were provided to adjust navigation padding, font sizes, and spacing using media queries
  • Initial code (min-width: 1024px) affected desktop displays negatively
  • Code was refined to target specific screen ranges (1024px-1440px, then 1024px-1536px)
  • One user suggested reviewing a previous thread about header overlapping issues
  • Another offered to provide a custom solution via direct message using a collaboration code

Current Status:

  • The issue persists despite applying the suggested CSS fixes
  • Screenshots show the header still displays incorrectly with overlapping elements
  • The most recent solution attempts to target screens between 1024px and 1536px width
  • Discussion remains ongoing with no confirmed resolution yet
Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
1

hi - my homescreen is all over the place on smaller laptoip screens, the menu is over 2 lines, the header is overlapping. please can someone help

1 Like
2

Hey @ihs1

Share your Store URL and Password if enabled.

Best,
Moeed

1 Like
3
4

Hi @ihs1,

Please go to Customize > Theme settings > Custom CSS and add code:

@media screen and (min-width: 1024px) {
.site-navigation {
    padding-right: 10px;
    padding-left: 10px;
}
.site-header-main-content {
        margin-right: 15px;
}
.site-navigation .navmenu-link-depth-1, .site-navigation .site-header-account-link a {
    --font-size-menu: 12px;
    padding: 12px 7px;
}
}
5

hi - thank you for this, but when i did this then even the screen on my desktop went smaller font etc

6

Hey @ihs1,
Could you please share the 4 digits collab code in the p/m so that I can take a look and provide you with the solution code.
Thanks

7

Hi @ihs1,

It’s keeping everything on one line, what are you trying to change?

10

Hi @ihs1,

So, how do you want it to display? Please describe the requirement, I will check and guide it

11

Hello there pal. To fix the overlapping header issue go through this previous thread here and apply the steps and codes in the replies Issue with header on homepage - text overlapping especially on mobile

12

Hi @ihs1,

Please change code:

@media screen and (min-width: 1024px) and (max-width: 1440px){
.site-navigation {
    padding-right: 10px;
    padding-left: 10px;
}
.site-header-main-content {
        margin-right: 15px;
}
.site-navigation .navmenu-link-depth-1, .site-navigation .site-header-account-link a {
    --font-size-menu: 12px;
    padding: 12px 7px;
}
}
13

Hi - did you get any luck with this?

14

HI
thank you for this but it still looks like this:

image
image1246×326 75 KB

Screenshot 2025-07-31 013335
Screenshot 2025-07-31 0133351246×326 107 KB

15

Hi @ihs1,

Please change code:

@media screen and (min-width: 1024px) and (max-width: 1536px){
.site-navigation {
    padding-right: 10px;
    padding-left: 10px;
}
.site-header-main-content {
        margin-right: 15px;
}
.site-navigation .navmenu-link-depth-1, .site-navigation .site-header-account-link a {
    --font-size-menu: 12px;
    padding: 12px 7px;
}
}