Theo's Typesafe Cult•3mo ago

need help in css

I want to build a responsive website, i know it can be achieved by the media queries and fluid layout but i don't know the best practices to do. I have the basic or say prior knowledge of the css. I need help (i.e doc or anything which is helpful🙂) 🫡

1 Reply

Jacob•3mo ago

To build responsive websites i would recommend using an abstraction on css like tailwind to speed up the process and keep things nice and clean: https://tailwindcss.com/ If you want to use normal css than i would recommend doing something like this:

/* Base styles */
.nav {
  width: 500px;
  marigin: auto;
}

/* ...other styles */

/* Screen size 1 */
@media screen and (max-width: 650px) {
  .nav {
    width: 300px;
  }
  
  /* ...other styles */
}

/* Screen size 2 */
@media screen and (max-width: 650px) {
  .nav {
    width: 100%;
  }
  
  /* ...other styles */
}

/* Contuine with screen sizes */

/* Base styles */
.nav {
  width: 500px;
  marigin: auto;
}

/* ...other styles */

/* Screen size 1 */
@media screen and (max-width: 650px) {
  .nav {
    width: 300px;
  }
  
  /* ...other styles */
}

/* Screen size 2 */
@media screen and (max-width: 650px) {
  .nav {
    width: 100%;
  }
  
  /* ...other styles */
}

/* Contuine with screen sizes */

Alternatively you could use instead for element you know you want a certain size of the page to use percentages or calculated values based off the screen size e.g width: 50% or width: calc(100% - 30px);

Tailwind CSS - Rapidly build modern websites without ever leaving y...

Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.

Gaming

Programming

need help in css