CODEWITHSUNDEEP
htmlcssprintingmedia-queries
Sébastien
Sébastien

Reputation: 5463

media query print not working with margin-left

In my application, I have a left sidebar which I want to hide when the user prints the page.

I am using the following media query :

@media print {
    #left_sidebar, #backend_navbar, #flash-messages, #header_buttons, .object_social, a:after, .hide_on_print  {
        display: none !important;
    }

    #page-wrapper {
        background-color: #ffffff !important;
        margin: 0 !important;
    }
}

i am hiding the sidebar, that works, but canceling the left margin on the wrapper does not work.

It works when I display the inspector and activate the emulation for css print with chrome and opera, it does not work if i press ctrl+P.

Do you have an idea of what I could do ?

Upvotes: 0

Views: 676

Answers (1)

jQueryster
jQueryster

Reputation: 169

I assume that the original css rule you have set is "margin-left: 50px" as an example of 50px. Try the same way in your media query like this "margin-left: 0". I think it worked for in the past. Might not be the best solution but it will probably get you going.

CSS

#page-wrapper { 
   margin-left: 50px; /* as an example */
}

@media print {
#left_sidebar, #backend_navbar, #flash-messages, #header_buttons, .object_social, a:after, .hide_on_print  {
    display: none !important;
}

#page-wrapper {
    background-color: #ffffff !important;
    margin-left: 0;    /** try without !important, if doesn't work, then add it back.**/
}

I Hope that helps.

Upvotes: 1

Related Questions