Creating a new design with media query print

Hi there!

First of a little background information before going to my challenge ahead. Up until now I’ve created “static” pages manually. This required quite some time (and I’m not an CSS expert either), so I looked into easier ways to do this. During my search I came across Bootstrap Studio. So far it all looks very promising, and I’ve managed to get a page up and running quicker than I’d hoped (after finding my way into the platform). Up until this point.

I’m trying to create a “print” sort of page. This isn’t the normal website you’d see as it has static dimensions of 11in x 8.5in. Within these boundries I’ve managed to create a template pretty quickly.
However upon completion I wanted to print the page to a PDF and I noticed that the whole layout was twisted up.

The preview inside BSS (and also within the browser) look as intended, however when opening up the browser print function I get to see the result.

Now my question to you guys: Is there native support for a case like this? I’ve read that media queries would come in here (@media print) however this doesn’t seem to apply to everything in my design.

My eyes also fell on the designer settings => Design => Bootstrap => Viewport content, but to no avail.

Suggestions would be very welcome!

Hmmm…

1 Like

I didnt know thst there were print classes, lol! They did add them in bss 5? Cause ive stopped using bs and bss atleast half a year ago and didnt use bs5 at all back then snd i dont remember these print classes out there

Honestly I never use print classes
But I know it’s in the documentation somewhere :wink:

1 Like