Need To Make Section Height Smaller On Mobile Only

Site URL: https://www.sharedgooods.com/

Added a scrolling marquee to my home page but it's far too tall on mobile. I've tried a lot of different codes but none of them work. I'd also be open to just coding the scrolling marquee into the bottom of the nav menu! Either or.

On 9/9/2021 at 1:49 AM, jaredvoorhees said:

Site URL: https://www.sharedgooods.com/

Added a scrolling marquee to my home page but it's far too tall on mobile. I've tried a lot of different codes but none of them work. I'd also be open to just coding the scrolling marquee into the bottom of the nav menu! Either or.

Add to Design > Custom CSS

/* Marquee on mobile */
@media screen and (max-width:767px) {
[data-section-id="6137a1cf6b869e69553ea8e1"] {
    min-height: unset !important;
    padding-top: 40px !important;
}
}

I also have a similar question on this topic..

I created a custom css background color to a line block (it is its own page within the index).  I want it to operate as section dividers on my site pages.  it works perfectly on desktop and even iPad views (see below)

however, when I open these pages on iPhone/mobile view.. it get a much fatter/taller line height than desired.. any pointers how to fix this?

thank you in advance for the help here!

Jess

48 minutes ago, jtgavic said:

I also have a similar question on this topic..

I created a custom css background color to a line block (it is its own page within the index).  I want it to operate as section dividers on my site pages.  it works perfectly on desktop and even iPad views (see below)

however, when I open these pages on iPhone/mobile view.. it get a much fatter/taller line height than desired.. any pointers how to fix this?

thank you in advance for the help here!

Jess

What is your site url?

@tuanphan

https://somethingspotted.com

this is what I'm seeing when I "inspect element" on a chrome browser

site url: https://somethingspotted.com

8 hours ago, jtgavic said:

this is what I'm seeing when I "inspect element" on a chrome browser

site url: https://somethingspotted.com

Add to Design > Custom CSS

@media screen and (max-width:640px) {
body#collection-636b179a5081cf760e5299db .horizontalrule-block {
    padding: 1px !important;
}
}

worked perfectly, thank you for the prompt assistance on this request!