Jump to content

Media Query NEED HELP!


Les Zackardises

Recommended Posts

Hello! 
I’m the owner of https://www.leszackardises.com and I would like to add my logo to the header (the logo is in files). 
But I really need helps for media-query, for my logo to be fully responsive on every devices, such as mobile and PC. 
Please, can someone provide me CSS codes?

954FF2B0-0724-4606-8C15-803FE796374C.png

Link to comment
Share on other sites

You can use following code for reference.0 :


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  height : ... /*whatever you want*/;
  width : ... /*whatever you want*/;
  /*any thing extra that you like to add like margin,padding,etc */
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  height : ... /*whatever you want*/;
  width : ... /*whatever you want*/;
  /*any thing extra that you like to add like margin,padding,etc */

}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  height : ... /*whatever you want*/;
  width : ... /*whatever you want*/;
  /*any thing extra that you like to add like margin,padding,etc */

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  height : ... /*whatever you want*/;
  width : ... /*whatever you want*/;
  /*any thing extra that you like to add like margin,padding,etc */

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  height : ... /*whatever you want*/;
  width : ... /*whatever you want*/;
  /*any thing extra that you like to add like margin,padding,etc */

}

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...