search

OpenSourceEcon / oselab

Open Source Macroeconomics Lab Webpage built in Flask
9 stars 7 forks source link

Format margins (and other formats) of explanatory text below gallery images #66

Closed rickecon closed 4 years ago

rickecon commented 4 years ago

PR #65 just updated the djia_npp_mth image in the gallery. I included some explanatory text below the image. But there are currently now right or left margins. What is the "best practice" way to fix those margins. My guess is that it is some .css template to fix on the gallery page. The HTML for that page is djia_npp_mth.html and the lines for the offending explanatory text are lines 63 - 103. And I notices that one of my little ineffective experiments inadvertently snuck into the last pull request in line 64 of the HTML file. I'll need to take that out because it doesn't do anything or it gets overriden by the governing .css files.

Any suggestions @asmockler @hayleefay @Peter-Metz @hdoupe @MattHJensen @jdebacker

Peter-Metz commented 4 years ago

Hey @rickecon, you could try the Bootstrap .container class to help with the margins.

You'll want to include the following line at the beginning or head of your html page:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

and these lines at the end of your html page:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Then, you can call the .container class:

<div class="container">
    // ...blurb goes here
</div>

and ditch that inline css. You might want to double check that your other formatting doesn't get screwy but you should be good to go!

asmockler commented 4 years ago

Bootstrap is actually already included, so no need to include it again on the page.

You can just change this line to

<div class="container">

(You might want to add py-4 or something similar to get a bit of vertical spacing as well, but container will get you the horizontal margins)

rickecon commented 4 years ago

Thanks @Peter-Metz and @asmockler. The ```

worked perfectly. Thanks so much.

This issue is resolved with PR #67.