Jump to content

Leaflet Code Block Sizing Issue

Recommended Posts

Hi, I'm having difficulty coding CSS for my code block. It is a leaflet map, and I'm wanting it to be full bleed with no padding or margins on the block. I want the map to be 40-50vh, but want to play around with it. My code right now isn't really working.

Also, if anyone knows how I can make the leaflet map only scroll and work when clicked, let me know.


Web page link is https://themontevallolegacyproject.com/aaht. Password is AAHT.

The CSS currently looks like this:

      body {
        .center {
  display: block;
  margin-left: 0px;
  margin-right: 0px;
 overflow-x: hidden;
 max-width: 100vw;

     #map { height: 100vh; width: 100vw; }
        /** Full Width Block**/
#block-yui_3_17_2_1_1699131427037_24040 {
  padding: 2vw, 0hw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  height: 40vh;

Link to comment
  • Replies 2
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

@josiedaisy I'm not 100% clear on what you want? It already looks like the map is full bleed and you've got the #map height set to 100vh in your custom CSS... but you mentioned you want to play around with that to 40 or 50vh?

If I change #map to 50vh, it does it, but there is space below, so I add 50vh to the height of the whole section to match, like this:

.fe-654818a5136a7869011d4bcd {
	height: 50vh;

Is that what you mean?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.