Alter height on mobile map block only

Site URL: https://bagpipe-broccoli-k2x2.squarespace.com/

Hi all,

I'm having trouble making the map on mobile larger at the top of the contact us page. (Link to that page is in the footer).

I have put this code in to make the map full width on desktop and I think this code is causing the problem on mobile.

/// Contact Us ///
// Top Map //
/* contact page map block full width */
section[data-section-id="61a6092201d66c32ef971e05"] {
  .content-wrapper {
    padding: 0 !important;
    max-width: 100% !important;
  }
  .sqs-row { margin: 0 !important; }
  .sqs-row .sqs-block.map-block {
    padding: 0 !important;
  }
}

Can someone please help me.

Password to site is: test

11 minutes ago, Outlast-Creative said:

Site URL: https://bagpipe-broccoli-k2x2.squarespace.com/

Hi all,

I'm having trouble making the map on mobile larger at the top of the contact us page. (Link to that page is in the footer).

I have put this code in to make the map full width on desktop and I think this code is causing the problem on mobile.

Hey @Outlast-Creative try to add next code in Custom CSS:

@media screen and (max-width: 768px) {
  section[data-section-id="61a6092201d66c32ef971e05"] .sqs-block-map .sqs-intrinsic {
    padding-bottom: 56.25% !important;
  }
}

Hey, @SquareRefresh!!

Thank you this worked perfectly. I've been wobbling my head for ages at this haha.

Nice one!

2 minutes ago, Outlast-Creative said:

Hey, @SquareRefresh!!

Thank you this worked perfectly. I've been wobbling my head for ages at this haha.

Nice one!

You're welcome!