My custom code is not working, issues with widget height in desktop

Ask the Community Customization
1

Hi, i am using the map widget, and i implemented some custom code so the map list wouldnt get cropped on destktop sizes. the code was working for a while, but now it is not anymore and i cant figure out what the issue is, here is my current code to ensure the map takes a max 0f 600px on desktop (so we can see the load more button while scrolling the list) and then 100vh on mobile. Any ideas? thanks!

/* ---------------- Desktop & Default ---------------- */

.global-styles,

[class*=“widget__Container-sc”] {

height: 600px;

}

.active [class*=“marker__Container-sc”] [class*=‘marker__MarkerBody-sc’] path {

fill: white !important;

}

/* ---------------- Mobile Layout ---------------- */

@media (max-width: 768px) {

/* Let the widget adapt to viewport on mobile */

[class*=“widget__Container-sc”] {

height: 100vh !important;

max-height: 100vh;

}

/* Stack map + list vertically */

[class*=“mobile-layout__Container-sc”] {

display: flex !important;

flex-direction: column !important;

height: 100%;

}

/* Map stays visible, fixed height */

[class*=“mobile-layout__MapContainer-sc”] {

order: 1;

height: 300px;

flex-shrink: 0;

}

/* List takes remaining space and scrolls */

[class*=“mobile-layout__Directory-sc”] {

order: 2;

flex-grow: 1;

overflow-y: auto;

margin-top: 20px;

}

/* Remove swap button */

[class*=“FloatingButton__FloatingButtonContainer-sc”] {

display: none !important;

}

}

3

Hi there, @Ignacio_Brito :waving_hand:

Could you please send me a link to the page, where your widget is installed? I’ll be happy to check things :slightly_smiling_face:

4

thanks @Max this is the live link if that is what you mean:

currently it seems to take 100vh (if i resize the window it shrinks, but if i try to put it inside a 600px height container it just crops the bottom of the map. as you can see on this page:

It is driving me crazy, i guess maybe the mobile 100vh rule is interfering with it. any help is appreciated!

5

Thanks! We’ve fixed the issue using this CSS code:

[class*="widget__Container-sc"] {
 max-height: 600px;
}

Please check it out and let me know if everything is fine :wink:

6

ohh thanks that seems to do the trick! what if i want it for its size to be depenant on the container size on webflow? any way to achieve this results without using a specific size in pixels?

Thanks!

7

Got you! Please try to use this code instead :wink:

[class*="widget__Container-sc"] {
 max-height: unset !important;
 height: 100% !important;
}

.global-styles,
.widget__container-sc.is-location,
.elfsight-app-aa37544e-d23c-43fd-88ce-5de2fd2b38c3,
.elfsight-app-aa37544e-d23c-43fd-88ce-5de2fd2b38c3 > div {
 height: 100% !important;
}
8

thanks for all the assitance max, i wil try that one out as well. i will mark the isisue as solved

9

You’re very welcome!

In the meantime, we’d like to invite you to participate in our new contest, where you can win a 3-month extension for your subscription - April Contest: What’s Your Top Widget Feature? Tell us and win 3 MONTHS FREE!:wrapped_gift:

Check the details and join in :wink: