I made a [Technical Documentation Page] for the Pug preprocessor while learning the the basics of this preprocessor.
Any feedback is welcome, I want to improve.
Here is the link:
(https://codepen.io/huascararturo/pen/LYVgroR)
Thanks :]
I made a [Technical Documentation Page] for the Pug preprocessor while learning the the basics of this preprocessor.
Any feedback is welcome, I want to improve.
Here is the link:
(https://codepen.io/huascararturo/pen/LYVgroR)
Thanks :]
Hi, nice work, I’m also working with pug in one of my company’s projects and I like it a lot.
The details and structure of your page looks good, however there are a few problems that I’ve found:
img
tags don’t have alt
attributes, it’s not good for accessibility.border: 1px solid 5E606C;
, I believe this is not a valid value for hex color, it should be #5E606C
. Also postiion: absolute;
, it’s a typo.
#navbar{
position: fixed;
width: 160px;
padding-left: 10px;
padding-right: 10px;
padding-top: 30px;
text-align: left;
height: 100%;
background-color: #E5DFD3;
}
@media only screen and (max-width: 768px){
nav {
position:absolute;
}
}
Pay attention to #navbar
and nav
selector. Here is a thing which is called CSS Selector Specificity comes to play. Read the MDN document and you will understand why the rules in your media query will never be applied.
absolute
, I’m afraid it won’t change anything. You should find another way to make your page responsive. At the moment your site isn’t look good in small device screens.Anyway, I like your project in general, keep it up!
I made the changes you suggested,
Thank you!
@huascar.lopeze, some things to revisit;
<br>
tag to force line breaks