Shopify themes, liquid, logos, and UX
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:
Solved! Go to the solution
This is an accepted solution.
Hi @heartlessoff ,
@media screen and (max-width: 750px) {
.header {
padding: 10px 1rem!important;
}
}
Let try again
If our suggestions are useful, please let us know by giving it a like, marking it as a solution.
MIDA: Heatmap, Record & Replay |BLOOP Referral Program, Reward |
Need help from our expert? Kindly share your request with us via community@bsscommerce.com
This is an 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
If our suggestions are useful, please let us know by giving it a like, marking it as a solution.
MIDA: Heatmap, Record & Replay |BLOOP Referral Program, Reward |
Need help from our expert? Kindly share your request with us via community@bsscommerce.com
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;
}
}
If our suggestions are useful, please let us know by giving it a like, marking it as a solution.
MIDA: Heatmap, Record & Replay |BLOOP Referral Program, Reward |
Need help from our expert? Kindly share your request with us via community@bsscommerce.com
This is an accepted solution.
Hi @heartlessoff ,
@media screen and (max-width: 750px) {
.header {
padding: 10px 1rem!important;
}
}
Let try again
If our suggestions are useful, please let us know by giving it a like, marking it as a solution.
MIDA: Heatmap, Record & Replay |BLOOP Referral Program, Reward |
Need help from our expert? Kindly share your request with us via community@bsscommerce.com
I didn't notice right away, the indentation is a little smaller on the cart side, how do I fix that?
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.
If our suggestions are useful, please let us know by giving it a like, marking it as a solution.
MIDA: Heatmap, Record & Replay |BLOOP Referral Program, Reward |
Need help from our expert? Kindly share your request with us via community@bsscommerce.com
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.
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;
}
}
If our suggestions are useful, please let us know by giving it a like, marking it as a solution.
MIDA: Heatmap, Record & Replay |BLOOP Referral Program, Reward |
Need help from our expert? Kindly share your request with us via community@bsscommerce.com
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
This is an 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
If our suggestions are useful, please let us know by giving it a like, marking it as a solution.
MIDA: Heatmap, Record & Replay |BLOOP Referral Program, Reward |
Need help from our expert? Kindly share your request with us via community@bsscommerce.com
It works, thank you very much!
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 😍
If our suggestions are useful, please let us know by giving it a like, marking it as a solution.
MIDA: Heatmap, Record & Replay |BLOOP Referral Program, Reward |
Need help from our expert? Kindly share your request with us via community@bsscommerce.com
Could you share with me the URL page?
Please let me know if it works by giving it a Like or marking it as a solution!
➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
➜ Weekly updated Shopify tutorials on YouTube
All features are available from Free plan. Live Chat Support is available 24/7.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025