Page width from mobile - Theme Spotlight

Store Design
,

Topic summary

A user encountered an issue where adjusting the page width in Theme Settings only affected desktop view, not mobile. On mobile, header icons (hamburger menu and cart) weren’t properly aligned with the page edges.

Solution provided:
BSSCommerce-TC guided the user through custom CSS modifications in the theme’s base.css file. The final working code targets mobile screens (max-width: 750px) and adjusts padding:

  • .header padding set to 10rem 1.5rem !important
  • .header__icons padding set to 0

This specifically repositioned the cart icon closer to the edge while maintaining proper spacing. The user initially noticed the cart icon was slightly further from the edge compared to reference sites, but after applying the suggested CSS, confirmed the solution worked.

Status: Resolved. The user thanked the helper and was asked to mark the solution for future reference by other merchants.

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

When changing Page width in Theme Settings the position of icons changes only for browser, how to change the position on phone? Now it’s like on 2 photos I need to make it like on 1 photo :heart:

1:

photo_2024-07-07_14-12-52.jpg
photo_2024-07-07_14-12-52.jpg750×276 3.88 KB

2:

photo_2024-07-07_14-12-53.jpg
photo_2024-07-07_14-12-53.jpg750×213 3.64 KB

2

Hi @heartlessoff ,

You can follow these step

Step 1: Navigate to Online Store > Themes > Edit code and find base.css file

Step 2: Insert below code at the end file and Save them

@media screen and (max-width: 750px) {
    .header {
       padding: 10px 1rem 10px 1rem;
    }
}
1 Like
3

Hi @BSSCommerce for some reason nothing changes

4

@heartlessoff

Could you share with me the URL page?

5

Hi @heartlessoff ,

@media screen and (max-width: 750px) {
    .header {
       padding: 10px 1rem!important;
    }
}

Let try again

1 Like
6

I didn’t notice right away, the indentation is a little smaller on the cart side, how do I fix that?

Screenshot_20.png
Screenshot_20.png771×156 7.56 KB

7

Hi @heartlessoff ,

I checked my site is correctly.

BSSCommerceTC_0-1720366896092.png

So, Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution.

1 Like
8

I have the same as you, overall it looks fine just if you look closely the basket is a little further away from the edge. Thought it could be moved a little to the right.

heartlessoff_0-1720367677059.png
heartlessoff_0-1720367677059.png424×123 4.94 KB

9

Hi @heartlessoff ,

So , let try this one. I think it can help you.

@media screen and (max-width: 750px) {
    .header {
       padding: 10px 1rem!important;
    }

   .header__icons {
    padding: 0;
   }
}
1 Like
10

padding 0 comes very close, I compare with this site sangvinik.com and they have the cart for some reason closer to the edges although the hamburger menu is farther away than mine

photo_2024-07-07_19-16-23.jpg
photo_2024-07-07_19-16-23.jpg750×120 2.2 KB

photo_2024-07-07_19-16-24.jpg
photo_2024-07-07_19-16-24.jpg750×138 8.4 KB

11

Hi @heartlessoff ,

You can use this code. It will only affect the position of the card icon

@media screen and (max-width: 750px) {
    .header {
       padding: 10px 1.5rem!important;
    }

   .header__icons {
       padding: 0;
   }
}

Then double check and let us know it’s works ? We’ll happy to hear that

1 Like
12

It works, thank you very much!

13

Hi @heartlessoff ,

Your’e welcome !! If you don’t mind, could you please give me a like and mark additional solutions because it will be useful for other merchants. Thank you :heart_eyes:

1 Like