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] 2: [photo_2024-07-07_14-12-53.jpg]

Hi @heartlessoff , @media screen and (max-width: 750px) { .header { padding: 10px 1rem!important; } } Let try again

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; } }

Hi @BSSCommerce for some reason nothing changes

@heartlessoff Could you share with me the URL page?

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

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.

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]

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; } }

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-24.jpg]

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 t…

Page width from mobile - Theme Spotlight

Store Design

heartlessoff July 7, 2024, 4:46pm 12

It works, thank you very much!

Topic		Replies	Views
How to adjust the header width on mobile devices? DAWN theme Store Design design , header , customizations , css	6	56	May 30, 2024
Mobile header icons and cart Store Design design , customizations , css , shopify-themes , shopify-theme	4	63	September 11, 2025
Move header icons slightly left (Dawn theme) Store Design design , header , css , shopify-themes , html	9	32	November 10, 2023
How to adjust padding for 'menu' and 'cart' icons? Store Design header , customizations , css	3	53	June 6, 2024
More space around icon for whatsapp on top of header Store Design css	7	48	February 7, 2023

Page width from mobile - Theme Spotlight

Related topics