Issue
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.
Solution
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;
}
}
Answered By - SamuehFDEZ
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.