How to add Media Queries for Print

Bootstrap Studio Help
1

Hi,

I'm trying to add a media query for type "print" and am unsure how to do that. Bootstrap Studio doesn't seem to like anything I've tried to do.... ie "@media (print)" or "@media (type:print)" etc. Any ideas how to insert a print media query?

Thanks!

2

Following

3

It should be

@media only print {
    body {
        content:"only visible for print";
    }
}

https://www.w3schools.com/css/css3_mediaqueries.asp

"print" is the type of media not an expression

Saj

4

Ah.. right... so, for mcohen2 that was following this thread... here's how you do it, as it's not entirely intuitive in BSS....

In the Styles pane, start a new style by clicking between existing styles. Then, click the little menu icon in the upper right corner and click Add Media Query. It will default to an expression... like so: "@media (max-width:1199px)". Delete the expression (part in parentheses, including parentheses). Then replace it with "only print"... so the media query should look like "@media only print".... then you can fill out the style as normal and it will only be active when printing.

Thanks saj for pointing me in the right direction!

5

I have use some media queries on my website http://findbestvacuums.com but cannot make it responsive.

6

What did you use to build that website? Not a Bootstrap Studio, because that's definitely not typical Bootstrap Studio code. When you are done making a new site using Bootstrap Studio, come back and let us know and we'll be happy to see if that has fixed your problems. Doing things correctly usually does, and Bootstrap Studio does it almost automatically for responsiveness, you aren't needing to add things in there to make the site responsive, only to tweak it to your desired breakpoints.

7

@mcohen2 your problem comes from this file http://findbestvacuums.com/?display_custom_css=css&ver=4.8.1 several areas in it you are overriding the responsiveness with things like:

.content {
    width: 800px !important;
}
.content-sidebar .content,
.content-sidebar-sidebar .content,
.sidebar-content-sidebar .content {
    margin-left: 35px !important;
}

Your site is a WordPress site and the Theme seems to be using the Genesis Framework which I don't know anything about and probably couldn't really help further.

Saj