Page width from mobile - Theme Spotlight

Solved

Page width from mobile - Theme Spotlight

heartlessoff
Tourist
16 0 0

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:

photo_2024-07-07_14-12-52.jpg

 

2:

photo_2024-07-07_14-12-53.jpg

 

 

 

Accepted Solutions (2)
BSSCommerce-TC
Shopify Partner
214 46 46

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


BSS Commerce - Full-service eCommerce Agency

View solution in original post

BSSCommerce-TC
Shopify Partner
214 46 46

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


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 12 (12)

BSSCommerce-TC
Shopify Partner
214 46 46

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


BSS Commerce - Full-service eCommerce Agency
heartlessoff
Tourist
16 0 0

Hi @BSSCommerce for some reason nothing changes

BSSCommerce-TC
Shopify Partner
214 46 46

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


BSS Commerce - Full-service eCommerce Agency
heartlessoff
Tourist
16 0 0

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

Screenshot_20.png

BSSCommerce-TC
Shopify Partner
214 46 46

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.

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


BSS Commerce - Full-service eCommerce Agency
heartlessoff
Tourist
16 0 0

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

 

BSSCommerce-TC
Shopify Partner
214 46 46

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


BSS Commerce - Full-service eCommerce Agency
heartlessoff
Tourist
16 0 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 minephoto_2024-07-07_19-16-23.jpg

 

photo_2024-07-07_19-16-24.jpg

 

 

BSSCommerce-TC
Shopify Partner
214 46 46

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


BSS Commerce - Full-service eCommerce Agency
heartlessoff
Tourist
16 0 0

It works, thank you very much!

BSSCommerce-TC
Shopify Partner
214 46 46

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


BSS Commerce - Full-service eCommerce Agency

PageFly-Amelia
Shopify Partner
493 154 222

@heartlessoff 

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!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.


Optimize your store’s mobile shopping experience with the Blum theme.