I have a lightning-map component that I need to fit within the div element. But it looks like the default width specified in the slds-map css is 23.75rem which is causing the map to flow outside. Can anyone help me with a way to adjust the inner styles using css/javascript?

enter image description here

I was able to adjust the width by inspecting the element and manipulating the slds-map class: enter image description here

But, I need a way to implement this in the actual code:

<div class="mapBoundary">

I tried the following CSS to try overriding the default css, but it didn't work:

lightning-map > div > div .slds-map{
    width: 100%;
    height: 100%;
    position: relative;
    min-width: 10rem;

2 Answers 2


Found a solution for this via Javascript:

renderedCallback() {
    const style = document.createElement('style');
    style.innerText = `c-wc-locations .slds-map {
    min-width: 0 !important;
  • Thanks. it helped me.
    – Shankar D
    Feb 4, 2022 at 10:59

You need to load your .css styles inside a .zip as a static resource in salesforce. This worked for me:

JS file:

import { loadStyle } from 'lightning/platformResourceLoader';
import yourCss from '@salesforce/resourceUrl/yourStaticResource'
connectedCallback() {
            // Init CSS Static Resource
            loadStyle(this, yourCss + '/yourCssFile.css');

CSS file:

  position: relative;
  min-width: 5.0rem;
  width: 100%;
  max-height: 100%;

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .