Support » Fixing WordPress » Remove map margins using CSS/JS.

  • Resolved michalrama

    (@michalrama)


    Hello,

    At the end of the site is a map that has margins that I can’t get rid of.

    I have added this code to CSS, which I have temporarily disabled.

    .umsMapMarkerFilters, .umsMapProControlsCon, .umsMapProDirectionsCon, .umsMapProKmlFilterCon, .umsSocialSharingShell {
      display: none;
    }

    After use, both edges are equally large.

    However, I don’t know what to do next. How do I get rid of those edges, please?

    Thank you

    The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)
  • If you’re referring to the white space BELOW the map, reducing the fixed height of the umsMapDetailsContainer container (currently set to 500px) should clear or reduce it:

    Try:

    .umsMapDetailsContainer#umsMapDetailsContainer_1_63402 {
    height: 300px;
    }

    Hello,

    Unfortunately, it doesn’t work. In addition, the CLASS is the same, but the ID is always different, and therefore cannot be used.

    I activated the code listed above. Would it be possible to do something about it now so there would be no edges?

    I can see the big white spaces are gone now.

    If you still want to remove the whitespaces marked red in the screenshot below, this is coming from pre code {line-height:1rem;} in your CSS. For the space outside the borderline on all four sides, this is coming from pre {padding: 1rem;} in your CSS. Set these to zero to completely remove them or change as desired. Since these are standard HTML elements, you probably want to limit the scope of your changes to the parent div only to avoid any unintended consequences.

    Hello,

    That’s what I wanted.

    pre.wp-block-code code{
       line-height: 0px;
    }
    pre.wp-block-code {
       padding: 0px;
    }

    With this code, both stripes and outdoor invisible edges disappear.

    <pre> uses only the map, but if I add a class there, it should not affect anything else.

    Anyway, now it’s showing as I wanted.

    Thank you

    I forgot to mention that the code in the assignment is not necessary.

    Hello,

    I’m opening this question again because there’s a problem.

    The code also affects the form above.

    How do I make the code apply only to the map?

    I wanted to do it this way

    pre.wp-block-code:last-child code{
       line-height: 0px;
    }

    but it doesn’t work.

    Please give advice

    Thank you

    Hello,

    I’m opening this question again because there’s a problem.

    The code also affects the form above.

    Look for ADVANCED at the bottom of the map block’s settings and add a custom class to this specific block containing the map. Then you can target this custom class instead of targetting the common wp-block-code class.

    michalrama

    (@michalrama)

    Hello,

    You can’t add a custom class to the map (I didn’t find it anywhere), but just edit the CSS

    pre.wp-block-code code .ums_map_opts {
    line-height: 0px;
    }

    and it only applies to the map.

    Thanks

    You can’t add a custom class to the map (I didn’t find it anywhere), but just edit the CSS

    I was actually referring to the Gutenberg BLOCK in which the map is placed.

    I don’t know your setup but if you’re using WordPress 5+ with the Gutenberg editor, every block has an ADVANCED box where you can put in a custom CSS class to be applied to that specific block only. That’s what I was referring to.

    We know pre.wp-block-code code works… with the caveat that it has unintended effects elsewhere since the default Gutenberg class wp-block-code is applied to other sections of the page.

    So if we add a custom class, say, myCustomClass, then something like this should work:

    pre.myCustomClass code {
    line-height: 0px;
    }

    pre.wp-block-code code .ums_map_opts {
    line-height: 0px;
    }

    Yeah, I tried that. In fact, this is functionally equivalent to just:

    .ums_map_opts {
    line-height: 0px;
    }

    But like you said, this only applies to the map, leaving some white spaces around it.

    michalrama

    (@michalrama)

    Hello,

    So I misunderstood you. Yes you are right. This way it works, without worrying that it will disturb anything else.

    Thank you

Viewing 10 replies - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.