Unable to remove margin & padding from custom HTML

Store Design
,
1

I tried all kinds of code, both in my CSS file, my theme file.

The image right after the banner, where it says ‘Phulkari’ has been put there using custom HTML code since it involves an image map. I want to remove padding from only left and right, not top and bottom. How do I remove the padding and margin around this image? Because of this, my image map is also not working right.

https://0rq5hgqc1eyxqfwn-58081050796.shopifypreview.com

Thank you

2

Hi @elzish

This is Richard from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file styles.css

Step 3: Paste the below code at bottom of the file → Save

.shopify-section.shopify-section–custom-html .section {

width: 100% !important;

max-width: 100% !important;

}

Hope that my solution works for you.

Best regards,

Richard | PageFly

3

Hi @elzish ,

I understand that you want to remove the margin or padding in the image but if you remove it, the image will not align on the center. What I do i change the width and max width, so the image will same alignment on the product below.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click oheme.scss.liquid" or “styles.scss.liquid” file, depending on which file your theme uses to store its CSS styles. (better you put in the theme.scss folder since it’s a header).
  4. At the bottom of the file, add the following CSS code:
section.section {
    width: 100%;
    max-width: 100%;
}

I hope this help.

4

This worked, thank you so much!

5

This worked as well, thanks a lot!

6

Glad to hear that, happy to help. :blush:

7

I’ve actually run into another problem now, it’s made my entire site full width so a lot of the elements that I had added through custom HTML are too wide now. Is there any way to make only a specific element full width?

8

Thats wierd maybe there is another selector involve when you put in the css file.. Also it hard to solve the problem when you just using the inspect tools. :sweat_smile: