Somehow, my HTML and CSS won't work properly. My main doubt is in the span. Because it's all working on any other pages.
The footer is not detecting any object, so it is staying at the most top of the page. (I've also tried putting the footer on the <footer> tag and it still shows the same result.)
The situation is illustrated in the picture that is attached.
Here is my code snippet:
.aboutuspagetitle {
width: 100%;
color: rgba(159,74,74,1);
position: absolute;
top: 176px;
left: 660px;
font-family: Merriweather Sans;
font-weight: Bold;
font-size: 40px;
opacity: 1;
}
.aboutuspagedesc {
width: 100%;
color: rgba(0,0,0,1);
position: absolute;
top: 313px;
left: 30px;
font-family: Merriweather Sans;
font-weight: normal;
font-size: 33px;
opacity: 1;
text-align: left;
}
.footer {
clear: both;
position: absolute;
height: 75px;
background-color: #121212;
font-family: Karla Tamil Upright;
color: white;
text-align: center;
left: 0px;
width: 300%;
}
.foot1{
width: 304px;
color: rgba(255,255,255,1);
position: absolute;
top: 0px;
left: 568px;
font-family: Karla Tamil Upright;
font-weight: normal;
font-size: 18px;
opacity: 1;
text-align: center;
}
.foot2{
width: 304px;
color: rgba(255,255,255,1);
position: absolute;
top: 45px;
left: 568px;
font-size: 14px;
opacity: 1;
text-align: center;
}
<body>
<span class="aboutuspagetitle">ABOUT US</span>
<span class="aboutuspagedesc">
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut commodo nisl ut justo tincidunt, ac laoreet nunc elementum.</p>
</span>
<div class="footer">
<p class="foot1">THIS IS AN ADDRESS</p>
<span class="foot2">© 2021</span>
</div>
</body>
You just forgot to add bottom: 0; to the footer style. And position it using position: fixed; so it will stay at the bottom even when you scroll.
.aboutuspagetitle {
color: rgba(159,74,74,1);
font-family: Merriweather Sans;
font-weight: Bold;
font-size: 40px;
text-align: center;
}
.aboutuspagedesc {
width: 100%;
color: rgba(0,0,0,1);
font-family: Merriweather Sans;
font-weight: normal;
font-size: 33px;
text-align: left;
padding-bottom: 75px;
}
.footer {
display: flex;
position: fixed;
height: 75px;
background-color: #121212;
font-family: Karla Tamil Upright;
font-weight: normal;
color: white;
text-align: center;
left: 0px;
bottom:0;
width: 100%;
align-items: center;
justify-content: center;
flex-direction: column;
}
.foot1{
color: rgba(255,255,255,1);
font-size: 18px;
margin: 0;
}
.foot2{
color: rgba(255,255,255,1);
font-size: 14px;
}
<body>
<h1 class="aboutuspagetitle">ABOUT US</h1>
<span class="aboutuspagedesc">
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut commodo nisl ut justo tincidunt, ac laoreet nunc elementum.</p>
</span>
<footer class="footer">
<p class="foot1">THIS IS AN ADDRESS</p>
<span class="foot2">© 2021</span>
</footer>
</body>
Here are some advices.
First, as said in the comments, don't use position absolute on everything !! As the moment you'll try a different screen size, everything will be offest.
Second, try not to add too many style that won't do anything at all at the end. If you try something and it doesn't work, remove it from the style !
Related
I'm trying to make the parent div's left border the exact same height as the text inside the div.
Here's the problem:
My code is simple:
#box {
width: 500px;
padding-left: 2rem;
border-color: #01B288;
border-style: solid;
border-width: 0 0 0 3px;
}
h1 {
font-size: 80px;
font-family: Arial;
line-height: 1.2;
margin: 0;
padding: 0;
}
p {
font-size: 20px;
font-family: Arial;
line-height: 1.2;
margin: 0;
padding: 0;
}
<div id="box">
<h1>BIGGER FONT EXAMPLE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit ullanec fermentum enim.</p>
</div>
I found a solution that only works for one block of text, but I have 2 blocks inside the same div.
Use ::before CSS selector.
See the snippet below.
#box {
position: relative;
width: 500px;
height: auto;
padding-left: 2rem;
}
h1 {
font-size: 80px;
font-family: Arial;
line-height: 1.2;
margin: 0;
padding: 0;
}
p {
font-size: 20px;
font-family: Arial;
line-height: 1.2;
margin: 0;
padding: 0;
}
#box::before {
content: "";
width: 3px;
height: 95%;
background-color: #01B288;
left: 0;
bottom: 0;
position: absolute;
display: block;
}
<div id="box">
<h1>BIGGER FONT EXAMPLE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit ullanec fermentum enim.</p>
</div>
EDIT 1
Use #media query and set different height for mobile. It's currently set to 50% if the viewport is smaller than 576px (50% is obviously too much, so you can see the effect).
See the snippet below.
#box {
position: relative;
width: 500px;
height: auto;
padding-left: 2rem;
overflow: hidden;
}
h1 {
font-size: 80px;
font-family: Arial;
line-height: 1.2;
margin: 0;
padding: 0;
}
p {
font-size: 20px;
font-family: Arial;
line-height: 1.2;
margin: 0;
padding: 0;
}
#box::before {
content: "";
width: 3px;
height: 95%;
background-color: #01B288;
left: 0;
bottom: 0;
position: absolute;
display: block;
}
#media screen and (max-width: 576px) {
#box::before {
height: 50%;
}
}
<div id="box">
<h1>BIGGER FONT EXAMPLE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit ullanec fermentum enim.</p>
</div>
EDIT 2
What about if you remove line-height only from the first line?
See the snippet below.
#box {
position: relative;
width: 500px;
height: auto;
padding-left: 2rem;
overflow: hidden;
}
h1 {
font-size: 80px;
font-family: Arial;
line-height: 1.2;
margin: 0;
padding: 0;
}
p {
font-size: 20px;
font-family: Arial;
line-height: 1.2;
margin: 0;
padding: 0;
}
#box::before {
content: "";
width: 3px;
height: 100%;
background-color: #01B288;
left: 0;
bottom: 0;
position: absolute;
display: block;
}
h1:first-line {
line-height: 0.8;
}
<div id="box">
<h1>BIGGER FONT EXAMPLE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit ullanec fermentum enim.</p>
</div>
So have a look at the code below. If you remove the margins and set the line-height to the same height (1em for example) for all the elements in the div that its concerning then you can recreate the line like below.
It might be minimal but if your going to use a different font and it's a bit off just play with the calc(1em / ..). If your going to change te line-height you might try to fiddle with calc(..em / 8).
body{ font-family: Arial, sans-serif; }
h1{ font-size: 80px; }
p{ font-size: 20px; }
div > *{
position: relative;
line-height: 1em;
margin-top: 0;
margin-bottom: 0;
}
div > *::before {
position: absolute;
content: '';
border-left: 3px solid DarkSeaGreen;
height: 100%;
left: -5px;
}
div > *:first-child::before{ top: calc(1em / 8); }
div > *:last-child::before { bottom: calc(1em / 8); }
<div>
<h1>BIGGER FONT EXAMPLE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
Using :Before selector with height:93% of its parent and eyeballing it from top:5.5%
#box {
width: 500px;
padding-left: 2rem;
position:relative;
}
#box:before{
content:"";
position:absolute;
height:93%;
top:7%;
left:0;
border-color: #01B288;
border-style: solid;
border-width: 0 0 0 3px;
}
h1 {
font-size: 80px;
font-family: Arial;
line-height: 1.2;
margin:0;
padding:0;
}
p {
font-size: 20px;
font-family: Arial;
line-height: 1.2;
margin:0;
padding:0;
}
<div id="box">
<h1>BIGGER FONT EXAMPLE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit ullanec fermentum enim.</p>
</div>
After changing web size by zooming in or out, my buttons are overfloating and moving up/down. Idk what to do.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Rubik', sans-serif;
}
nav {
display: flex;
height: 6.250vw;
width: 100%;
background: #4D49F8;
align-items: center;
justify-content: space-between;
padding: 0vw 6.458vw 0vw 5.208vw;
}
nav ul {
display: flex;
list-style: none;
}
nav ul li {
margin-top: 0;
margin-bottom: 0;
margin-left: 0.260vw;
margin-right: 0.260vw;
}
nav ul li a {
color: #f2f2f2;
text-decoration: none;
font-size: 1.125vw;
font-weight: 700;
padding: 0.417vw 0.781vw;
border-radius: 0.104vw;
letter-spacing: 0.065vw;
border: 0.104vw solid #ffffff00;
}
.hpl-text {
position: absolute;
height: auto;
left: 6.458vw;
top: 11.979vw;
color: #FFFFFF;
font-family: Rubik;
font-style: normal;
font-weight: bold;
font-size: 3.333vw;
line-height: 3.958vw;
}
.hp-text {
position: absolute;
width: 42.240vw;
height: auto;
left: 6.458vw;
top: 17.708vw;
font-family: Rubik;
font-style: normal;
font-weight: normal;
font-size: 1.563vw;
line-height: 1.875vw;
color: #FFFFFF;
}
.add-btns {
position: absolute;
width: auto;
height: auto;
left: 1.042vw;
top: 28.125vw;
align-items: center;
justify-content: space-between;
padding: 0 6.458vw 0 5.208vw;
}
.add-btns ul {
display: flex;
list-style: none;
}
.add-btns li {
margin-top: 0vw;
margin-bottom: 0vw;
margin-left: 0.260vw;
margin-right: 1.042vw;
}
.add-btns li a {
color: #f2f2f2;
text-decoration: none;
font-size: 1.250vw;
font-weight: 700;
padding: 0.417vw 0.781vw;
border-radius: 0.104vw;
letter-spacing: 0.065vw;
border: 0.104vw solid #ffffff00;
}
#materialy-btn {
border: 0.104vw solid #FFFFFF;
}
#algorytmy-btn {
border: 0.104vw solid #ffffff00;
background: #F13CAF;
}
<nav>
<div class="logo">
<a href="index.html">
<img class="logo-sett" src="logo.png">
</a>
</div>
<ul>
<li>algorithm</li>
<li>schedule</li>
<li>resources</li>
<li>about us</li>
</ul>
</nav>
<div class="spacer layer1">
</div>
<div class="hp-container">
<h1 class="hpl-text">Lorem Ipsum</h1>
<p class="hp-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et bibendum enim. Vestibulum vitae libero vel ipsum non turpis pulvinar suscipit. In pharetra leo eros, quis blandit turpis dictum id.</p>
<div class="add-btns">
<ul>
<li>algorithm</li>
<li>resources</li>
</ul>
</div>
<img class="unicorn" src="unicorn.png">
<img class="img-programming" src="programming.png">
<img class="img-connection" src="connection.png">
<img class="img-algorithm" src="algorithm.png">
</div>
I know that is not the best idea to put position: absolute; on every element but its my first website.
I would be very grateful if someone could help me.
The problem I see is you use top: 28.125vw for .add-btns.
vw is the unit for view width which is the width of your parent container (body here).
So by zooming in/out, the position for .add-btns will not be the same way
By change it to vh or % (precentage) will make it work.
It is the same idea for nav. Also, I don't think it is always a good idea to use vw for all css style .
My suggestion is to use px instead for things like font and line-height and use css media query
Media queries are useful when you want to modify your site or app depending on a device's general type (such as print vs. screen) or specific characteristics and parameters (such as screen resolution or browser viewport width).
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Rubik', sans-serif;
}
nav{
display: flex;
height: 6.250vw;
width: 100%;
background: #4D49F8;
align-items: center;
justify-content: space-between;
padding: 0vw 6.458vw 0vw 5.208vw;
}
nav ul{
display: flex;
list-style: none;
}
nav ul li{
margin-top: 0;
margin-bottom: 0;
margin-left: 0.260vw;
margin-right: 0.260vw;
}
nav ul li a{
color: #f2f2f2;
text-decoration: none;
font-size: 1.125vw;
font-weight: 700;
padding: 0.417vw 0.781vw;
border-radius: 0.104vw;
letter-spacing: 0.065vw;
border: 0.104vw solid #ffffff00;
}
.hpl-text{
position: absolute;
height: auto;
left: 6.458vw;
top: 11.979vw;
color: #FFFFFF;
font-family: Rubik;
font-style: normal;
font-weight: bold;
font-size: 3.333vw;
line-height: 3.958vw;
}
.hp-text{
position: absolute;
width: 42.240vw;
height: auto;
left: 6.458vw;
top: 17.708vw;
font-family: Rubik;
font-style: normal;
font-weight: normal;
font-size: 1.563vw;
line-height: 1.875vw;
color: #FFFFFF;
}
.add-btns{
position: absolute;
width: auto;
height: auto;
left: 1.042vw;
top: 28.125vh;
align-items: center;
justify-content: space-between;
padding: 0 6.458vw 0 5.208vw;
}
.add-btns ul{
display: flex;
list-style: none;
}
.add-btns li{
margin-top: 0vw;
margin-bottom: 0vw;
margin-left: 0.260vw;
margin-right: 1.042vw;
}
.add-btns li a{
color: #f2f2f2;
text-decoration: none;
font-size: 1.250vw;
font-weight: 700;
padding: 0.417vw 0.781vw;
border-radius: 0.104vw;
letter-spacing: 0.065vw;
border: 0.104vw solid #ffffff00;
}
#materialy-btn{
border: 0.104vw solid #FFFFFF;
}
#algorytmy-btn{
border: 0.104vw solid #ffffff00;
background: #F13CAF;
}
<nav>
<div class="logo">
<a href="index.html">
<img class="logo-sett" src="logo.png">
</a>
</div>
<ul>
<li>algorithm</li>
<li>schedule</li>
<li>resources</li>
<li>about us</li>
</ul>
</nav>
<div class="spacer layer1">
</div>
<div class="hp-container">
<h1 class="hpl-text">Lorem Ipsum</h1>
<p class="hp-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et bibendum enim.
Vestibulum vitae libero vel ipsum non turpis pulvinar suscipit.
In pharetra leo eros, quis blandit turpis dictum id.</p>
<div class="add-btns">
<ul>
<li>algorithm</li>
<li>resources</li>
</ul>
</div>
<img class ="unicorn" src="unicorn.png">
<img class ="img-programming" src="programming.png">
<img class ="img-connection" src="connection.png">
<img class ="img-algorithm" src="algorithm.png">
</div>
So i'm working on a nav bar which should be aligned horizontally, but it won't. If i try to use
display: inline-block;
and then
float: left;
the navbar collides with the rest of my divisions
Here's my code:
http://jsfiddle.net/0p287vmb/
Try this:
nav
a {
font-family: Impact;
font-size: 15px;
color: black;
text-decoration: none;
display: inline-block;
width: 200px;
height: 50px;
text-align: center;
line-height: 50px;
margin: 0px;
padding: 0px;
}
nav
a:hover {
background-color: white;
display: inline-block;
}
I removed the commas because with commas it translates to nav & a. In your case removing it solves the problem also it overwrote the width of the nav that's why it doesn't seem to take up the whole width.
That's because you are overriding the width of the navbar in
nav,
a {
...
width: 200px;
...
}
and the display block here:
nav,
a:hover {
background-color: white;
display: inline-block;
}
Just move the navbar styling after nav,a:hover ..., and remove nav from the same place because you are also ovveriding the background color of the nav.
Also, on the last line it should be font-weight not text-weight.
* {
font-family: Verdana;
font-size: 14px;
margin: 0;
}
p {
padding 20px;
}
#wrapper {
width: 900px;
background-color: #ff3333;
margin: auto;
}
header {
background-color: #00c9fd;
width: 900px;
}
nav,
a {
font-family: Impact;
font-size: 15px;
color: black;
text-decoration: none;
display: inline-block;
width: 200px;
height: 50px;
text-align: center;
line-height: 50px;
margin: 0px;
padding: 0px;
float: left;
}
a:hover {
background-color: white;
display: inline-block;
}
nav {
background-color: #cccccc;
width: 900px;
}
#bigimage {
width: 900px;
}
#bigimage,
p {
color: #00c9fd;
background-color: #ffffff;
font-size: 12px;
}
main {
width: 900px;
}
article {
background-color: #cccccc;
width: 900px;
}
#contact {
background-color: #cccccc;
width: 900px;
}
footer {
background-color: #00c9fd;
width: 900px;
}
header,
h1 {
padding: 20px 0px 5px 0px;
color: rgb(255, 255, 255);
font-size: 30px;
font-family: Impact;
text-weight: normal;
}
<div id="wrapper">
<header>
<h1>SUPERCOMPUTERS</h1>
</header>
<nav>
Home
Meer informatie
Tijdlijn
</nav>
<div id="bigimage">
<img src="images/titanadfacomputer.jpg" alt="Titan 2 Supercomputer" width="900">
<p>
<b>Lorem</b> <br> ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis turpis sit amet blandit malesuada. Praesent at lacus rutrum, auctor justo sed, consectetur massa. Cras gravida vehicula vulputate. Ut magna odio, mollis non dolor
at, dignissim faucibus eros.
</p>
</div>
<main>
<article>hoi1</article>
<article>hoi2</article>
<article>hoi3</article>
</main>
<div id="contact">hoi4</div>
<footer>hoi5</footer>
</div>
Your selector was wrong. You wrote nav, a which would mean to apply those styles to both nav and a elements. Infact you needed nav a which means to only apply those styles to a elements that are children of nav elements.
nav a {
font-family: Impact;
font-size: 15px;
color: black;
text-decoration: none;
display: inline-block;
width: 200px;
height: 50px;
text-align: center;
line-height: 50px;
margin: 0px;
padding: 0px;
float: left;
}
You should remove the width from nav tag.
* {
font-family: Verdana;
font-size: 14px;
margin: 0;
}
p {
padding 20px;
}
#wrapper {
width: 900px;
background-color: #ff3333;
margin: auto;
}
header {
background-color: #00c9fd;
width: 900px;
}
nav {
background-color: #cccccc;
width: 900px;
}
a {
font-family: Impact;
font-size: 15px;
color: black;
text-decoration: none;
text-align: center;
line-height: 50px;
margin: 0px;
padding: 5px 10px;
float: left;
}
nav,
a:hover {
background-color: white;
display: inline-block;
}
#bigimage {
width: 900px;
}
#bigimage,
p {
color: #00c9fd;
background-color: #ffffff;
font-size: 12px;
}
main {
width: 900px;
}
article {
background-color: #cccccc;
width: 900px;
}
#contact {
background-color: #cccccc;
width: 900px;
}
footer {
background-color: #00c9fd;
width: 900px;
}
header,
h1 {
padding: 20px 0px 5px 0px;
color: rgb(255, 255, 255);
font-size: 30px;
font-family: Impact;
text-weight: normal;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style_new.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>SUPERCOMPUTERS</h1>
</header>
<nav>
Home
Meer informatie
Tijdlijn
</nav>
<div id="bigimage">
<img src="images/titanadfacomputer.jpg" alt="Titan 2 Supercomputer" width="900">
<p>
<b>Lorem</b> <br> ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis turpis sit amet blandit malesuada. Praesent at lacus rutrum, auctor justo sed, consectetur massa. Cras gravida vehicula vulputate. Ut magna odio, mollis non dolor
at, dignissim faucibus eros.
</p>
</div>
<main>
<article>hoi1</article>
<article>hoi2</article>
<article>hoi3</article>
</main>
<div id="contact">hoi4</div>
<footer>hoi5</footer>
</div>
</body>
</html>
I am making an author box. I want the person's picture at the right of the box while still inside the parent div. Whatever styles I apply, I can't make the picture appear inside the div and on the right smoothly, what is wrong here?
.authorBox {
background: #222222;
width: 100%;
padding:1.5em 2em;
position: relative;
border-left:15px solid #d53362;
box-sizing: border-box;
}
h5.author {
color: #fff;
font-weight: 600;
font-size: 1.5em;
}
h5.authorRole {
color: #d53362;
font-weight: 600;
font-size: 1.3em;
}
p.authorQuote {
color:#444;
font-style: italic;
margin-top: 20px;
font-size: 1.1em;
line-height: 1.5em;
}
.personImg1 {
width:100%;
height:100%;
background-size: cover;
background-image: url(../img/person1.jpeg);
}
.personContainer {
float:right;
}
<div class="authorBox">
<h5 class="author">First Last</h5>
<h5 class="authorRole">Job role goes here</h5>
<p class="authorQuote">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu erat at nisl laoreet ultrices"</p>
<div class="personContainer">
<div class="personImg1"></div>
</div>
</div>
First of all a div with no height and width won't be seen, so you div with the background has to have a defined width/height so you can see it.
and you put in the right by positioning it absolute and right:0 or a small amount just to push it from the edge.
*,
*:after,
*:before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.authorBox {
background: #222222;
width: 100%;
padding: 1.5em 2em;
position: relative;
border-left: 15px solid #d53362;
box-sizing: border-box;
}
h5.author {
color: #fff;
font-weight: 600;
font-size: 1.5em;
}
h5.authorRole {
color: #d53362;
font-weight: 600;
font-size: 1.3em;
}
p.authorQuote {
color: #444;
font-style: italic;
margin-top: 20px;
font-size: 1.1em;
line-height: 1.5em;
}
.personContainer {
height: 100px;
width: 300px;
position: absolute;
right: 10px;
top: 1.5em;
}
.personImg1 {
width: 100%;
height: 100%;
background-size: 100% 100%;
background-image: url('http://via.placeholder.com/350x150');
}
<div class="authorBox">
<h5 class="author">First Last</h5>
<h5 class="authorRole">Job role goes here</h5>
<p class="authorQuote">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu erat at nisl laoreet ultrices"
</p>
<div class="personContainer">
<div class="personImg1"></div>
</div>
</div>
Your .personImg1 has width:100%; and height:100%;, which means it gets the full width and height of its parent container - i.e. relative settings.
But the parent container's only CSS property is .personContainer { float:right; } – there are no width or height settings for it, resulting in zero height both for this container, the .personImg1 DIV and therefore also the background-image of .personImg1. So you need to assign some width and height to .personContainer
Actually you might want to consider to just use a regular img tag instead of that .personImg1 DIV and its background-image...
Are you locating your image properly from your folders?
Also, you can try this
.personImg1 {
display:block;
position:absolute;
background:url("../img/person1.jpeg");
background-size: 100% 100%;
background-repeat:no-repeat;
width:100%;
height:100%;
float:right;
bottom:0;
right:0;
}
Try this solution using flex box.
.authorBox {
background: #222222;
width: 100%;
padding: 1.5em 2em;
position: relative;
border-left: 15px solid #d53362;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
h5.author {
color: #fff;
font-weight: 600;
font-size: 1.5em;
}
h5.authorRole {
color: #d53362;
font-weight: 600;
font-size: 1.3em;
}
p.authorQuote {
color: #444;
font-style: italic;
margin-top: 20px;
font-size: 1.1em;
line-height: 1.5em;
}
.personImg1 {
width: 100px;
height: 100px;
background-size: cover;
background-image: url(../img/person1.jpeg);
}
<div class="authorBox">
<div class="colContainer">
<h5 class="author">First Last</h5>
<h5 class="authorRole">Job role goes here</h5>
<p class="authorQuote">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu erat
at nisl laoreet ultrices"</p>
</div>
<div class="personContainer">
<div class="personImg1"></div>
</div>
</div>
everyone.
I'm having a problem with responsive layout. On big screen everything looks fine, the problems emerge when I resize the browser. My navigation doesn't stretch in full width, even though Its width is 100%.
html for nav:
<header>
<div class="navigation">
<h3>lorem<span class="bold">ipsum</span></h3>
<div class="logo">
<h3>your<span class="red">logo</span></h3>
</div>
<div class="nav">
<ul>
<li class="active close">Home</li>
<li class="subMenuToggle">About us</li>
<li>Our work</li>
<li>Our process</li>
<li>Our people</li>
<li>Social</li>
<li>Get in touch</li>
<li><span>Hire</span></li>
<li><span>Careers</span></li>
</ul>
</div>
</div>
<div class="subMenu">
<div class="subNav">
<ul>
<li class="active2">WHAT WE DO</li>
<li>PEOPLE</li>
<li>SERVICES</li>
<li>CONTACT</li>
<li>VALUES</li>
</ul>
</div>
</div>
And, SCSS:
.navigation {
width: 100%;
height: 70px;
background: white;
.nav {
float: right;
margin-top: 10px;
box-sizing: border-box;
ul {
margin: 32 0;
li {
display: inline-block;
margin-right: 30px;
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
height: 38px;
font-family: 'Open Sans', sans-serif;
transition: all 200ms ease-in;
span {
color: gray;
}
a {
color: inherit;
display: inline-block;
height: 40px;
text-decoration: none;
}
&:active {
border-bottom: 4px solid rgb(185, 151, 106);
color: rgb(185, 151, 106);
}
}
.active {
border-bottom: 4px solid rgb(185, 151, 106);
color: rgb(185, 151, 106);
}
}
}
Also, images are doing the opposite, they go beyond to view port, so you need to scroll in order to see full width. Since all images are done the same way, he's a one example:
HTML:
<div class="container">
<div class="section1">
<img src="Assets/img/Header/Header.PNG" alt="header1">
<div class="contentBox1">
<p class="kicker2">Sed ut Perspiciatis</p>
<h2>Nemo Enim</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lobortis feugiat risus nec scelerisque. Sed sagittis magna quis sodales convallis. In convallis nec lacus sed fermentum. Integer ultrices felis ac quam commodo, a viverra enim condimentum. Praesent gravida magna in aliquet luctus.</p>
<button type="button" class="cta1">AT VERO EROS</button>
</div>
<div class="contentBox2">
<h2>QUIS AUTEM VEL<br> EUM DOLOR</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lobortis feugiat risus nec scelerisque. Sed sagittis magna quis sodales convallis.</p>
</div>
<div class="ImageBox1">
<img src="Assets/img/Header/img1.PNG" alt="img1">
</div>
</div>
</div>
and CSS:
.container {
margin: 0 auto 395px;
width: 1210px;
#include clearfix;
.section1 {
width: 1210px;
position: relative;
img {
width: 100%;
height: 480px;
z-index: -1;
}
.contentBox1 {
position: absolute;
width: 450px;
height: 543px;
background: white;
bottom: -270px;
left: 65px;
z-index: 1;
p.kicker2 {
margin: 80px 0 0 90px;
text-transform: uppercase;
color: $ThemeColor;
font-size: 14px;
font-family: 'Open Sans', sans-serif;
}
h2 {
margin: 18px 0 32px 90px;
text-transform: uppercase;
font-size: 45px;
font-family: 'Droid Serif', serif;
}
p {
margin: 0 50px 0 90px;
font-size: 20px;
font-family: 'Open Sans', sans-serif;
color: grey;
}
.cta1 {
background: white;
color: black;
font-size: 14px;
font-weight: bold;
justify-content: center;
width: 235px;
height: 60px;
border: 2px solid black;
margin: 37px 0 0 90px;
font-family: 'Open Sans', sans-serif;
&:hover {
cursor: pointer;
background: rgb(233, 233, 233);
}
&:active {
position: relative;
top: 1px;
}
}
}
.contentBox2 {
position: absolute;
width: 270px;
height: 274px;
background: rgb(40, 40, 40);
bottom: -270px;
left: 515px;
z-index: 1;
h2 {
color: $ThemeColor;
margin: 40px 0 18px 37px;
font-size: 20px;
font-family: 'Open Sans', sans-serif;
}
p {
color: rgb(153, 153, 153);
margin: 0 56px 0 37px;
font-size: 17px;
font-family: 'Open Sans', sans-serif;
}
}
.ImageBox1 {
img {
position: absolute;
width: 180px;
height: 182px;
bottom: -270px;
left: 965px;
z-index: 6;
}
}
}
It really drives me crazy. Also, why when I make a media query, for example, for (max-width: 700px), it starts to effect page much sooner, like around 1000px? It's like it's not in sync. This whole responsive layout gives me a headache...
Sorry for a long post...
P.S.
If you wanna see whole code, here's a gitHub reppo: https://github.com/Vukasin90/test
#media screen and (max-width: 770px) {
body {
min-width: 770px; }
body .navigation {
width: 100vh; /* <----- here*/
height: 70px;
background: white;
}
I think this might be an issue. Your navigation width has value in viewheight instead of viewwidth is that intentional?