How can I reduce mobile view margins on my home page?

Technical Q&A
1

Trying to reduce the margins in my mobile view on my home page in ‘text with image’ sections. I’m using the ride theme. Site is zerofoxtreecrops.com. What code do I need to accomplish this?

2

To reduce the margins, you will need to add some CSS code to your theme’s stylesheet.

Here’s an example of how you can target the specific class of the “text with image” sections and reduce the margins:

@media (max-width: 767px) {
  .text-with-image {
    margin: 0px !important;
  }
}

This CSS code will target the elements with the class of “text-with-image” and override any existing margins that are applied to them, when the screen width is less than 767px. If the class name is different, you should use that class name instead.

You can add this code to the theme.scss.liquid file in your theme’s assets folder.

Here are the steps to add the CSS code to your theme:

  1. In your Shopify admin, go to the “Online store” section and click on “Themes.”
  2. Click on the “Actions” button for the theme you’re using and select “Edit code.”
  3. In the left sidebar, navigate to the “Assets” folder and locate the “theme.scss.liquid” file.
  4. Open the “theme.scss.liquid” file in the code editor and paste the CSS code at the bottom of the file.
  5. Save the changes.

It’s important to make a backup of your theme before making any changes to it. Also, you can test the changes in a development store before making it live.

It’s also worth mentioning that you may need to adjust the CSS code or use developer tools to inspect the elements on your website to ensure that you’re targeting the right selectors.

3

There is no theme.scss.liquid file in my assets folder. Just theme-editor.js

4

Go to assets/base.css

OmeerEco_0-1674291764513.png
OmeerEco_0-1674291764513.png1803×853 378 KB

5

Hmm, I was able to find that part of the code and paste in your solution, still didn’t work.