store mobile reponsiveness issue

Shopify Discussion

Topic summary

A Shopify store owner reports their site displays correctly on desktop but lacks mobile responsiveness. After reviewing the store, community members identified specific technical issues:

Primary Problems Identified:

  • Overflow div elements causing layout breaks on mobile
  • Incorrect margin values disrupting grid layouts

Recommended Solutions:

  1. Add width: 100% CSS rule to wrapper divs
  2. Remove or conditionally apply margin-left: -20px from grid containers using media queries
  3. Optionally add margin: auto for improved centering

Implementation Steps Provided:
A detailed walkthrough was shared covering:

  • Accessing Shopify Admin → Online Store → Themes → Edit code
  • Two options: modify existing base.css (not recommended) or create a custom CSS file
  • Instructions for creating custom.css, linking it in theme.liquid, and adding the corrective CSS rules

Status: The store owner requested clarification on implementation, which was provided with screenshots and step-by-step guidance. The discussion remains open pending confirmation that the fixes resolved the mobile responsiveness issues.

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

hi there my store is working perfectly on desktop but its not mobile responsive can some body help please my store

2

my url is https://sundip1.myshopify.com/

3

Hey I check your Store. And found that you don’t have follow the best practices of creating Responsive Shopify store.

4

Hi @BDPK ,

I am from Mageplaza - Shopify solution expert.

I have checked your store and identified some issues with mobile responsiveness:

  1. Overflow div:

    mageplazacs_0-1734688630432.png
    mageplazacs_0-1734688630432.png1920×884 292 KB

    Solution: add the following CSS rule to the div below the wrapper (and to all similar divs): width: 100%

  2. Adjust the margin value:

    mageplazacs_1-1734689871896.png
    mageplazacs_1-1734689871896.png1915×903 255 KB

    Solution: Find the div containing these classes (home-products-block-content grid) and remove the CSS rule: margin-left: -20px; (or apply it only for desktop view by @media{ }). Optionally you can add following CSS rule: margin: auto; for better performance.

These changes can help improve the website’s responsiveness.

I hope this helps, Tuan Anh

5

m not getting how to do it can you please elaborate?

6

Hi @BDPK ,

Here is some steps you can follow to archive that:

  1. Go to Shopify Admin . Log in to your store

  2. Look at the menu on the left and select Online Store > Themes. You will see your store’s current theme on the right; now click the ‘Customize’ button.

    mageplazacs_0-1735027485154.png
    mageplazacs_0-1735027485154.png1920×876 110 KB

  3. You will be redirected to the theme editor page. Look at the top left, click the triple-dot button, and select ‘Edit code.’

    mageplazacs_1-1735028147918.png
    mageplazacs_1-1735028147918.png1359×658 193 KB

  4. Navigate to the ‘assets’ folder and expand it. This folder contains all the CSS files in your store. Now, you have two options:

    mageplazacs_2-1735028956411.png
    mageplazacs_2-1735028956411.png400×194 12.6 KB

    Option 1 : Modify ‘base.css.’ This file contains the main CSS of the theme. You can add your custom CSS rules here, but it may cause unwanted impacts (not recommended).
    Option 2 :

    • Create a new CSS file by clicking ‘Add a new asset’ > select ‘Create a blank file’ > name your CSS file (e.g., ‘custom.css’)

    mageplazacs_3-1735030546965.png
    mageplazacs_3-1735030546965.png1916×929 123 KB

    • After clicking “Done”, you have successfully created a file for custom CSS rule:

    mageplazacs_4-1735031199124.png

    • Before modifying, you need to include the custom file in ‘theme.liquid’ following these steps:
      +Navigate to and open ‘theme.liquid.’ Press ‘Ctrl + F’ and type ‘base.css.’ Here, you can see how to include a CSS file in the theme. Simply copy the line below, rename it, and click ‘Save’ when you’re done.

    mageplazacs_5-1735031537157.png
    mageplazacs_5-1735031537157.png1626×880 108 KB

    • Navigate to ‘custom.css,’ open the file, and add any CSS rules you want. Remember to click ‘Save’ when you’re done.

    • You can open your store and check if the new CSS rules are working now !

I hope this helps, please leave a comment if you need further instructions !