Mobile width too wide, can I make it more narrow?

Mobile width too wide, can I make it more narrow?

marceloldenburg
Tourist
11 0 1

Hello there!

 

I got a small problem with my store. On desktop its all fine, but on mobile the width is just a little too wide in my opinion. Is there an option to make it a bit more narrow on my whole website, like just a litte bit? I think its all too close to the edge.

 

Thank you guys in advance!

 

url: https://vivanora.de/

pw: nora22

 

Firefox_Screenshot_2025-01-24T07-23-01.767Z.png

Replies 3 (3)

websensepro
Shopify Partner
1854 215 261

Hi @marceloldenburg 
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

 

 

@media(max-width:768px){
.wrapper-body {
    padding: 0 1.5rem !important;
}
}

 

 

Result:

websensepro_0-1737704346479.png

 

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! 🚀 (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!

Need a Shopify developer? Hire us at WebSensePro For Shopify Design Changes/Coding
For Free Tutorials Subscribe to our youtube
Get More Sales Using Big Bulk Discount APP
Create Your Shopify Store For Just 1$/Month
Get More Sales Using Big Bulk Discount APP

rajweb
Shopify Partner
579 48 114

@marceloldenburg ,

To address your issue, you can add the following code snippet to your Shopify theme:

This will help adjust spacing slightly across your website elements.

To add the code to your Shopify store, follow these steps:

1. Online Store 

2. Themes

3. Edit code

4. In the left-hand side menu under Assets, look for a file like theme.scss.liquid, styles.css.liquid, or something similar. This is where you'll add the custom CSS. If you're

5. Scroll to the bottom of the file and paste the following code: css Copy Edit:

.body-content-wrapper, .body-content-wrapper * {
    box-sizing: inherit;
    padding: 1px important;
}

 

 

Result:

rajweb_1-1737705173408.png

 

 

I hope this helps! If you need further assistance, feel free to reach out. With over 8 years of experience, I’m here to help you optimize your store. 😊

Best Regards,

Rajat

-Need a Shopify developer?
https://rajatweb.dev/
Email: rajat.shopify@gmail.com

brisk_code
Shopify Partner
80 9 13

Hi there

You are using Ella theme and no need to use custom code, just follow instructions

1. Go To Customizer Page and to the left side bar select the settings, then Multiple Layout, Scroll Down and find the mobile menu

change them according to your requirements.

brisk_code_0-1737705660163.pngbrisk_code_1-1737705690789.png

 

Best
Fazil Nusrat from Brisk Code

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!