The default width of the Mapme content panel is set to provide a good amount of real estate for your content while giving the map the majority of the space available.

This configuration might not be optimal for your use case. For example, if your map has a large amount of text and media content, increasing the content panel area can provide a better user experience.

On the other hand, if your map has minimal content, you can decrease the content panel area in order to give more visibility to the map.

Mapme lets you easily customize the width of the content panel of your map.

Check this example. The width of the map content panel is set to 600px for large screens and will progressively decrease for smaller screens. 

map-content -panel-custom-width

How to customize the content panel width?

By default, the content panel is set to for 400px width for large screens. With smaller size screens, the content panel width will progressively decrease until it reaches 21% of the screen width.

To change the default width, add the following custom CSS in your CSS editor. Replace the default value in both places with the width you would like to use

 


/* Change width of content panel in landscape mode */
[custom-css] .mapme-theme__layout-pane {
width: 550px;
}
[custom-css] [dir=ltr] .mapme-theme__layout-main {
padding-left: 550px;
}

Note that this will set the width of the content panel in landscape mode for any size screens. This might work well for large screens however for small screens, the basemap might barely be visible.

Therefore, we recommend adding rules to make the width of the content panel change based on the screen size.

You can add one or multiple rules. Here are some examples:


/* Set content panel width for large screens (width higher than 1388px)*/
[custom-css] .mapme-theme__layout-pane {
width: 550px;
}
[custom-css] [dir=ltr] .mapme-theme__layout-main {
padding-left: 550px;
}
/* Set content panel width for medium size screens (width 1024px - 1387px) */
@media (max-width:1387px) and (min-width:1024px) {
[custom-css] .mapme-theme__layout-pane {
width: 40%;
}
[custom-css] [dir=ltr] .mapme-theme__layout-main {
padding-left: 40%;
}}
/* Set content panel width for small size screens (width 540px - 1023px) */
@media screen and (max-width: 1023px) {
[custom-css] .mapme-theme__layout-pane {
width: 50%;
}
[custom-css] [dir=ltr] .mapme-theme__layout-main {
padding-left: 50%;
}}

Note that below 540px, the screen will switch to portrait mode.

What happens to the media size?

The media area in the content panel will automatically adjust to the new size of the content panel. The media area aspect ratio will remain 16 by 9.

This applies to all to types of media, images, videos, PDF, and embedded media like Matterport tours and  360 images.

RTL mode

If your map is set to RTL mode (right to left), you will need to change the direction in the CSS. The default CSS is for LTR (left to right)


/* Change width of content panel in landscape mode */
[custom-css] [dir=rtl] .mapme-theme__layout-main {
padding-right: 550px;
} [custom-css] [dir=ltr] .mapme-theme__layout-main { padding-left: 550px; }