Page width from mobile - Theme Spotlight

[heartlessoff]

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 ❤️

1:

2:

[BSSCommerce-TC · Accepted solution]

Hi @heartlessoff ,

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

Let try again

[BSSCommerce-TC]

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

[heartlessoff]

Hi @BSSCommerce for some reason nothing changes

[BSSCommerce-TC · Accepted solution]

Hi @heartlessoff ,

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

Let try again

[heartlessoff]

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

[BSSCommerce-TC]

Hi @heartlessoff ,

I checked my site is correctly.

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

[heartlessoff]

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.

[BSSCommerce-TC]

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

[heartlessoff]

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

[BSSCommerce-TC · Accepted solution]

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

[heartlessoff]

It works, thank you very much!

[BSSCommerce-TC]

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 😍

[PageFly-Amelia]

@heartlessoff 

Could you share with me the URL page?