Issue
This should be simple.
My about.html
has an external stylesheet linking to it titled aboutstyle.css
. The code is contained in the head
element and matches the html file name exactly. For some reason though the styling does not come through.
What am I doing wrong here? My index.html
file has the EXACT same type of link, however that one is linking to style.css
. The index file has the styling showing up.
Here is my HTML below:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>#</title>
<link rel="stylesheet" type="text/css" href="aboutstyle.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
</head>
<body>
<!-- NAV -->
<div class="gray">
<nav class="navbar">
<div class="brand-title"><a href="index.html">Title</a></div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li><a href="about.html">About</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
</div>
<!-- PAGE CONTENT -->
<div class="Content">
<div class="child_2"><img src="https://images.unsplash.com/photo-1518806118471-f28b20a1d79d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"> </div>
<div class="child"><p>Hi there! ipsum dolor sit amet, consectetur adipiscing elit. Integer nisi orci, pretium suscipit malesuada vitae, auctor sed eros. Etiam turpis libero, accumsan ac mauris quis, vehicula porta purus. Aenean dignissim dignissim finibus. Nam egestas magna vel risus finibus, et venenatis neque suscipit. Nulla a molestie ligula. In porttitor lacus id arcu dapibus, a volutpat nibh congue. Pellentesque eu consectetur diam. Etiam sodales lacinia aliquam. Pellentesque convallis interdum orci a placerat. Praesent quis ultricies leo, sit amet sagittis ipsum. Sed eleifend nisi ante, consequat rhoncus turpis aliquam maximus. Suspendisse commodo purus quis nisi interdum consequat. Cras felis ex, bibendum ut ultricies vitae, dictum ac tortor.</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS:
* {margin: 0;
padding: 0;}
.gray {
background-color: #ebebeb;
}
.navbar {
display: flex;
position: relative;
justify-content: space-between;
align-items: center;
background-color: #ebebeb;
color: #004e98;
max-width: 1560px;
margin: 0 auto;
}
/* BRAND TITLE CSS ALL PROPERTIES */
.brand-title {
font-size: 1.7rem;
margin: 1rem 1rem 1rem 30px;
font-weight: bold;
text-decoration: none;
/* background-color: pink; */
/*leave margin, it affects space around ur name when mobile size*/
}
a:link {
text-decoration: none;
color: #004e98;
}
a:visited {
color: #004e98;
}
/* BRAND TITLE CSS ALL PROPERTIES END */
.navbar-links {
height: 100%;
}
.navbar-links ul {
display: flex; /*makes list horizontal, not vertical*/
margin-right: 30px;
padding: 0;
/* background-color: yellow; */
}
.navbar-links li {
list-style: none;
}
.navbar-links li a {
display: block;
text-decoration: none;
color: #004e98;
padding-left: 2rem;
font-size: 1.2rem;
}
.navbar-links li a:hover {
color: #ff6700;
}
.brand-title a:hover {
color: #ff6700;
text-decoration: none;
}
.toggle-button {
position: absolute;
top: 1.2rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
background-color: pink;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: #004e98; /* color of individual bars*/
border-radius: 10px;
}
@media (max-device-width: 640px) and (min-device-width: 320px) {
.Content {
display: grid !important;
grid-template-columns: 1fr !important;
grid-gap: 15px !important;
margin: 20px auto !important;
box-sizing: border-box !important;
padding-left: 15px !important;
padding-right: 15px !important;
}
.brand-title {
margin: 1rem 1rem 1rem 15px;
}
@media (max-width: 699px) {
.navbar {
flex-direction: column;
align-items: flex-start;
}
.toggle-button {
display: flex;
}
.navbar-links {
display: none;
width: 100%;
background-color: white;
}
.navbar-links ul {
width: 100%;
flex-direction: column;
margin-right: 0; /*this removes margin applied for large screens*/
}
.navbar-links ul li {
text-align: center;
/* background-color: #EC643E; /*orange bkg color of drop down*/ */
}
.navbar-links ul li a {
padding: 1rem 1rem;
/* border-style: solid; */
/* border-radius: 15px; */
background-color: ; /*blue button bkg*/
margin: 0;
color: #004e98;
}
.navbar-links.active {
display: flex;
background-color: #ebebeb;
}
.navbar-links li a:hover {
background-color: #ff6700; /*orange bar color upon hover*/
color: white;
}
.description {
padding-left: 30px;
}
}
.Content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
grid-gap: 30px;
max-width: 1500px;
padding-left: 30px;
padding-right: 30px;
margin: 70px auto;
/* background-color: #ffedba; */
}
.child {
/* background-color: lightgreen; */
color: white;
place-items: left;
}
.child > p {
color: black;
font-family: helvetica-light;
font-size: 1.5em;
margin-bottom: 10px;
line-height: 1.5em;
}
.child_2 {
display: grid;
place-items: top;
background-color: pink;
height: 700px;
}
img {
width: 100%;
height: 700px;
object-fit: cover;
border-radius: 15px;
}
/* Background Styles Only */
@import url('https://fonts.googleapis.com/css?family=Raleway');
* {
font-family: Raleway;
}
Solution
This media query in your code:
@media (max-device-width: 640px) and (min-device-width: 320px) { ...
...is opened, but never closed. (i.e. the closing }
bracket is missing)
Due to that the subsequent media query @media (max-width: 699px) {...
is even nested in the previous one (which, as said, is never closed), which can only cause erratic results - if any.
So all the rules following @media (max-device-width: 640px) and (min-device-width: 320px) { ...
only apply to smaller screens widths (i.e. mobile devices) or even not at all.
Fix the closing brackets of the media queries as you intend them and you should be set.
Answered By - Johannes
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.