I just started with HTML and CSS a couple days ago and I'm stuck on this problem where the image margin won't change if in the :checked field. The one out of it works and it works if it modifies .Labels margins.
There was more code but it told me I couldn't post it because my post would be mostly code.
I don't know what I'm messing up here. Any help would be appreciated.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 0;
background: rgb(58, 58, 58);
font-family: 'Times New Roman', Times, serif;
}
h2,
h3,
ul,
li {
color: #888;
}
.Title {
color: #888;
text-align: center;
font-size: 50px;
list-style-type: none;
}
a {
color: rgb(37, 194, 186);
}
p {
background: rgb(88, 88, 88);
color: rgb(196, 196, 196);
border-radius: 10px;
margin-left: 50%;
margin: 0px 11%;
padding: 10px;
}
nav ul li {
display: inline-block;
list-style-type: none;
background: rgb(34, 34, 34);
border-radius: 12px;
padding: 5px 20px;
margin: 0px 0px 0px 2px;
transition: all .3s ease 0s;
}
nav ul li:hover {
background: rgb(14, 36, 60);
}
nav ul {
float: right;
margin: 0px 30px 0px 0px;
}
header h1 {
display: inline-block;
margin: 0px 30px;
}
.TopNav {
background: rgb(45, 150, 141);
margin: 0;
padding: 15px 15px 10px 15px;
}
.BirdPicture {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 1%;
margin-bottom: 1%;
}
body section h2 li {
list-style-type: none;
}
header nav h1 {
font-size: 28px;
}
.Slides {
display: flex;
margin-top: 1%;
}
.AllImages {
width: 300%;
display: flex;
}
.button:hover {
transform: scale(1.1);
}
a {
text-decoration: none;
}
.transparent {
background-color: transparent;
}
img {
border-radius: 10px;
}
.Boxes input {
display: none;
}
.Boxes {
display: flex;
justify-content: center;
margin: -3% 0px 0px 0px;
}
.Label:hover {
background: aquamarine;
}
.Label {
height: 20px;
width: 20px;
border: 3px solid #40D3Dc;
border-radius: 10px;
margin: 8px 20px;
display: inline-block;
transition: .3s;
}
.Slides {
/*running*/
margin-left: 5%;
}
#rad1:checked~.Slides {
/* not working */
margin-left: 0%;
}
#rad2:checked~.Slides {
margin-left: -20%;
}
#rad3:checked~.Slides {
margin-left: -40%;
}
<!DOCTYPE html>
<html>
<head>
<title>Curious Things</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="functions.js"></script>
</head>
<header>
<nav class="TopNav">
<h1><span style="color:rgb(44, 44, 44);">Wild World of Birds!</span></h1>
<ul>
<li class="button">
Home
</li>
<li class="button">
About
</li>
<li class="button">
Contact
</li>
<li class="button">
Help
</li>
<li class="button">
Info
</li>
</ul>
<script>
function highlight() {
document.header.nav.ul.li.style.background = blue;
}
</script>
</nav>
<div class="AllImages">
<div class="Slides">
<img class="MainImage" src="https://wonderfulengineering.com/wp-content/uploads/2016/01/Desktop-Background-11.jpg" width="1280" height="800">
<img class="MainImage" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwallup.net%2Fwp-content%2Fuploads%2F2019%2F05%2F10%2F338365-mountains-landscapes-nature-lone-tree-natural-scenery-pure-blue.jpg&f=1&nofb=1" width="1280" height="800">
<img class="MainImage" src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.pixelstalk.net%2Fwp-content%2Fuploads%2F2016%2F10%2FHd-desktop-free-nature-wallpaper-download.jpg&f=1&nofb=1" width="1280" height="800">
</div>
</div>
<div class="Boxes">
<input type="radio" name="imageSlider" id="radio1" class="box1">
<input type="radio" name="imageSlider" id="radio2" class="box2">
<input type="radio" name="imageSlider" id="radio3" class="box3">
<label for="radio1" class="Label" id="rad1"></label>
<label for="radio2" class="Label" id="rad2"></label>
<label for="radio3" class="Label" id="rad3"></label>
</div>
</header>
<body>
<section>
<h3>
<br>
<li class="Title">The Kingfisher</li>
<img class="BirdPicture" src="https://static01.nyt.com/images/2020/04/03/science/03TB-KINGFISHER1/03TB-KINGFISHER1-mediumSquareAt3X.jpg" width="900" height="900">
<p class="Birds">
<span style="color:paleturquoise;">Kingfishers</span> or <span style="color:paleturquoise;">Alcedinidae</span> are a family of small to medium-sized, brightly colored birds in the order Coraciiformes. They have a cosmopolitan distribution, with
most species found in the tropical regions of Africa, Asia, and Oceania. The family contains <span style="color:rgb(55, 216, 208)">144 species</span> and is divided into <span style="color:rgb(118, 228, 136)">three subfamalies</span> and
<span
style="color:rgb(60, 212, 167)">19 genera</span>. All kingfishers have large heads, long, sharp, pointed bills, short legs, and stubby tails. Most species have bright plumage with only small differences between the sexes. Most species are tropical in distribution, and a slight
majority are found only in forests. They consume a wide range of prey usually caught by swooping down from a perch. While kingfishers are usually thought to live near rivers and eat fish, many species live away from water and eat small invertebrates.
Like other members of their order, they nest in cavities, usually tunnels dug into the natural or artificial banks in the ground. Some kingfishers nest in arboreal termite nests. A few species, principally insular forms, are threatened with
<span style="color:rgb(233, 109, 93)">extinction</span>. In Britain, the word "kingfisher" normally refers to <span style="color:rgb(112, 221, 179)">the common kingfisher</span>.
</p>
</h3>
</section>
</body>
</html>
Related
I am trying to group my CV into section, by using the tabs 'Profile', 'Education', 'Skills'. 'Work Experience', 'Featured Projects'.
However, with the code snippets I have found and put together (and the help of W3schools), It seems that my tab functions are not working, but just list the Education "page" below the Profile "page".
What am I not considering? This is my first attempt with HTML and CSS. If you see any clean-up potential, please point it out.
#import url(https://weloveiconfonts.com/api/?family=entypo|fontawesome);
/* entypo */
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
/* fontawesome */
[class*="fontawesome-"]:before {
font-family: 'FontAwesome', sans-serif;
}
/* Utils */
.clear {
clear: both;
}
.purple {
color: #837c9a;
}
.block {
margin: 25px 30px;
}
.block h1 {
margin-left: -5px;
font-weight: 200;
}
.last.block {
margin-bottom: 110px;
}
.horizontal_list {
margin: 0;
padding: 0;
list-style-type: none;
}
.horizontal_list li {
float: left;
}
.horizontal_list li:before {
content: none;
}
.horizontal_list li {
padding-left: 0;
text-indent: 0;
}
.horizontal_line {
margin: 34px 0 0 30px;
height: 26px;
position: relative;
}
.line_left,
.line_right {
border-top: 1px solid #434247;
width: 305px;
margin-top: 13px;
}
.line_left {
float: left;
}
.line_right {
float: right;
}
.left_circle,
.central_circle,
.right_circle {
background: rgb(69, 68, 73);
background: rgba(255, 255, 255, 0.15);
position: absolute;
border-radius: 50px;
}
.left_circle,
.right_circle {
width: 13px;
height: 13px;
top: 7px;
}
.left_circle {
left: 314px;
}
.central_circle {
width: 26px;
height: 26px;
top: 0px;
left: 322px;
}
.right_circle {
left: 343px;
}
/* Main tags */
body {
background: url(https://www.toptal.com/designers/subtlepatterns/patterns/dark_wall.png) repeat;
margin: 0;
}
h1,
h2,
h3,
h4 {
font-family: 'Lato', Helvetica, sans-serif;
font-weight: 300;
color: #48DA9B;
}
h1 {
font-size: 48px;
font-weight: 300;
margin: 20px 0;
}
h2 {
font-size: 28px;
margin: 32px 0 24px;
}
h3 {
font-size: 24px;
}
h4 {
font-size: 18px;
font-weight: 400;
}
blockquote {
font-style: italic;
margin: 25px 0;
padding-left: 20px;
border-left: 2px solid #48DA9B;
}
blockquote,
p,
a,
li {
font-family: 'Lato', Helvetica, sans-serif;
font-weight: 300;
font-size: 15px;
color: #3c3b3f;
}
a:focus {
outline: none;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
padding-left: 1em;
text-indent: -.7em;
}
li:before {
content: "• ";
color: #837c9a;
font-size: 20px;
padding-right: 8px;
}
/* Containers size */
#main_container {
width: 960px;
margin: 0 auto;
}
#header {
height: 130px;
border-bottom: 1px solid #403F44;
}
.header_logotype_container {
width: 260px;
height: 130px;
border-right: 1px solid #403F44;
float: left;
}
.header_menu_container {
height: 130px;
width: 699px;
float: left;
}
.header_menu_container a {
font-family: 'Lato', Helvetica, sans-serif;
}
#left_col {
width: 260px;
float: left;
}
#content_container1 {
width: 699px;
border-left: 1px solid #403F44;
float: left;
}
#content_container2 {
width: 699px;
border-left: 1px solid #403F44;
float: left;
}
#content_container3 {
width: 699px;
border-left: 1px solid #403F44;
float: left;
}
#content_container4 {
width: 699px;
border-left: 1px solid #403F44;
float: left;
}
#content_container5 {
width: 699px;
border-left: 1px solid #403F44;
float: left;
}
#footer {
width: 960px;
height: 60px;
border-top: 1px solid #403F44;
display: inline-block;
}
/* HEADER */
.logotype_name {
text-transform: uppercase;
font-size: 32px;
margin: 43px 0 0;
}
.logotype_occupation {
text-transform: uppercase;
margin-top: 5px;
color: #5ce2af;
font-size: 14px;
letter-spacing: 2px;
padding-left: 7px;
}
.download_print_buttons {
width: 225px;
height: 45px;
float: right;
}
.download_print_buttons a {
text-decoration: none;
font-size: 12px;
font-family: 'Lato', Helvetica, sans-serif;
font-style: italic;
line-height: 45px;
padding: 16px 17px;
background: #ffffff;
}
.download_print_buttons a:hover {
background: #666666;
}
.download_print_buttons .icon {
color: #02070a;
padding-right: 6px;
font-style: normal;
font-size: 18px;
}
.icon-angle-double-right {
position: relative;
top: 2px;
}
.download_print_buttons a:hover .icon {
color: #e4e3e8;
}
.header_menu {
width: 699px;
margin-top: 40px;
margin-left: 5px;
}
.header_menu a {
text-decoration: none;
padding: 0 20px;
border-left: 1px solid #e4e3e8;
font-size: 16px;
font-weight: 400;
}
.header_menu a.no_border {
border-left: none;
}
.header_menu a:hover {
color: #837c9a;
}
/* LEFT NAV */
#left_nav h2 {
margin: 0;
font-size: 24px;
}
.profile_frame {
width: 230px;
height: 260px;
background: black;
border: 1px solid #403F44;
margin-top: 30px;
}
.profile_picture {
width: 210px;
height: 240px;
margin: 10px;
background: url(//s3-us-west-2.amazonaws.com/s.cdpn.io/86033/profile/profile-512_3.jpg) 100% /210px no-repeat;
}
.hello_content,
.contact_details_content {
margin-top: 25px;
}
.hello_content {
width: 230px;
}
.contact_details_content h2+p.purple {
margin-top: 10px;
}
.contact_details_content p {
margin: 0;
}
.contact_details_content p.purple {
margin-top: 25px;
}
.send_message_button,
.special_button {
margin-top: 25px;
display: block;
background: #48DA9B;
width: 230px;
height: 50px;
position: relative;
z-index: 1;
}
.cut1:after {
content: "";
position: absolute;
bottom: -19px;
left: -20px;
width: 30px;
height: 30px;
z-index: 9;
background: url(https://www.toptal.com/designers/subtlepatterns/patterns/dark_wall.png) repeat;
transform: rotate(45deg);
}
.cut2:before {
content: "";
position: absolute;
top: -19px;
right: -20px;
width: 30px;
height: 30px;
z-index: 9;
background: url(https://www.toptal.com/designers/subtlepatterns/patterns/dark_wall.png) repeat;
transform: rotate(45deg);
}
.content {
text-align: center;
color: #04080b;
width: 100%;
height: 40px;
position: absolute;
z-index: 2;
font: 18px 'Lato', Arial, sans-serif;
margin: 0;
padding: 16px 0 0;
top: -4px;
bottom: 10px;
border-top: 1px solid #403F44;
border-bottom: 1px solid #403F44;
}
.send_message_button:hover,
.special_button:hover {
background: #29C782;
}
.get_social_content {
margin-top: 15px;
}
.get_social_content h2 {
margin-bottom: 8px;
}
.social_icons {
margin-left: -8px;
}
.social_icons a {
font-size: 35px;
text-decoration: none;
color: #000507;
padding: 0;
padding: 0 5px;
}
.social_icons a span.invisible {
display: none;
}
.social_icons .facebook:hover {
background: #3b5998;
color: #dfe3ee;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
}
.social_icons .twitter:hover {
background: #00B0ED;
color: #fff;
border-top-left-radius: 50px;
border-bottom-right-radius: 50px;
}
.social_icons .linkedin:hover {
background: #007bb6;
color: #fff;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
}
.footer_name {
font-style: italic;
margin-top: 20px;
}
/* Profile Content */
.profile_quote {
position: relative;
/* margin-left: 5px; */
}
.profile_quote p {
font-size: 17px;
width: 455px;
}
.profile_quote .entypo-quote {
color: #3d3a41;
font-size: 80px;
font-style: normal;
position: absolute;
top: -20px;
right: 70px;
cursor: default;
}
.philosophy_content {
margin-top: 20px;
}
.philosophy_content p {
margin: 0;
width: 370px;
float: left;
}
.philosophy_content ul {
float: left;
padding-left: 40px;
}
#import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700");
#import url("https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css");
section {
display: none;
padding: 20px 0 0;
border-top: 1px solid #ddd;
}
input {
display: none;
}
label {
display: inline-block;
margin: 0 0 -1px;
padding: 12px 28.5px;
font-weight: 600;
text-align: center;
color: #bbb;
border: 1px solid transparent;
}
label:before {
font-family: fontawesome;
font-weight: normal;
margin-right: 10px;
}
label:hover {
color: #888;
cursor: pointer;
}
input:checked+label {
color: #555;
border: 1px solid #ddd;
border-top: 2px solid orange;
border-bottom: 1px solid #fff;
}
#tab1:checked~#content_container1,
#tab2:checked~#content_container2,
#tab3:checked~#content_container3,
#tab4:checked~#content_container4,
#tab5:checked~#content_container5 {
display: block;
}
#media screen and (max-width: 650px) {
label {
font-size: 0;
}
label:before {
margin: 0;
font-size: 18px;
}
}
#media screen and (max-width: 400px) {
label {
padding: 15px;
}
}
<link href='https://fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic' rel='stylesheet' type='text/css'>
<!-- MAIN CONTAINER -->
<div id="main_container">
<!-- HEADER -->
<div id="header">
<!-- LOGOTYPE/NAME -->
<div class="header_logotype_container">
<h1 class="logotype_name">Firstname <span class="purple">Lachname</span></h1>
<h2 class="logotype_occupation">Occupation</h2>
</div>
<!-- MAIN MENU -->
<main>
<div class="header_menu_container">
<ul class="download_print_buttons horizontal_list">
<li><span class="icon entypo-download"></span>Download CV</li>
<li><span class="icon entypo-print"></span>Print CV</li>
</ul>
<div class="clear tab"></div>
<ul class="header_menu horizontal_list">
<li><input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">Profile</label></li>
<li><input id="tab2" type="radio" name="tabs">
<label for="tab2">Education</label></li>
<li><input id="tab3" type="radio" name="tabs">
<label for="tab3">Skills</label></li>
<li><input id="tab4" type="radio" name="tabs">
<label for="tab4">Work Experience</label></li>
<li><input id="tab5" type="radio" name="tabs">
<label for="tab5">Featured Projects</label></li>
</ul>
</div>
</div>
<!-- LEFT COL -->
<div id="left_col">
<div class="profile_frame">
<div class="profile_picture"></div>
<!-- <img src="images/javier_latorre.jpg" alt="profile picture"> -->
</div>
<div class="hello_content">
<h2>Hello!</h2>
<p>I'm passionate about technology and human behavior, hardworker and a fast-learner with experience in around 5 different countries studying, working and volunteering. I believe that the right digital innovation is key to our society's wellbeing.
This motivates me to not only consume the latest technology but to be an active driver of change and development.</p>
</div>
<div class="contact_details_content">
<h2>Contact details</h2>
<p class="purple">Phone:</p>
<p>any numbers</p>
<p class="purple">Email:</p>
<p>first.last#xyz.com</p>
<p class="purple">Adress:</p>
<p>Street Nr.</p>
<p>Zip Location</p>
<p>Country</p>
</div>
<a href="first.last#xyz.com" class="send_message_button">
<span class="cut1"></span>
<span class="cut2"></span>
<span class="content">Send me a message <span class="fontawesome-double-angle-right"></span></span>
</a>
<div class="get_social_content">
<h2>Get social</h2>
<ul class="social_icons horizontal_list">
<li><a class="linkedin" href="https://www.linkedin.com/in/xyz/"><span class="entypo-linkedin-circled"></span><span class="invisible">LinkedIn</span></a></li>
</ul>
</div>
</div>
<!-- PROFILE CONTENT -->
<div id="content_container1">
<div class="block">
<h1>Profile</h1>
<blockquote class="profile_quote">
<p>"There is no end to education. It is not that you read a book, pass an examination, and finish with education. The whole of life, from the moment you are born to the moment you die, is a process of learning."</p>
<p>Jiddu Krishnamurti.</p>
<span class="entypo-quote"></span>
</blockquote>
</div>
<div class="block">
<h2>A few words about me</h2>
<p>Until now, in my life, I change from active moments with a lot of variety, challenges and improvisations, to moments of tranquility and stability, being difficult to stay in a place during a long time. I consider myself a tolerant and respectful
person with open mind and quite honest. I really like to listen people stories and backgrounds and their different experiences around the world.</p>
</div>
<div class="horizontal_line">
<div class="line_left"></div>
<div class="left_circle"></div>
<div class="central_circle"></div>
<div class="right_circle"></div>
<div class="line_right"></div>
</div>
<div class="block">
<h2>Philosophy</h2>
<p>I belive in ethic and moral not in imposed rules that you "have to" do or follow.</p>
<div class="philosophy_content">
<p>I believe life is made from different shades of grey, not from black and white. Furthermore, as a human being with rationality, I think it is our duty to take care of the world and treat others as one would like others to treat oneself. This way
of perceiving reality affects my beliefs and my way of behaving. Summarizing on several points:</p>
<ul>
<li>Pragmatic</li>
<li>Honest</li>
<li>Respectful</li>
<li>Open-minded</li>
<li>Coherent</li>
</ul>
<div class="clear"></div>
</div>
</div>
<div class="horizontal_line">
<div class="line_left"></div>
<div class="left_circle"></div>
<div class="central_circle"></div>
<div class="right_circle"></div>
<div class="line_right"></div>
</div>
<div class="last block">
<h2>Work Motivation</h2>
<p>I'm passionate about technology and human behavior, yet, these are only a few of my interests. others include:</p>
<ul>
<li>Visiting new places</li>
<li>Meeting people</li>
<li>Hiking and Biking</li>
<li>Bouldering</li>
<li>Cooking</li>
<li>Reading</li>
</ul>
</div>
</div>
<div class="clear"></div>
<!-- Education CONTENT -->
<div id="content_container2">
<div class="block">
<h1>Education Timeline</h1>
<blockquote class="profile_quote">
<p>"There is no end to education. It is not that you read a book, pass an examination, and finish with education. The whole of life, from the moment you are born to the moment you die, is a process of learning."</p>
<p>Jiddu Krishnamurti.</p>
<span class="entypo-quote"></span>
</blockquote>
</div>
<div class="block">
<h2>A few words about me</h2>
<p>Until now, in my life, I change from active moments with a lot of variety, challenges and improvisations, to moments of tranquility and stability, being difficult to stay in a place during a long time. I consider myself a tolerant and respectful
person with open mind and quite honest. I really like to listen people stories and backgrounds and their different experiences around the world.</p>
</div>
<div class="horizontal_line">
<div class="line_left"></div>
<div class="left_circle"></div>
<div class="central_circle"></div>
<div class="right_circle"></div>
<div class="line_right"></div>
</div>
<div class="block">
<h2>Philosophy</h2>
<p>I belive in ethic and moral not in imposed rules that you "have to" do or follow.</p>
<div class="philosophy_content">
<p>I believe life is made from different shades of grey, not from black and white. Furthermore, as a human being with rationality, I think it is our duty to take care of the world and treat others as one would like others to treat oneself. This way
of perceiving reality affects my beliefs and my way of behaving. Summarizing on several points:</p>
<ul>
<li>Pragmatic</li>
<li>Honest</li>
<li>Respectful</li>
<li>Open-minded</li>
<li>Coherent</li>
</ul>
<div class="clear"></div>
</div>
</div>
<div class="horizontal_line">
<div class="line_left"></div>
<div class="left_circle"></div>
<div class="central_circle"></div>
<div class="right_circle"></div>
<div class="line_right"></div>
</div>
<div class="last block">
<h2>Work Motivation</h2>
<p>I'm passionate about technology and human behavior, yet, these are only a few of my interests. others include:</p>
<ul>
<li>Visiting new places</li>
<li>Meeting people</li>
<li>Hiking and Biking</li>
<li>Bouldering</li>
<li>Cooking</li>
<li>Reading</li>
</ul>
</div>
</div>
<div class="clear"></div>
</main>
<!-- FOOTER -->
<div id="footer">
<p class="footer_name">Fist Last CV 2022</p>
</div>
</div>
Add this simple js function to switch the tabs. Also add one class (here tabcontainer) in different tab containers. Add style display:none to next tabs initially, the style will be changed to display:block by js
function openTab(tab) {
var i;
var x = document.getElementsByClassName("tabcontainer");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(tab).style.display = "block";
}
<ul class="header_menu horizontal_list">
<li>
<input id="tab1" type="radio" name="tabs" checked onclick="openTab('content_container1')">
<label for="tab1">Profile</label>
</li>
<li>
<input id="tab2" type="radio" name="tabs" onclick="openTab('content_container2')">
<label for="tab2">Education</label></li>
<li>
<input id="tab3" type="radio" name="tabs" onclick="openTab('content_container3')">
<label for="tab3">Skills</label>
</li>
<li>
<input id="tab4" type="radio" name="tabs" onclick="openTab('content_container4')">
<label for="tab4">Work Experience</label>
</li>
<li>
<input id="tab5" type="radio" name="tabs" onclick="openTab('content_container5')">
<label for="tab5">Featured Projects</label>
</li>
</ul>
<div id="content_container1" class="tabcontainer">
<div class="block">
<h1>Profile</h1>
<blockquote class="profile_quote">
<p>"Tab 1: About Profile"</p>
<p>Jiddu Krishnamurti.</p>
<span class="entypo-quote"></span>
</blockquote>
</div>
</div>
<div class="clear"></div>
<!-- Education CONTENT -->
<div id="content_container2" class="tabcontainer" style="display:none">
<div class="block">
<h1>Education Timeline</h1>
<blockquote class="profile_quote">
<p>"Tab 3: About Education Timeline."</p>
<p>Test Author2</p>
<span class="entypo-quote"></span>
</blockquote>
</div>
</div>
<div id="content_container3" class="tabcontainer" style="display:none">
<div class="block">
<h1>Skills</h1>
<blockquote class="profile_quote">
<p>"Tab 3: About Skills."</p>
<p>Test Author3</p>
<span class="entypo-quote"></span>
</blockquote>
</div>
</div>
<div class="clear"></div>
Here is my code:
https://codepen.io/malyikaj/pen/QWKNVzN
#import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
/* * { border: 1px solid black; } */
html {}
* {
box-sizing: border-box;
}
.slutty-title {
text-align: font-size: 40px;
font-family: 'Dancing Script', cursive;
color: #d98695;
font-size: 40px;
font-weight: bold;
padding-left: 120px;
}
.brownie-title {
font-size: 30px;
font-weight: bold;
color: #76341e;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 440px;
font-family: arial;
margin-left: 50px;
}
.italic {
font-style: italic;
font-weight: bolder;
}
.bold {
font-weight: bold;
color: #76341e;
letter-spacing: 1.5px;
}
p {
line-height: 1.4;
padding: 0px 20px;
}
.price {
font-size: 28px;
text-align: center;
color: #d98695;
}
.card button {
border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #d98695;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
.card button:hover {
opacity: 0.7;
}
body {
font-family: 'Montserrat', sans-serif;
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
nav {
background: #d98695;
height: 80px;
width: 100vw;
}
label.logo {
color: white;
font-size: 65px;
line-height: 80px;
padding: 0 100px;
font-weight: bold;
font-family: 'Dancing Script', cursive;
letter-spacing: 3px;
}
label.logo-2 {
margin: -100px;
line-height: 80px;
color: white;
font-size: 25px;
padding: 0px;
font-family: 'Dancing Script', cursive;
letter-spacing: 1px;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
width: 40%;
}
.card:hover {
box-shadow: 0 16px 24px 0 rgba(0, 0, 0, 0.2);
}
.container {
padding: 2px 16px;
}
nav ul {
float: right;
margin-right: 20px;
}
nav ul li {
display: inline-block;
line-height: 80px;
margin: 0 5px;
}
nav ul li a {
color: white;
font-size: 17px;
padding: 7px 13px;
border-radius: 3px;
text-decoration: none;
}
a:hover {
transition: .3s;
text-transform: none;
background: #df99a6;
}
.checkbtn {
font-size: 30px;
color: #df99a6;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check {
display: none;
}
#page-container {
position: relative;
min-height: 100vh;
}
footer {
box-sizing: border-box;
place-items: center;
font-family: 'Poppins', sans-serif;
text-align: right;
background-color: #d98695;
color: white;
padding: 0px;
position: absolute;
bottom: 0;
height: 60px;
width: 100vw;
/* position: fixed;
z-index: 1; */
}
#media (max-width: 952px) {
label.logo {
font-size: 30px;
padding-left: 50px;
}
nav ul li a {
font-size: 16px;
}
}
#media (max-width: 858px) {
.checkbtn {
display: block;
}
ul {
position: fixed;
width: 100%;
height: 100vh;
background: #2c3e50;
top: 80px;
left: -100%;
text-align: center;
transition: all .5s;
}
nav ul li {
display: block;
margin: 50px 0;
line-height: 30px;
}
nav ul li a {
font-size: 20px;
}
a:hover,
a.active {
background: none;
color: #e18e96;
}
#check:checked~ul {
left: 0;
}
}
section {
background: url(bg1.jpg) no-repeat;
background-size: cover;
height: calc(100vh - 80px);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>Sweet T's Vegan Bakery</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Montserrat:wght#100;400&family=Nerko+One&display=swap" rel="stylesheet">
</head>
<body>
<div>
<header>
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
<label class="logo">Sweet T's </label>
<label class="logo-2">Vegan Bakery</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Order</li>
<li>About</li>
<li>FAQ's</li>
<li>Contact </li>
</ul>
</nav>
</header>
<main>
<h2></h2>
<div class="card">
<img src="http://placeimg.com/440/280/any">
<alt="Denim Jeans" style="width:100%">
<div class=fonts>
<span class="slutty-title">Slutty</span>
<span class="brownie-title">Brownie</span>
<p>One layer of chocolate chip cookie, Oreo cookie center, topped with a dense layer of brownie.
<br>
<br> You may not be its <span class="italic">first</span>, but this is the first ever product by Sweet T’s. Heart shaped because it's made with love.
<br>
<br>
<span class="bold">Gluten free. Nut free. Vegan.</span>
<p class="price">$5.00</p>
</p>
<p><button>Add to Cart</button></p>
</div>
<!--
background-color: #434a52;
Slutty Brownie
Bite into a base layer of chocolate chip cookie, middle layer of Oreo Cookie, and decadent a top layer of brownie. Gluten free. Nut Free. Vegan.
You may not be its first…but this is THE first ever product from Sweet T’s. Heart shaped, because it was made with love!
Slutty Blondie
Vegan white Chocolate Blondie with vanilla Oreo style in the middle and cookie on the bottom. Blondes have more fun.Decadent.
Slutty Pumpkin Cheesecake
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Caramel Apple Pie Cookie
Sugar cookie dough baked with apple pie filling. Topped with sugar cookie lattice pie top. These are the newest homemade sweets that makes an utterly divine dessert. A great desert when you’re craving apple pie—but not the ENTIRE apple pie.
Pumpkin Cheesecake Muffin
Came for the fall and stayed a favorite. *Seasonal* #NomNom
S’Mores Cookies
Chocolate chip cookie with melted vegan marshmallow in the middle. Outrageously good.
Chocolate Chip Cookies
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Birthday? Anniversary? Work Event? Customizable orders available, just contact us.
Find us:
Uber Eats
GrubHub
Bougie Brews: 52 Main St, Yonkers, NY 10701
VeganDale Food Fest
Baked a cake for Wikipedia
Cupcake cutie boutique: 8 S 6th Ave, Mt Vernon, NY 10550 (Enjoy two dollar Tuesdays)
Vegan Grille 1201 1201 Castle Hill Ave, The Bronx, NY 10462
Pizza Gusta Super Foodtown of Throggs Neck : 2945-65 Bruckner Blvd, The Bronx, NY 10465
Plantega
Stay sweet my friends.
Instagram : sweet_teees
Phone: 914-297-9439
Email Us: sweettvegan#gmail.com
Sweet simple vegan included my sweets in their 2020 holiday gift guide.
made with all natural and wholesome ingredients.
</main>
Email Code
Email Us
Email sign up
<input type="text" placeholder="Enter email">
<input type="submit" value="Signup">
-->
<div id="page-container">
<div id="content-wrap">
<!-- all other page content -->
</div>
<footer id="footer">
<p class=c opyright>©2021 Sweet T's Vegan Bakery</p>
</footer>
</div>
</body>
</html>
My footer is also not expanding to the full length of the viewport. And my product card is going all the way to the bottom of the page. Any ideas?
The footer tag was inside the #card div and the #card div had a margin on the left side. This is why it was not using the entire screen width.
You would need to move it to inside the <body> tag and just after the #card div. But after doing it the footer would go on a crazy position because it had a position: absolute, just remove the position property and it will work. I'll just put in the snippet.
And your card heigh problem was that you were using height 100vh in the #page-container this was making the div expand beyond necessary. Changing it to height: 100% would work. And I also would suggest setting margin and padding in the bottom of the #page-container.
Like this:
#import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
/* * { border: 1px solid black; } */
html {
}
* {
box-sizing: border-box;
}
.slutty-title {
text-align: font-size: 40px;
font-family: 'Dancing Script', cursive;
color: #d98695;
font-size: 40px;
font-weight: bold;
padding-left: 120px;
}
.brownie-title {
font-size: 30px;
font-weight: bold;
color: #76341e;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 440px;
font-family: arial;
margin-left: 50px;
}
.italic {
font-style: italic;
font-weight: bolder;
}
.bold {
font-weight: bold;
color: #76341e;
letter-spacing: 1.5px;
}
p {
line-height: 1.4;
padding: 0px 20px;
}
.price {
font-size: 28px;
text-align: center;
color: #d98695;
}
.card button {
border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #d98695;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
.card button:hover {
opacity: 0.7;
}
body{
font-family: 'Montserrat', sans-serif;
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
nav{
background: #d98695;
height: 80px;
width: 100vw;
}
label.logo {
color: white;
font-size: 65px;
line-height: 80px;
padding: 0 100px;
font-weight: bold;
font-family: 'Dancing Script', cursive;
letter-spacing: 3px;
}
label.logo-2 {
margin: -100px;
line-height: 80px;
color: white;
font-size: 25px;
padding: 0px;
font-family: 'Dancing Script', cursive;
letter-spacing: 1px;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 40%;
}
.card:hover {
box-shadow: 0 16px 24px 0 rgba(0,0,0,0.2);
}
.container {
padding: 2px 16px;
}
nav ul{
float: right;
margin-right: 20px;
}
nav ul li{
display: inline-block;
line-height: 80px;
margin: 0 5px;
}
nav ul li a{
color: white;
font-size: 17px;
padding: 7px 13px;
border-radius: 3px;
text-decoration: none;
}
a:hover{
transition: .3s;
text-transform: none;
background: #df99a6;
}
.checkbtn{
font-size: 30px;
color: #df99a6;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check{
display: none;
}
<!-- changed -->
#page-container {
position: relative;
min-height: 100%;
padding-bottom: 15px;
margin-bottom: 15px;
}
<!-- changed -->
footer {
box-sizing: border-box;
place-items: center;
font-family: 'Poppins', sans-serif;
text-align: right;
background-color: #d98695;
color: white;
padding: 0px;
bottom: 0;
height: 60px;
width: 100vw;
z-index: 1; */
}
#media (max-width: 952px){
label.logo{
font-size: 30px;
padding-left: 50px;
}
nav ul li a{
font-size: 16px;
}
}
#media (max-width: 858px){
.checkbtn{
display: block;
}
ul{
position: fixed;
width: 100%;
height: 100vh;
background: #2c3e50;
top: 80px;
left: -100%;
text-align: center;
transition: all .5s;
}
nav ul li{
display: block;
margin: 50px 0;
line-height: 30px;
}
nav ul li a{
font-size: 20px;
}
a:hover,a.active{
background: none;
color: #e18e96;
}
#check:checked ~ ul{
left: 0;
}
}
section{
background: url(bg1.jpg) no-repeat;
background-size: cover;
height: calc(100vh - 80px);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>Sweet T's Vegan Bakery</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Montserrat:wght#100;400&family=Nerko+One&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
<label class="logo">Sweet T's </label>
<label class="logo-2">Vegan Bakery</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Order</li>
<li>About</li>
<li>FAQ's</li>
<li>Contact </li>
</ul>
</nav>
</header>
<main>
<h2></h2>
<div class="card">
<img src="http://placeimg.com/440/280/any"><alt="Denim Jeans" style="width:100%">
<div class =fonts>
<span class ="slutty-title">Slutty</span>
<span class ="brownie-title">Brownie</span>
<p>One layer of chocolate chip cookie, Oreo cookie center, topped with a dense layer of brownie.
<br>
<br>
You may not be its <span class="italic">first</span>, but this is the first ever product by Sweet T’s. Heart shaped because it's made with love.
<br>
<br>
<span class="bold">Gluten free. Nut free. Vegan.</span>
<p class="price">$5.00</p>
</p>
<p><button>Add to Cart</button></p>
</div>
<div id="page-container">
</div>
<div id="content-wrap">
<!-- all other page content -->
</div>
</div>
<!-- changed location -->
<footer id="footer">
<p class= copyright>©2021 Sweet T's Vegan Bakery</p>
</footer>
</body>
</html>
For more tips how to improve your code I would suggest:
CSS Units and How to debug your front-end
You just forgot to close your <div> tag. Once you fix that, your problem goes away.
<div class="card">
<img src="http://placeimg.com/440/280/any">
<alt="Denim Jeans" style="width:100%">
<div class=fonts>
<span class="slutty-title">Slutty</span>
<span class="brownie-title">Brownie</span>
<p>One layer of chocolate chip cookie, Oreo cookie center, topped with a dense layer of brownie.
<br>
<br> You may not be its <span class="italic">first</span>, but this is the first ever product by Sweet T’s. Heart shaped because it's made with love.
<br>
<br>
<span class="bold">Gluten free. Nut free. Vegan.</span>
<p class="price">$5.00</p>
</p>
<p><button>Add to Cart</button></p>
</div>
</div>
I've added </div> at the end.
I am having an issue with resizing and a div. When I resize the browser, then scroll over to the right, I see that the bottom div is not extending all the way despite my width at 100% I have tried position and width tags and am at a loss. Any ideas? The form is moving into the white space and not sticking to the background div area.
https://codepen.io/CaptainMattyP/pen/mdJRKpo
body {
width: 100%;
margin: 0px;
background-image: url("https://wallpaperplay.com/walls/full/d/8/b/329997.jpg");
background-attachment: fixed;
font-family: 'Ubuntu Condensed';
right: 0px;
}
h1 {
text-align: center;
padding: 200px 0px 0px 1320px;
position: absolute;
white-space: nowrap;
}
#navbar {
height: 50px;
width: 100%;
background-image: url("https://www.setaswall.com/wp-content/uploads/2018/02/Grey-Abstract-Wallpaper-16-1920x1080.jpg");
background-color: rgb(80, 80, 86);
border-bottom: solid;
border-width: 1px;
border-color: black;
position: fixed;
top: 0px;
z-index: 5
}
a,
.white {
text-decoration: none;
color: white;
}
a:hover {
color: limegreen;
}
ul {
padding: 0px 0px 0px 1160px;
white-space: nowrap;
}
li {
color: white;
display: inline;
padding: 40px;
}
#welcome-section {
height: 800px;
}
.picture {
margin: 300px 0px 0px 1340px;
border-radius: 50%;
position: absolute;
z-index: 1;
box-shadow: 10px 10px 10px grey;
border-style: solid;
border-width: 1px;
}
#footer {
height: 230px;
background-image: url("https://www.setaswall.com/wp-content/uploads/2018/02/Grey-Abstract-Wallpaper-16-1920x1080.jpg");
background-size: auto;
border-top: solid;
bottom: 0px;
right: 0px;
border-width: 1px;
}
#footer-info1 {
color: white;
padding: 80px 0px 0px 150px;
positon: absolute;
}
#copyright {
color: white;
padding: 0px 0px 0px 900px;
positon: absolute;
}
#contact-info {
padding: 20px 10vw 0px 1600px;
position: absolute;
}
.block {
display: block;
}
#media (max-height: 100%) {
#welcome-section {
height: 800px;
}
}
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Condensed&display=swap" rel="stylesheet">
<main>
<nav id="navbar">
<ul>
<li>About</li>
<li>Skills</li>
<li>Projects</li>
<li>Contact</li>
<li>FCC Profile</li>
</ul>
</nav>
<h1>Hi, I'm Matt. <br>Future Front-End Developer.</h1>
<div id="welcome-section">
<img class="picture" src="https://i.ibb.co/71rD5ND/picture.png">
</div>
<section id="footer">
<form style="display: block" id="contact-info">
<label for="email" class="white">E-mail Address:
<input id="email" type="email" name="emailaddress" class="block">
</label>
<label for="inquiry" class="white">Comments or Inquiries:
<textarea rows="8" cols="25" style="resize: none" class="block">
</textarea>
</label>
<button type="submit">Submit</button>
</form>
<div id="footer-info1">
Matthew Paciello <br><br> 561-305-5761
<br> Boca Raton, FL<br> mpaciell#gmail.com
</div>
<div id="copyright">
#Matthew Paciello
</div>
</section>
</main>
I'm going to take a guess here that you have a very wide monitor that you are doing most of your work on. You have hard coded almost all of the padding and margins used in your code to place the different items on the page. This is the root of your problem. When you put something to width: 100% what is actually occurring is you are telling the browser to give a width of 100% of the current screen size. This means it will be subjective to the size of the browser that is displaying the page. The rest of your padding and margins though are set to a hard pixel value. Combine these two different display styles together and you can have a page that displays different portions off of the initial screen.
I think you might want something closer to this. I do still use hard coded padding values, but they are padding based on dynamic values instead of absolute values so it allows for easier reflowing and resizing of the page so it looks better for more screen sizes.
body {
width: 100%;
margin: 0px;
background-image: url("https://wallpaperplay.com/walls/full/d/8/b/329997.jpg");
background-attachment: fixed;
font-family: 'Ubuntu Condensed';
right: 0px;
}
h1 {
text-align: center;
white-space: nowrap;
}
#navbar {
height: 50px;
width: 100%;
background-image: url("https://www.setaswall.com/wp-content/uploads/2018/02/Grey-Abstract-Wallpaper-16-1920x1080.jpg");
background-color: rgb(80, 80, 86);
border-bottom: solid;
border-width: 1px;
border-color: black;
top: 0px;
z-index: 5
}
a,
.white {
text-decoration: none;
color: white;
}
a:hover {
color: limegreen;
}
ul {
white-space: nowrap;
text-align: right;
padding-right: 10px;
padding-top: 10px;
margin: 0px;
}
li {
color: white;
display: inline;
padding-left: 10px;
}
#welcome-section {
padding-bottom: 40px;
text-align: center;
}
.picture {
border-radius: 50%;
z-index: 1;
box-shadow: 10px 10px 10px grey;
border-style: solid;
border-width: 1px;
}
#footer {
background-image: url("https://www.setaswall.com/wp-content/uploads/2018/02/Grey-Abstract-Wallpaper-16-1920x1080.jpg");
background-size: auto;
border-top: solid;
bottom: 0px;
right: 0px;
border-width: 1px;
overflow: auto;
}
#footer-info1 {
color: white;
text-align: right;
padding-right: 10px;
float: right;
}
#email-section {
float: left;
padding-bottom: 10px;
padding-left: 10px;
}
.block {
display: block;
}
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Condensed&display=swap" rel="stylesheet">
<main>
<nav id="navbar">
<ul>
<li>About</li>
<li>Skills</li>
<li>Projects</li>
<li>Contact</li>
<li>FCC Profile</li>
</ul>
</nav>
<h1>Hi, I'm Matt. <br>Future Front-End Developer.</h1>
<div id="welcome-section">
<img class="picture" src="https://i.ibb.co/71rD5ND/picture.png">
</div>
<section id="footer">
<div id="email-section">
<form style="display: block" id="contact-info">
<label for="email" class="white">E-mail Address:
<input id="email" type="email" name="emailaddress" class="block">
</label>
<label for="inquiry" class="white">Comments or Inquiries:
<textarea rows="8" cols="25" style="resize: none" class="block">
</textarea>
</label>
<button type="submit">Submit</button>
</form>
</div>
<div id="footer-info1">
Matthew Paciello <br><br> 561-305-5761
<br> Boca Raton, FL<br> mpaciell#gmail.com
<div id="copyright">
#Matthew Paciello
</div>
</div>
</section>
</main>
If I'm reading this right, I suggest adjusting the bottom area and use a flex like so:
body {
width: 100%;
margin: 0px;
background-image: url("https://wallpaperplay.com/walls/full/d/8/b/329997.jpg");
background-attachment: fixed;
font-family: 'Ubuntu Condensed';
right: 0px;
}
h1 {
text-align: center;
padding: 200px 0px 0px 1320px;
position: absolute;
white-space: nowrap;
}
#navbar {
height: 50px;
width: 100%;
background-image: url("https://www.setaswall.com/wp-content/uploads/2018/02/Grey-Abstract-Wallpaper-16-1920x1080.jpg");
background-color: rgb(80, 80, 86);
border-bottom: solid;
border-width: 1px;
border-color: black;
position: fixed;
top: 0px;
z-index: 5
}
a,
.white {
text-decoration: none;
color: white;
}
a:hover {
color: limegreen;
}
ul {
padding: 0px 0px 0px 1160px;
white-space: nowrap;
}
li {
color: white;
display: inline;
padding: 40px;
}
#welcome-section {
height: 800px;
}
.picture {
margin: 300px 0px 0px 1340px;
border-radius: 50%;
position: absolute;
z-index: 1;
box-shadow: 10px 10px 10px grey;
border-style: solid;
border-width: 1px;
}
#footer {
height: 230px;
background-image: url("https://www.setaswall.com/wp-content/uploads/2018/02/Grey-Abstract-Wallpaper-16-1920x1080.jpg");
background-size: auto;
border-top: solid;
bottom: 0px;
right: 0px;
border-width: 1px;
display:flex;
flex-direction:row;
justify-content: space-between;
align-items: center;
}
#footer-info1 {
color: white;
}
#copyright {
color: white;
}
#contact-info {
}
.block {
display: block;
}
#media (max-height: 100%) {
#welcome-section {
height: 800px;
}
}
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Condensed&display=swap" rel="stylesheet">
<main>
<nav id="navbar">
<ul>
<li>About</li>
<li>Skills</li>
<li>Projects</li>
<li>Contact</li>
<li>FCC Profile</li>
</ul>
</nav>
<h1>Hi, I'm Matt. <br>Future Front-End Developer.</h1>
<div id="welcome-section">
<img class="picture" src="https://i.ibb.co/71rD5ND/picture.png">
</div>
<section id="footer">
<div id="footer-info1">
Matthew Paciello <br><br> 561-305-5761
<br> Boca Raton, FL<br> mpaciell#gmail.com
</div>
<div id="copyright">
#Matthew Paciello
</div>
<form style="display: block" id="contact-info">
<label for="email" class="white">E-mail Address:
<input id="email" type="email" name="emailaddress" class="block">
</label>
<label for="inquiry" class="white">Comments or Inquiries:
<textarea rows="8" cols="25" style="resize: none" class="block">
</textarea>
</label>
<button type="submit">Submit</button>
</form>
</section>
</main>
Your footer is 100% but:
The form in your footer have a 10vw padding-right which make the page horizontally scrollabe. And that white space on your right. either bring the form more to the left by reducing the padding-left or padding-right.
The position of the image is set by margin-top and margin-left which also plays a roll in making the page horizontally off, and scrollable. You can bring the image closer to the left by reducing margin-left of it. Or use other methods to center the image, if necessary.
Problem: The code in the css stylesheet under .row is suppose to center the navigation menu (nav) so it has the same space from left side as the title. However, it doesn't work.
I tried to use the same css properties on the nav section and that works (that part is commented out). I'm also using the .row class for the features section further down so need to get it to work, but I haven't found any solutions to it. Thanks in advance for any help.
Underneath is my code:
/*
Orange color: #e67e22
*/
/* ---------------------------------------------- */
/* Basic setup */
/* ---------------------------------------------- */
* {
margin: 0%;
padding: 0%;
box-sizing: border-box;
/* border: 1px solid;*/
}
html,
body {
background-color: #fff;
color: #555;
font-family: "Lato", "Arial", "sans-serif";
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
}
}
/* ---------------------------------------------- */
/* REUSABLE COMPONENTS */
/* ---------------------------------------------- */
.row { /* SITE DOESNT ADDJUST TO ROW; WORKS WITH NAV */
max-width: 1140px;
margin: 0 auto;
}
nav{
width: 100%;
max-width: 1140px;
margin: 0 auto;
}
section {
padding: 80px 0;
}
.box {
padding: 1%;
}
/* ---------HEADINGS-------- */
h1,
h2,
h3 {
font-weight: 300;
text-transform: uppercase;
}
h1 { /* H1 doesnt adjust according to relative font-size, nor margins */
font-size: 240%;
margin-top: 0;
margin-bottom: 30px;
color: #fff;
word-spacing: 4px;
letter-spacing: 1px;
}
h2 {
font-size: 180%;
word-spacing: 2px;
text-align: center;
margin-bottom: 30px;
letter-spacing: 1px;
}
h2:after {
display: block;
height: 2px;
background-color: #e67e22;
content: " ";
width: 100px;
margin: 0 auto;
margin-top: 30px;
}
h3 {
font-size: 110%;
margin-bottom: 15px;
}
/* ---------PARAGRAPHS-------- */
.long-copy {
line-height: 145%;
width: 70%;
margin-left: 15%;
}
.box p {
font-size: 90%;
line-height: 145%;
}
/* ---------ICONS-------- */
.icon-big {
font-size: 350%;
display: block;
color: #e67e22;
margin-bottom: 10px;
}
/* ---------BUTTONS-------- */
.btn:link,
.btn:visited {
display: inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
border-radius: 200px;
transition: background-color 0.2s;
}
.btn-full:link,
.btn-full:visited {
background-color: #e67e22;
border: 1px solid #e67e22;
color: #fff;
margin-right: 15px;
}
.btn-ghost:link,
.btn-ghost:visited {
border: 1px solid #e67e22;
color: #e67e22;
}
.btn:hover,
.btn:active {
background-color: #cf6d17;
}
.btn-full:hover,
.btn-full:active {
border: 1px solid #cf6d17;
color: #fff;
}
.btn-ghost:hover,
.btn-ghost:active {
border: 1px solid #cf6d17;
color: #fff;
}
/* ---------------------------------------------- */
/* HEADER */
/* ---------------------------------------------- */
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.70), rgba(0, 0, 0, 0.70)), url(img/hero.jpg);
background-size: cover;
background-position: center;
height: 100vh;
}
.hero-textbox{
position: absolute;
width: 1140px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.logo {
height: 100px;
width: auto;
float: left;
margin-top: 20px;
}
.main-nav {
float: right;
list-style: none;
margin-top: 60px;
}
.main-nav li {
display: inline-block;
margin-left: 40px;
}
.main-nav li a:link,
.main-nav li a:visited {
padding-bottom: 8px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 90%;
border-bottom: 2px solid transparent;
transition: border-bottom 0,2;
}
.main-nav li a:hover,
.main-nav li a:active {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 90%;
border-bottom: 2px solid #e67e22;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,300i,400&display=swap" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.css">
<title>Omnifood</title>
</head>
<body>
<header>
<nav>
<div class="row">
<img src="resources/img/logo-white.png" alt="Omnifood logo"class="logo">
<ul class="main-nav">
<li>Food delivery</li>
<li>How it works</li>
<li>Our cities</li>
<li>Sign up</li>
</ul>
</div>
</nav>
<div class="hero-textbox">
<h1>Goodbye junk food. <br> Hello super healthy meals.</h1>
<a class="btn btn-full" href="#">I’m hungry</a>
<a class="btn btn-ghost" href="#">Show me more</a>
</div>
</header>
<section class="section-features">
<div class="row">
<h2>Get food fast — not fast food</h2>
<p class="long-copy">
Hello, we’re Omnifood, your new premium food delivery service. We know you’re always busy. No time for cooking. So let us take care of that, we’re really good at it, we promise!
</p>
</div>
<div class="row">
<div class="col span-1-of-4 box">
<i class="ion-ios-infinite-outline icon-big"></i>
<h3>Up to 365 days/year</h3>
<p>
Never cook again! We really mean that. Our subscription plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.
</p>
</div>
<div class="col span-2-of-4 box">
<i class="ion-ios-stopwatch-outline icon-big"></i>
<h3>Ready in 20 minutes</h3>
<p>
You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We work with the best chefs in each town to ensure that you're 100% happy.
</p>
</div>
<div class="col span-3-of-4 box">
<i class="ion-ios-nutrition-outline icon-big"></i>
<h3>100% organic</h3>
<p>
All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better!
</p>
</div>
<div class="col span-4-of-4 box">
<i class="ion-ios-cart-outline icon-big"></i>
<h3>Order anything</h3>
<p>
We don't limit your creativity, which means you can order whatever you feel like. You can also choose from our menu containing over 100 delicious meals. It's up to you!
</p>
</div>
</div>
</section>
</body>
</html>
The answer is - extra }, closing html,body
/*
Orange color: #e67e22
*/
/* ---------------------------------------------- */
/* Basic setup */
/* ---------------------------------------------- */
* {
margin: 0%;
padding: 0%;
box-sizing: border-box;
/* border: 1px solid;*/
}
html,
body {
background-color: #fff;
color: #555;
font-family: "Lato", "Arial", "sans-serif";
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
}
/* ---------------------------------------------- */
/* REUSABLE COMPONENTS */
/* ---------------------------------------------- */
.row { /* SITE DOESNT ADDJUST TO ROW; WORKS WITH NAV */
max-width: 1140px;
margin: 0 auto;
}
nav{
width: 100%;
max-width: 1140px;
margin: 0 auto;
}
section {
padding: 80px 0;
}
.box {
padding: 1%;
}
/* ---------HEADINGS-------- */
h1,
h2,
h3 {
font-weight: 300;
text-transform: uppercase;
}
h1 { /* H1 doesnt adjust according to relative font-size, nor margins */
font-size: 240%;
margin-top: 0;
margin-bottom: 30px;
color: #fff;
word-spacing: 4px;
letter-spacing: 1px;
}
h2 {
font-size: 180%;
word-spacing: 2px;
text-align: center;
margin-bottom: 30px;
letter-spacing: 1px;
}
h2:after {
display: block;
height: 2px;
background-color: #e67e22;
content: " ";
width: 100px;
margin: 0 auto;
margin-top: 30px;
}
h3 {
font-size: 110%;
margin-bottom: 15px;
}
/* ---------PARAGRAPHS-------- */
.long-copy {
line-height: 145%;
width: 70%;
margin-left: 15%;
}
.box p {
font-size: 90%;
line-height: 145%;
}
/* ---------ICONS-------- */
.icon-big {
font-size: 350%;
display: block;
color: #e67e22;
margin-bottom: 10px;
}
/* ---------BUTTONS-------- */
.btn:link,
.btn:visited {
display: inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
border-radius: 200px;
transition: background-color 0.2s;
}
.btn-full:link,
.btn-full:visited {
background-color: #e67e22;
border: 1px solid #e67e22;
color: #fff;
margin-right: 15px;
}
.btn-ghost:link,
.btn-ghost:visited {
border: 1px solid #e67e22;
color: #e67e22;
}
.btn:hover,
.btn:active {
background-color: #cf6d17;
}
.btn-full:hover,
.btn-full:active {
border: 1px solid #cf6d17;
color: #fff;
}
.btn-ghost:hover,
.btn-ghost:active {
border: 1px solid #cf6d17;
color: #fff;
}
/* ---------------------------------------------- */
/* HEADER */
/* ---------------------------------------------- */
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.70), rgba(0, 0, 0, 0.70)), url(img/hero.jpg);
background-size: cover;
background-position: center;
height: 100vh;
}
.hero-textbox{
position: absolute;
width: 1140px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.logo {
height: 100px;
width: auto;
float: left;
margin-top: 20px;
}
.main-nav {
float: right;
list-style: none;
margin-top: 60px;
}
.main-nav li {
display: inline-block;
margin-left: 40px;
}
.main-nav li a:link,
.main-nav li a:visited {
padding-bottom: 8px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 90%;
border-bottom: 2px solid transparent;
transition: border-bottom 0,2;
}
.main-nav li a:hover,
.main-nav li a:active {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 90%;
border-bottom: 2px solid #e67e22;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,300i,400&display=swap" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.css">
<title>Omnifood</title>
</head>
<body>
<header>
<nav>
<div class="row">
<img src="resources/img/logo-white.png" alt="Omnifood logo"class="logo">
<ul class="main-nav">
<li>Food delivery</li>
<li>How it works</li>
<li>Our cities</li>
<li>Sign up</li>
</ul>
</div>
</nav>
<div class="hero-textbox">
<h1>Goodbye junk food. <br> Hello super healthy meals.</h1>
<a class="btn btn-full" href="#">I’m hungry</a>
<a class="btn btn-ghost" href="#">Show me more</a>
</div>
</header>
<section class="section-features">
<div class="row">
<h2>Get food fast — not fast food</h2>
<p class="long-copy">
Hello, we’re Omnifood, your new premium food delivery service. We know you’re always busy. No time for cooking. So let us take care of that, we’re really good at it, we promise!
</p>
</div>
<div class="row">
<div class="col span-1-of-4 box">
<i class="ion-ios-infinite-outline icon-big"></i>
<h3>Up to 365 days/year</h3>
<p>
Never cook again! We really mean that. Our subscription plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.
</p>
</div>
<div class="col span-2-of-4 box">
<i class="ion-ios-stopwatch-outline icon-big"></i>
<h3>Ready in 20 minutes</h3>
<p>
You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We work with the best chefs in each town to ensure that you're 100% happy.
</p>
</div>
<div class="col span-3-of-4 box">
<i class="ion-ios-nutrition-outline icon-big"></i>
<h3>100% organic</h3>
<p>
All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better!
</p>
</div>
<div class="col span-4-of-4 box">
<i class="ion-ios-cart-outline icon-big"></i>
<h3>Order anything</h3>
<p>
We don't limit your creativity, which means you can order whatever you feel like. You can also choose from our menu containing over 100 delicious meals. It's up to you!
</p>
</div>
</div>
</section>
</body>
</html>
hi there just change the style of .row like this :
.row {
width: 100%;
position: absolute;
text-align: center;
display: inline-grid;
margin-top: -147px;
right: 70px;
}
I am studying CSS and creating a responsive web page. I have started working in a media query. When I maximize the screen, all works as expected, but when I reduce its size, the content that does not fit in the viewport is hidden, and a white space stays in its place. That space can be seen scrolling the screen to side. Why is that space appearing instead the rest of the content? I also don't understand why my content doesn't fit in the screen, because I am using percentage values to elements' width. My code is below:
#charset "UTF-8";
#import url('https://fonts.googleapis.com/css?family=Doppio+One|Open+Sans&display=swap');
html, body, *, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body{
width: 99.13vw;
}
body{
font-family: 'Open Sans', sans-serif;
margin: 0;
}
h2, h3{
margin-top: 10px;
margin-bottom: 10px;
}
a{
text-decoration: none;
transition: 0.2s linear;
}
header{
background-color: rgb(93, 158, 76);
display: flex;
align-items: center;
padding: 10px 30px;
width: 100%;
}
header img{
width: 45px;
}
header h1{
font-family: 'Doppio One', cursive;
margin-left: 10px;
color: rgb(214, 245, 210);
}
nav ul{
display: flex;
list-style: none;
}
nav ul li a{
margin-left: 55px;
}
nav a{
color: rgb(230, 245, 229);
font-size: 17px;
}
nav a:hover{
background-color: rgb(143, 182, 135);
padding: 10px 15px;
margin: 0 -15px 0 40px;
}
nav img{
display: none;
width: 30px;
height: 35px;
}
#firstsection{
background-image: url(Images/coffee-3289259_1280.jpg);
background-size: cover;
height: 900px;
position: relative;
}
#firstsection div{
margin-top: 0;
position: absolute;
left: 100px;
top: 150px;
color: rgb(47, 119, 27);
text-align: center;
}
#firstsection h1{
margin-bottom: 45px;
}
#firstsection div a{
font-weight: bold;
border: 2px solid rgb(47, 119, 27);
padding: 13px 30px;
font-size: 16.5px;
color: rgb(47, 119, 27);
}
#firstsection div a:hover{
color: rgb(133, 163, 131);
border: 2px solid rgb(133, 163, 131);
}
#textboxes{
display: flex;
margin-top: 50px;
flex-wrap: wrap;
}
#textboxes div{
text-align: center;
margin: 15px 60px;
border: 2px solid rgb(93, 158, 76);
padding: 30px 30px;
width: 27%;
}
#middlesection img:first-of-type{
width: 55px;
}
#middlesection h2{
text-align: center;
width: 100%;
}
#lastsection{
text-align: center;
}
#lastsection img{
width: 30%;
margin: 100px auto 0px;
}
#lastsection div{
position: relative;
bottom: 450px;
}
#lastsection div a:visited{
color: blue;
}
footer{
background-color: rgb(93, 158, 76);
padding: 15px;
color: rgb(214, 245, 210);
font-size: 14px;
display: flex;
justify-content: center;
align-items: center;
}
footer img{
height: 35px;
width: 35px;
margin-right: 15px;
}
footer div{
text-align: center;
}
#media screen and (max-width: 800px){
#textboxes div{
width: 100%;
}
#lastsection img{
width: 85%;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Finances | Manage your money easily</title>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="Control you spending and manage your money easily. Your finances by the short hairs." name="description">
<meta content="Bruno M. B. Sdoukos" name="author">
<meta content="finances, managing money, spending control" name="keywords">
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<img src="Images/icons8-fund-accounting-80.png"> <a href="index.html">
<h1>Finances</h1></a>
<nav>
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Contact us
</li>
<li>
Register
</li>
<li>
Login
</li>
</ul>
</nav>
</header>
<main>
<section id="firstsection">
<div>
<h1>Manage your money easily, anywhere, anytime.</h1>Get started
</div>
</section>
<section id="middlesection">
<div id="textboxes">
<div>
<img src="Images/icons8-increase-64.png">
<h3>Concrete data</h3>
<p>Simple but concrete data that are the answer to all the quesions about your current money, spending and.</p>
</div>
<div>
<img src="Images/icons8-navigation-toolbar-left-filled-50%20(1).png">
<h3>Easy interface</h3>
<p>An interface easy to use, made to you who want to manage your money faster and with no problems.</p>
</div>
<div>
<img src="Images/icons8-natural-user-interface-2-filled-50.png">
<h3>Fast access</h3>
<p>No complications that make you lose time. Just some clicks and done, you are in Finances, with all you need.</p>
</div>
</div>
</section>
<section id="lastsection">
<img src="Images/board-1362851_1280.png">
<div>
<h2>Register now and enjoy<br>
the best of Finances.</h2>Create an account
</div>
</section>
</main>
<footer>
<img src="Images/icons8-fund-accounting-80.png">
<div>
<p>A work of Bruno Sdoukos.</p>
</div>
</footer>
</body>
</html>
Actually it's not hidden. The links in the header just happen to have a color that's close enough to white that the contrast is really low. They're overflowing the right side of the header when the header's content is wider than the viewport.
The simplest solution would be to give flex-wrap:wrap to header, but I recommend using a media query to override the display:flex instead (for better backwards compatibility).
#charset "UTF-8";
#import url('https://fonts.googleapis.com/css?family=Doppio+One|Open+Sans&display=swap');
html,
body,
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 99.13vw;
}
body {
font-family: 'Open Sans', sans-serif;
margin: 0;
}
h2,
h3 {
margin-top: 10px;
margin-bottom: 10px;
}
a {
text-decoration: none;
transition: 0.2s linear;
}
header {
background-color: rgb(93, 158, 76);
display: flex;
align-items: center;
padding: 10px 30px;
width: 100%;
}
#media all and (max-width:56em) {
header {
display: block;
}
header>a,
header>nav {
display: inline-block;
}
}
header img {
width: 45px;
}
header h1 {
font-family: 'Doppio One', cursive;
margin-left: 10px;
color: rgb(214, 245, 210);
}
nav ul {
display: flex;
list-style: none;
}
nav ul li a {
margin-left: 55px;
}
nav a {
color: rgb(230, 245, 229);
font-size: 17px;
}
nav a:hover {
background-color: rgb(143, 182, 135);
padding: 10px 15px;
margin: 0 -15px 0 40px;
}
nav img {
display: none;
width: 30px;
height: 35px;
}
#firstsection {
background-image: url(Images/coffee-3289259_1280.jpg);
background-size: cover;
height: 900px;
position: relative;
}
#firstsection div {
margin-top: 0;
position: absolute;
left: 100px;
top: 150px;
color: rgb(47, 119, 27);
text-align: center;
}
#firstsection h1 {
margin-bottom: 45px;
}
#firstsection div a {
font-weight: bold;
border: 2px solid rgb(47, 119, 27);
padding: 13px 30px;
font-size: 16.5px;
color: rgb(47, 119, 27);
}
#firstsection div a:hover {
color: rgb(133, 163, 131);
border: 2px solid rgb(133, 163, 131);
}
#textboxes {
display: flex;
margin-top: 50px;
flex-wrap: wrap;
}
#textboxes div {
text-align: center;
margin: 15px 60px;
border: 2px solid rgb(93, 158, 76);
padding: 30px 30px;
width: 27%;
}
#middlesection img:first-of-type {
width: 55px;
}
#middlesection h2 {
text-align: center;
width: 100%;
}
#lastsection {
text-align: center;
}
#lastsection img {
width: 30%;
margin: 100px auto 0px;
}
#lastsection div {
position: relative;
bottom: 450px;
}
#lastsection div a:visited {
color: blue;
}
footer {
background-color: rgb(93, 158, 76);
padding: 15px;
color: rgb(214, 245, 210);
font-size: 14px;
display: flex;
justify-content: center;
align-items: center;
}
footer img {
height: 35px;
width: 35px;
margin-right: 15px;
}
footer div {
text-align: center;
}
#media screen and (max-width: 800px) {
#textboxes div {
width: 100%;
}
#lastsection img {
width: 85%;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Finances | Manage your money easily</title>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="Control you spending and manage your money easily. Your finances by the short hairs." name="description">
<meta content="Bruno M. B. Sdoukos" name="author">
<meta content="finances, managing money, spending control" name="keywords">
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<img src="Images/icons8-fund-accounting-80.png">
<a href="index.html">
<h1>Finances</h1>
</a>
<nav>
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Contact us
</li>
<li>
Register
</li>
<li>
Login
</li>
</ul>
</nav>
</header>
<main>
<section id="firstsection">
<div>
<h1>Manage your money easily, anywhere, anytime.</h1>Get started
</div>
</section>
<section id="middlesection">
<div id="textboxes">
<div>
<img src="Images/icons8-increase-64.png">
<h3>Concrete data</h3>
<p>Simple but concrete data that are the answer to all the quesions about your current money, spending and.</p>
</div>
<div>
<img src="Images/icons8-navigation-toolbar-left-filled-50%20(1).png">
<h3>Easy interface</h3>
<p>An interface easy to use, made to you who want to manage your money faster and with no problems.</p>
</div>
<div>
<img src="Images/icons8-natural-user-interface-2-filled-50.png">
<h3>Fast access</h3>
<p>No complications that make you lose time. Just some clicks and done, you are in Finances, with all you need.</p>
</div>
</div>
</section>
<section id="lastsection">
<img src="Images/board-1362851_1280.png">
<div>
<h2>Register now and enjoy<br> the best of Finances.</h2>Create an account
</div>
</section>
</main>
<footer>
<img src="Images/icons8-fund-accounting-80.png">
<div>
<p>A work of Bruno Sdoukos.</p>
</div>
</footer>
</body>
</html>