Display a very wide map in mmistakes

1

Hello,
In the mmistakes theme I would like to display a map generated by leaflet (not in the header !)
What class/style can I use to cover the full-witdh of the screen in the body of a page ?

  • wide argument extends ONLY to the right
  • how to extend to the left AND to the right + both borders ?

Thank you by advance,

2

Can you share a screenshot? What does it look like to extend only to the right?

I suspect you might be limited by an element with a class around the content of the page. So even if you map is 100% of width then the outer element only takes up 2/3rd or 1000px whatever of the page (Jekyll themes often do this to center content and make it not look weirdly spread out on a massive screen).

I don’t know if theme config options will help. Look at the theme CSS and docs but anyway here are some CSS ideas.

You could make a new layout which doesn’t use that class but uses another one. And use the layout on your page. So you can get to full width.

Or you could use some page-specific CSS. This is easier to setup but harder to reuse across pages with maps.

e.g. if rendered page looks like this

<div class="main">
  <div id="map">
  </div>
</div>

With the theme setting this:

.main {
  width: 80%;
  max-width: 1000px;
}

And you setting this:

#map {
  width: 100%;
}

Your map is going to be full width within an element that has a max size.

So then on your page you can override the theme CSS.

---
layout: page
---

<style>

.main {
  width: 80%;
  max-width: initial;
}

#map {
  width: 100%;
}

</style>

<div id="map">
</div>
3

Hello,
I solved my problem like this:

#myMap { 
position: relative;
height:800px;
left: -100px;
margin-right: -200px; }

left and margin-right extend the map !

Is it THE solution or A solution ?

4

Okay good.

Well you can look at the CSS in the theme’s repo to see if something like this exists and then use that class on your element.

Maybe there is a way using config which might or might not be documented in the theme.

Anyway you have a working solution with a few lines of code.

Maybe add to a custom CSS file or as style in head tag so you can use this CSS across your site. And you can generalize to maybe a class called fullWidth or something that you can add to your map or any other elements.

5

Also remember to test your CSS on screen sizes and mobile!

The advantage of using a CSS framework like Bootstrap (maybe the theme does already?) is that there are classes already available to do full or 2/3 width for example and desktop and mobile breakpoints setup.

6

mmistakes doesn’t use bootstrap to my knowledge !
mmistakes is responsive but I don’t know with a map …