How can I correct the code for margin changes in theme.css.liquid file?

[SunshineOptics]

Can someone please assist with what I am doing wrong here. I’m sure its a small change but I cant figure it out. I have this code in the bottom of my theme.css.liquid file:

shopify-section-1498163293234 shopify-section index section { margin-top: 0px; padding-top: 0px !important; padding-left: 0px !important; }

Here is the snippet of the area from the inspect screen in Chrome:

and I’ve attached a screenshot of the page from the inspector as well.

I’m only trying to reduce the top margin to rid the space between the Today logo and the rich text area (the orange area)

Did I code this wrong? Or can someone advise what needs to be changed? Thanks!

[GabrielS]

Hi,

Your code is missing the selectors.

The below code should achieve what you are looking for:

#shopify-section-1498163293234 { margin-top: 0px; padding-top: 0px !important; padding-left: 0px !important; }

Cheers!

Gabriel

[SunshineOptics]

Thanks but that didn’t seem to work. Is there something else I should be doing?
I’m assuming the 0 margin tells it to justify the text to the top of the box, but there is still a space in that section. The section above it doesn’t appear to have a margin so I don’t think that’s causing the spacing.

I tried experimenting with a few different pixel sizes but nothing was changing that area.

[Uhrick]

hey, SunshineOptics

try replacing your code with, just to see if the space disappears

#shopify-section-1498163293234 shopify-section index section { 
margin-top: 0px; 
padding-top: 0px !important; 
padding-left: 0px !important; 
display: flex;
justify-content: center;
align-items: center;
height: auto;
min-height: unset;
max-height: unset;
}

[GabrielS]

Hi - Your code is incorrect, its missing the selectors.

[GabrielS]

You are probably targeting the wrong element.

Can you further detail the request by indicated which margin you want to adjust? Sharing your website link can be relevant.

[SunshineOptics]

Thanks both, but still not working. I’ve tried to include some further info below. Still not quite sure what the problem is.

Site: www.sunshineoptics.us

The issue is the space between the Today show logo and the first line of the rich text section where it says “vision for future”.

There appears to be a margin there…see screenshot below from the Chrome inspector. The orange area over the text area is what I cannot reduce or get rid of.

I want the “vision for future” rich text area to be closer up near the today logo so there is not such a large space.

[GabrielS]

You can remove some of the margin by using the below code:

#shopify-section-1664890887f4687754 .custom__item.small--one-whole.one-quarter.align--center {
  margin-bottom: 0 !important;
}
div#shopify-section-1498163293234 {
  margin-top: 0 !important;
}

Let me know if this was helpful.

Regards,