How can I remove padding from a border box on my webpage?

Store Design
1

Hi there - I have just created a page and added a loox widget. The back end page elements (Title + type below) have added a border box that gives the page too much padding between the type and the widget box. Any idea how to add a piece of code to remove the padding from the bottom of the border box?

https://www.viderislingerie.com/pages/referral-page

2

Go to your store admin > Sale channels > Online store > Themes > Edit code > Assets > open theme.scss.liquid file and add this code at the bottom

#shopify-section-loox-referrals-entry-widge { margin-top: -20px !important; }
3

To remove the padding from the bottom of the border box on a page where you’ve added a Loox widget, you can use custom CSS. Here’s how you can do it:

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you’re using and click on the “Actions” button, then select “Edit code” from the dropdown menu.
  3. In the code editor, locate and open the theme.scss.liquid or theme.css file.
  4. Scroll to the bottom of the file and add the following CSS code:
/* Remove padding from the bottom of the Loox widget box */
.page-template.page__type .loox-app-wrapper {
  padding-bottom: 0;
}
​
    1. Save the changes to the file.

    This CSS code targets the specific page template (page__type) where you’ve added the Loox widget and removes the padding from the bottom of the Loox widget box.

    If you’re using a different page template or class name, make sure to replace .page-template.page__type with the appropriate selector for your page.

    After saving the changes, the padding at the bottom of the Loox widget box should be removed, reducing the space between the type and the widget box.

4

Thanks so much for your reply.

I tried that a few different ways as the snippets in my theme.scss.liquid are formatted like this:

#shopify-section-loox-referrals-entry-widge {
margin-top: -20px !important;
}

I tried with a dot rather than a # as most of the snippets have this at the beginning, but that did not work either.

I think most of the gap/padding is coming from the Shopify border box around the type rather than the 20px margin at the top of the Loox widget.

Thanks though for giving me something to try.

5

Hi, many thanks for your reply, I have just tried that but it hasn’t reduced the space. I think it is because the padding is actually coming from the type above that which is described in the inspector as the border box for this element with a 75px padding"after" (at the bottom of the type)

6

Did you save your theme.scss.liquid file and reload page to check after adding code?

7

Hello @jacksonbetts

Could you share the screenshot with us so that provide you with the solution?

8

yes i did :slightly_smiling_face:

9

Hi - this is the link…

https://www.viderislingerie.com/pages/referral-page

10

Hey,

Tamarry from the Loox team here :slightly_smiling_face:

We’d be happy to try and help you with adjusting the padding inside your Referral page.

Please contact us at support@loox.io, and we’ll gladly proceed!

11

Hello @jacksonbetts

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->theme.scc.css>Add this code at the bottom.

.index-section {
    margin: 25px 0;
}