Decrease/Increase section heights for mobile only 7.1

Site URL: https://viola-fennel-pxwd.squarespace.com/

Hi Folks,
I would like the first image (placed as a section background image) to be taller on mobile only. In addition, the next section has a background image (green tickertape) with a pan effect that I would like to be shorter in height on mobile. The (tickertape) section height is currently designated as 10. Any suggestions are much appreciated! Thanks for thinking about it!

-Kerin

On 11/13/2020 at 6:17 PM, kerin said:

background image (green tickertape) with a pan effect that I would like to be shorter in height on mobile

Add the following to Design > Custom CSS.

@media screen and ( max-width: 767px ) {

  /* make green ticker tape less tall on mobile */
  
  [data-section-id="5fa0c245698ad91a1abf4ae9"] {
  
    min-height: 5vh !important;
    
    }
    
  [data-section-id="5fa0c245698ad91a1abf4ae9"] .content-wrapper,
  [data-section-id="5fa0c245698ad91a1abf4ae9"] .sqs-layout .sqs-row .sqs-block:first-child

    {
    
      padding: 0 !important;
      
      }
  }

On 11/13/2020 at 6:17 PM, kerin said:

first image (placed as a section background image) to be taller on mobile only

I don't have an answer for this one at this time.

Creedon,

Amazing! YES! You are my SS hero! on a weekend no less!
If you feel like continuing to impress me with your generosity: I have additional ticker tapes on another page https://viola-fennel-pxwd.squarespace.com/watch-it-live. I tried swapping the section ID for these pages without the same luck. (The preview in chrome doesn't show the bands but you can see where they are). I tried:

@media screen and ( max-width: 767px ) {

 /* make blue ticker tape less tall on mobile */
[data-section-id="5fab179508150219ecb17b7b"] {

   min-height: 5vh !important;

 }

[data-section-id="5fab179508150219ecb17b7b"] .content-wrapper,
[data-section-id="5fab179508150219ecb17b7b"] .sqs-layout .sqs-row .sqs-block:first-child

{

   padding: 0 !important;

 }

THANK YOU!

-Kerin

I think you had the code right but here is what I came up with.

@media screen and ( max-width: 767px ) {

  /* make blue ticker tape less tall on mobile */
  
  [data-section-id="5fab179508150219ecb17b7b"] {
  
    min-height: 5vh !important;
    
    }
    
  [data-section-id="5fab179508150219ecb17b7b"] .content-wrapper,
  [data-section-id="5fab179508150219ecb17b7b"] .sqs-layout .sqs-row .sqs-block:first-child

    {
    
      padding: 0 !important;
      
      }
  }

Is there more than one ticker tape on the last page you mentioned?

One thing I noticed is that the ticker doesn't seem to load all the time. Perhaps that explains why you didn't see results from your code?

Let us know how it goes.

Yes! This was perfect and I duplicated it for the purple one lower on the page too. So yeah, I am not sure why it doesn't reliably display in the dashboard view. I haven't had any issues in Safari or Chrome when viewing the live site so that is a comfort. 

Thank you so much- it is a vast improvement!

Best,
Kerin