Tribute page: bootstrap 4 media query not working in codepen

Hi! This is my first post…

I’m using bootstrap 4 in codepen to build my tribute page and am trying to scale the text for different screen sizes, as described on the v4 bootstrap website.

However, it doesn’t seem to work and I can’t work out why. In fact, I can’t get any of the media queries to work as described on the bootstrap page. Am I missing something key??

Here’s my codepen (the quite extreme font sizes are temporary):

I might be completely off but aren’t @include part of Sass ? I don’t see that you’ve added SASS or scss to your codepen (go to CSS settings , CSS preprocessor: sass or scss). Does it work then?

1 Like

Yes, @timotheap is right.
However, that won’t help because you need the sass version of Bootstrap which is not available AFAIK via CodePen.
I see Bourbon and Neat and Susy and Compass but no Bootstrap.

You could switch to Bourbon and Neat - it’s great. :slight_smile:

But a simple google search actually says coding Sass is possible in Codepen (and those two options sass and scss are available as CSS pre-processors). Or is it something totally different?

When you switch to using sass/scss you get a small button that reads ‘plugins’ IIRC.
Clicking that you will lean that you can import various things, like Bourbon/Neat, Compass, Susy, etc.

I am not sure how you would tell CodePen to import other things, like the Bootstrap 4 alpha sass files.

I am not sure if going pro will help. :slight_smile:

1 Like

You could manually add the breakpoint code to the codepen, like someone has done here for the grid mixins:

That would save you from having to redo the tribute page.

ahh, I thought it would be something like that…

I’ll find another way to do the breakpoints then.

Thanks both! :slight_smile:

1 Like