Hi all, having some issues with a nav element. I’ve used the same html code for both pages. One is an index page the other is a contact page. Here is what the nav element looks like:
<header>
<nav>
<ul>
<li class="touch"><a href="index.html">Home</a></li>
<li class="touch"><a href="">Projects</a></li>
<li class="touch"><a href="">Thoughts</a></li>
<li class="touch"><a href="">Resources</a></li>
<li class="touch"><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
Both pages have the same css files linked within head:
meyer_reset.css
design.css
layout.css
I’ve just finished my first @media query rules for (min-width: 320px) and everything was fine until I noticed the anchor tags within the nav element do not have the same size across web pages.
For some reason, the anchor tags are 30px high within index.html but are 29.33 px high within contact.html
I have no idea what the issue could be? I do have a form element within contact.html but not index.html
Otherwise, styles are applied consistently across both. Here are the two css files:
design.css
html {
font-size: 62.5%;
/* font-size 1em = 10px on default browser settings */
color: #383838;
}
* {
box-sizing: border-box;
}
body {
background-color: #fafcfb;
}
nav li {
font-family: 'Noto Sans JP', sans-serif;
font-weight: 300;
border-right: 1px solid #383838;
/* transition: border 0.5s; */
}
nav li:last-child {
border-right: none;
}
/* ul:hover > li {
border-right: none;
}
ul:hover > li:hover {
border-bottom: 1px solid #383838;
} */
/* un-comment for higher screen sizes */
nav a {
text-decoration: inherit;
color: inherit;
display: block;
}
h1, h2, h3 {
font-family: 'Roboto', sans-serif;
font-weight: 700;
}
p, li, label {
font-family: 'Noto Sans JP', sans-serif;
font-weight: 300;
}
input[type="text"], input[type="email"], input[type="textarea"] {
font-family: 'Noto Sans JP', sans-serif;
font-weight: 300;
}
button {
font-family: 'Noto Sans JP', sans-serif;
font-weight: 300;
background-color: #383838;
color: #fafcfb;
border-radius: 0.5em;
border: none;
max-width: fit-content;
}
@media (min-width: 320px) {
nav a {
font-size: inherit;
}
nav li {
font-size: 1rem;
transition: border 0.5s ease-in-out, background-color 0.5s ease-in-out;
}
h1 {
font-size: 3.6rem;
}
h2 {
font-size: 3rem;
}
h3 {
font-size: 2.5rem;
}
p, li, label, input[type="text"], input[type="email"], input[type="textarea"], button {
font-size: 1.5rem;
}
form {
font-size: 1.5rem;
}
.touch {
background-position: center;
background-size: cover;
transition: background 0.5s;
}
.touch:active {
background-color: #6e00cf;
color: white;
background-size: 100%;
transition: 0s;
}
}
layout.css
nav {
margin-bottom: 0.5em;
}
@media (min-width: 320px) {
nav ul {
display: flex;
justify-content: space-evenly;
}
nav li {
flex: 1 1 auto;
}
nav a {
padding: 1em;
}
h1 {
margin-bottom: 0.278em;
}
h2 {
margin-bottom: 0.333em;
}
h3 {
margin-bottom: 0.2em;
}
p {
margin-bottom: 0.667em;
line-height: 1.2em;
}
section ul {
margin-left: 2em;
margin-bottom: 1em;
}
section li {
line-height: 1.2em;
}
#sizing_form {
width: 100vw;
}
form > * {
display: flex;
flex-direction: column;
padding: 0.5em;
margin: 0.5em;
flex: 1 1 auto;
}
form button {
display: inline-block;
}
form label {
margin-bottom: 0.3em;
}
form input {
margin-bottom: 1em;
}
form textarea {
max-width: 100%;
}
}
#img {
max-width: 50vw;
margin: auto;
}
img {
max-width: 100%;
max-height: 100%;
}
