Html Question posted in
Some basic documentation can be found here.

Html – Please help me for the CSS media queries

I am developing a site for my class project, and now I am encountering a big problem to make it adjustable for small screens (phones), I was advised to use bootstrap, but I I have already finished the project, I wonder if someone can help me adapt it, here is the link to download the files from the site it only contains CSS and HTML files here it IS the link to download it text

I tried to make the Information page responsive, I think it’s the only one that’s fixed.

Tags:

2

Answers


  1. 0

    first learn the basic of the css then make a site, What is media query here you can learn about css, you should always ask about the problems u face but not the whole project u have, you should not expect someone else to solve your problem.

    Login or Signup to reply.
  2. 0

    I strongly recommend you to use the code text that brings stackoverflow instead of downloading a file. People may not trust in opening the file.
    Apart from that, media query, as @daveUI told is a very important thing of css however you should start from the basics, for example, I’m studying web developement and our roadmap is this one:
    basics of css and html > advance css > sass > bootstrap
    you may consider that. I give you a simple example of media query

    * {
  margin: 0;
  padding: 0;
}

nav {
  width: 100%;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
}

nav ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
  font-weight: bold;
  text-align: center;
}

nav ul li {
  display: inline-block;
  text-align: left;
}

nav ul li a {
  display: block;
  padding: 15px 10px;
  text-decoration: none;
  color: #444;
}

nav ul li a:hover {
  background-color: #ccc;
}

nav > a {
  display: none;
}

@media all and (max-width: 475px) {
  nav ul {
    display: none;
  } /* ocultamos el menú de navegación */
  nav > a /* mostramos el enlace con el texto Menú */ {
    display: block;
    padding: 0 1em 0;
    text-align: center;
    padding: 10px 15px;
    color: #fff;
    background-color: #0084b4;
    text-decoration: none;
    margin: 3px;
  }
  /* Con la clase desplegado el menú se mostrará verticalmente */
  ul.desplegado {
    display: block;
    list-style: none;
  }
  ul.desplegado li {
    display: block;
    text-align: center;
  }
  ul.desplegado li a {
    display: block;
    border-bottom: 1px solid #ccc;
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search