Bootstrap/CSS Help for Screen Height with Markdown Project

JavaScript
1

Hello all,

I’m working on my codepen for the markdown previewer. Here’s the link:

Markdown-Preview-Bootstrap (codepen.io)

My question currently relates to the fact that the card elements overflow the screen when it’s in ‘wide’ mode and require a bit of scrolling to reach the bottom. I can limit their height manually, but I’d prefer that they stop prior to reaching the screen (in fact, use the ‘my-2’ margin class I gave them).

Any help would be appreciated! My intention is for them to sit side by side, filling up the screen, in ‘wide’ mode, and then to sit atop each other when it collapses, preferably with a max height of 80vh (so at least of bit of the previewer is visible when opening the page initially).

Thank you!

2

Use max-height on the card container to limit the height in either situation. Adding it to your current pen limits the height, but you will still need to scroll inside the cards.

You’ll need to use some media queries and responsive styling to get the styling to change depending on screen width. You can do that by hand or quickly using bootstrap.

3

Hello,

Thanks for the pointers. I’ve been working with max-height but been unable to figure out how to get the bottom margin to show properly. I’ve tried moving it around, but so far the best I’ve gotten is this, putting it on the .col.

The problem here is that the margin/padding around the cards don’t seem to be accounted for (it isn’t visible at the bottom of the page) and either (a) crops the margin off or (b) gives the page a few pixels of scroll at the bottom, rather than having the card fill up all the available column height and then butt up against the top and bottom of the padding.

Thanks!

4

The margin isn’t included in the size of the element (padding is part of the inside. So if you’re trying to display the margin around the card, the height of the container has to be greater than or equal to the cards plus the top and bottom margins of the cards. You also have to account for any padding on the container.

Changing these heights

textarea {
	height: 95%;
}

.col {
	max-height: 95vh;
}

for instance, removes all the scroll bars except the ones on the text areas. You’ll just have to play with the height settings until everything lines up like you like it. It’s sometimes helpful to inspect elements and look at the computed styles in the browser’s dev tools or to style all your containers to have a small border so you can see where they actually are on the page.

5

Thanks for the help. I ended up resolving this using SCSS/CSS rather than bootstrap. Seems like I was trying a little too hard there to force it to work.

I ended up having to do some reading about using the CSS @media tag, and that helped a lot!

Markdown-Preview-CSS-Format (codepen.io)

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.