Help with mobile full width

Store Design
, , ,

Topic summary

A user is experiencing an issue where a top section displays full width on desktop but has unwanted left and right padding on mobile, causing the image to be cut off.

Solutions Provided:

Two community members offered different approaches:

  • Solution 1: Add custom CSS code to the theme.liquid file, placed above the </body> tag
  • Solution 2: Add CSS to the theme’s stylesheet (base.css, style.css, or theme.css) targeting specific container classes with padding: 0 !important

Outcome:

The original poster confirmed one of the solutions worked, thanking the contributors. Both helpers included screenshots demonstrating the expected result and requested feedback through likes/marking the solution.

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
1

I need help making this top section full width on mobile too. managed to make it full width on desktop but there is a space on mobile

Link: https://oriental-perfum.myshopify.com/

Password: sasa

Screenshot 2024-10-11 at 8.06.57 PM.png
Screenshot 2024-10-11 at 8.06.57 PM.png489×732 232 KB

As you can see the image cuts off and i don’t want that left and right padding, I want full width

2 Likes
2

Hey @Ked

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1728674083567.png
Moeed_0-1728674083567.png375×672 240 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
3

Hi @Ked

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.container-fluid.m-section-my.m-section-py.m-custom-content__container {
     padding: 0!important;
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

1 Like
4

Thank you so much