How to get rid of media queries from the CSS file?

In the following css code, I want to rewrite the code without using media queries. Is it possible to get rid of media queries. I’ve the following related to media queries in my css right now:

 @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
 @media(min-width:768px) {
     DIV#Dem1Set-mainDiv body {
         margin-top: 50px;
     }
    
 }
 
 @media(min-width:768px) {
 DIV#Dem1Set-mainDiv   DIV#wrapper {
         padding-left: 225px;
     }
 
 @media(min-width:768px) {
     DIV#Dem1Set-mainDiv DIV.side-nav {
         position: fixed;
         
         top: 60px;
         left: 225px;
         width: 225px;
         margin-left: -225px;
         border: none;
         border-radius: 0;
         border-top: 1px rgba(0,0,0,.5) solid;
         overflow-y: auto;
         background-color: #222;
         bottom: 0;
         overflow-x: hidden;
         padding-bottom: 40px;
     }
 
     DIV#Dem1Set-mainDiv DIV.side-nav>li>a {
         width: 225px;
         border-bottom: 1px rgba(0,0,0,.3) solid;
     }
 
     DIV#Dem1Set-mainDiv DIV.side-nav li a:hover,
     DIV#Dem1Set-mainDiv DIV.side-nav li a:focus {
         outline: none;
         background-color: #1a242f !important;
     }
 }
 
 @media screen and (-webkit-min-device-pixel-ratio:0) { 
        DIV#Dem1Set-mainDiv DIV.custom-select select {
             padding-right:30px;    
         }
     }

If I am moving in right direction, I would probably need to get rid of this line : @import url(‘https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css’); first. I could include the font-awesome.min.css as a separate declaration using script tag

.For the following code :

 @media(min-width:768px) {
 DIV#Dem1Set-mainDiv body {
 margin-top: 50px;
 }
 
 }

Can I do something like this?

 DIV#Dem1Set-mainDiv body {
 margin-top: 50px;
 min-width:768px
 }

Similarly, for others as well?

Which begs the question: what is your reason for this strange desire?

Is it your wish to make the page static?

coothead

3 Likes

If wanting a responsive page or to reduce the CSS bloat then if using PHP, try the following:

  1. Make the following blocks of the page and move to separate files.
    a. top logo
    b. left menu
    c. middle content
    d. right content
    e. footer

  2. create a new blank page and gradually include each block and ensure it is responsive before including the next block

  3. also have links on the page to the W3.org HTML and CSS validation tools.

  4. each block should use the default 100% properties and only set max or min width declarations

  5. frequently change the page width by dragging the screen’s bottom right hand corner.

  6. small sections will make it easier to request forum help

Either post a link to the working test site or a “working page” that includes all of the relevent HTML and CSS and the contents of the <head> section plus all rationale for the modification sought.

It looks like you wrote a web site using the mobile first approach and now want to eliminate the ability to optimize the layout for a desktop.

I need a little help understanding what you are thinking. :thinking:

You can say that because I’m doing this plug-in development and want to keep things very simple. I don’t want any fancy stuff like browser resizing or take into account any mobile based development as far as CSS is concerned. That CSS works fine for stand alone desktop application that I built but not looking to use same thing for that specific plug-in development.

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