How can I reduce padding around mobile header icons?

Store Design

Topic summary

A user is experiencing excessive padding around header icon links on mobile devices, causing layout issues where elements don’t fit on a single line.

Problem Details:

  • Issue occurs only on mobile view
  • Icons have too much spacing between them
  • Goal is to align all header elements on one line with minimal padding
  • Additional concern: clicking on games causes layout problems on some devices past the landing page

Proposed Solutions:
Two community members provided CSS code snippets:

  1. First attempt: Targeted .footer-block--newsletter with reduced padding (10px) for screens under 600px width

    • User confirmed this did not resolve the mobile header issue

  2. Second solution: More comprehensive CSS targeting:

    • .list-social with flexbox properties (display: flex, no wrapping, right-aligned)
    • Header element with negative margins (top: -84px, bottom: -43px, left: 10px)
    • Newsletter block spacing adjustments

Both solutions require adding code to the base.css file in the theme assets. The discussion remains open as the user is seeking additional guidance after the first solution failed.

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

Hello,

There seems to be a lot of padding around the icon links in my header on mobile only. If i can get everything on one line with little padding then that would be ideal.

website url

www.thegamingbooster.com

password: lutwum

picture reference below. This happens on some devices past the landing page, so if you click on a game then it looks big

@KetanKumar

BIG HEADER TGB.png
BIG HEADER TGB.png591×1280 1.9 MB

thankyou in advance

2 
@media only screen and (max-width: 600px) {

.footer-block--newsletter {
    margin-top: 0;
}
.list-social__link {
    padding: 10px;
}
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid

3

Hello, thankyou for your help.

this did not make any changes to the mobile header.

Please let me know what information you need to help further.

thanks so much

aren

4

@ArenC

.list-social {
    display: flex !important;
    flex-wrap: unset !important;
    justify-content: flex-end !important;
}
header.header.header--middle-left.header--mobile-left.page-width.header--has-menu {

    justify-content: space-evenly !important;
}
.footer-block--newsletter {
    margin-left: 10px !important;
    margin-bottom: -43px !important;
    margin-top: -84px !important;
    
}

Put above css code into base.css file(online store->themes->base.css)