How to hide the account icon on mobile view in Warehouse theme?

Store Design
, , , ,

Topic summary

A user seeks to hide the account icon on mobile view in the Warehouse theme for their Shopify store (appliancesclub.com).

Solutions Provided:

Two community members offered CSS-based solutions:

  • Solution 1: Navigate to Online Store → Theme → Edit code → theme.scss file, then add a media query targeting screens with max-width 640px to set the account header item display to none.

  • Solution 2: Go to Online Store → Theme → Edit code → Assets → theme.css, then insert CSS code at the bottom using a media query for mobile screens to hide the account icon link and adjust padding.

Both approaches use @media queries to apply display: none specifically to mobile viewports, ensuring the account icon remains visible on desktop while hidden on mobile devices.

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

Hi

Pls can u provide a solution to making the account icon not display on mobile view (attached example below)

my store:

URL: appliancesclub.com

Theme: Warehouse

wanted result:

Screenshot 2023-05-06 at 01.32.24.png
Screenshot 2023-05-06 at 01.32.24.png1254×1418 260 KB

Cheers

2

Hello @bennyhenders ,

Please follow below steps

Step 1: Go to Online Store → Theme → Edit code.

Step 2: Search file theme.scss

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

@media screen and (max-width: 640px){
    .header__action-item.header__action-item--account{display: none;}
}
3

Hello @bennyhenders
You can try this code: it will be helpful to you
Go to the Online Store->Theme->Edit code->Assets->theme.css>Add this code at the bottom.

@media only screen and (max-width: 640px) {
a.header__action-item-link.header__account-icon.icon-state.hidden-desk {
    display: none;
}
.header__action-item {
    padding: 0 4px;
}
}