[Resolved] Adding fixed map container using the Blocks editor

[Author]

Posts

[Pete]

On this page: hidden link
Using Gutenberg, I need to fix the map on the right. Now doing this directly to the map wont work, it breaks it.

So adding a div around the map and then css I was hoping to sort this issue however this isn;t working either

We have done this already using Elementor and trying to do the same using Gutemberg
hidden link

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi Pete,

Thank you for waiting.

During troubleshooting, I was able to force the map's column to stay fixed at the right side of the screen, using the following custom CSS:

@media only screen and (min-width: 768px) {
.kt-row-layout-inner > .kt-row-column-wrap > .inner-column-1 {
width: 63%;
}

.kt-row-layout-inner > .kt-row-column-wrap > .inner-column-2 {
width: 33%;
position: fixed;
right: 0;
}
}

I hope this helps and to check the CSS code applying to different page elements, you can use Google Chrome's inspect element tool, as explained in this guide:
hidden link

regards,
Waqar

[Pete]

No, many...many thanks fro your time 🙂

Works like a charm, perfectly. Really grateful for your help.

I really didn't think it would be possible to use this layout with Gutenberg and I spent over half a day rtying different CSS, nothing worked.

Again, thank you sooooo much for your help.

Regards, Pete

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

You're very welcome Pete and glad that it worked.

Please feel to mark this ticket as resolved and start a new one for each new question or concern - we're here to help!

[Pete]

My issue is resolved now. Thank you!