Closed theofruitrouge closed 6 years ago
Found. However it's annoying to change it for every scale in the CSS.
Glad you found the solution. If there's a better way to do the map box size (which wouldn't surprise me, I'm no CSS expert), please make a PR.
Would you be able to post the solution?
I would like to increase the height for the map box on mobile/narrow(er?) mode
Hi, I don’t have the code in front of me, I can post the exact file lines when I come home. To resize the map box you need to change the height for the different scales in the CSS. Then you can resize your browser window on your computer to check if it’s correct for every scale. To find the exact code line, use « Inspect element » on Firefox for example.
I managed to do it by including a
height: 25em;
in line 1120 (where the parameters for the map are).
Full code.
/* Map */
#map {
height: 25em;
padding: ($box-padding * 4) $box-padding;
}
It seems to work ok for Google Maps, but haven't thoroughly tested it.
I would love to know how you changed it. Thanks!
EDIT: Also, I don't currently know deploy it with the changed file (without changing the theme files). Any advice on that would be appreciated as well. (I saw something about putting a new CSS file in your static folder that overrides certain things.)
I've included the above code in https://github.com/funkydan2/alpha-church/commit/6b0a1511ca3798d9f45a65f4f25aa9a0f92da5dd. Let me know if you reckon it's not quite right.
@theofruitrouge How would it work in the specific example of changing the height parameter of map?
I tried creating a custom.css
file under /static/css/custom.css
that contains the following
/* Map */
#map {
height: 5000em;
padding: ($box-padding * 4) $box-padding;
}
I also put customCSS = ["custom.css"]
in the config.toml
file. However, the map size did not change.
(I also tried renaming the file custom.scss
, but to no avail.)
A third thing I tried is to copy paste the whole file main.scss
into custom.scss
and changing the parameter there.
EDIT: Found the issue. It should have been customCSS = ["css/custom.css"]
as by the second link, which I overlooked.
Looked everywhere in CSS, can't find where to resize the OSM map box ! This drives me crazy.