search

funkydan2 / alpha-church

Hugo theme for churches based on a html5up theme
https://alpha-church.netlify.app
Other
69 stars 59 forks source link

Can't resize map box #1

Closed theofruitrouge closed 6 years ago

theofruitrouge commented 6 years ago

Looked everywhere in CSS, can't find where to resize the OSM map box ! This drives me crazy.

theofruitrouge commented 6 years ago

Found. However it's annoying to change it for every scale in the CSS.

funkydan2 commented 6 years ago

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.

fabianying commented 5 years ago

Would you be able to post the solution?

I would like to increase the height for the map box on mobile/narrow(er?) mode Screenshot 2019-06-26 at 10 53 33

theofruitrouge commented 5 years ago

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.

fabianying commented 5 years ago

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.)

funkydan2 commented 5 years ago

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 commented 5 years ago

My hugo & theme version were old. I tried with new hugo and updated theme, the solution works well on my end : map is readable.

For the custom CSS, see here or here.

fabianying commented 5 years ago

@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.