So, I have for a time been coding websites, but today I stumbled upon a problem with a page. On my previous designs it has worked with a lot of different sizes, but not with this one. Anyone know a way for me to get a more proper design, aligning it for also larger screens?
/* Linked with index.html */
/* All elements having a color:red in the same element as a rgba color, the color:red is only used for fallbacks for older/browsers not supporting rgba. */
#import url(http://fonts.googleapis.com/css?family=Titillium+Web);
html,
body {
background-color: #262626;
font-family: 'Titillium Web', sans-serif;
background-repeat: repeat-x;
width: auto;
min-width: 1000px;
}
.backtocv {
margin-left: 30px;
}
h1 {
margin-left: 15px;
margin-right: 15px;
}
h2 {
margin-left: 15px;
margin-right: 15px;
}
h3 {
margin-left: 15px;
margin-right: 15px;
}
p {
margin-left: 15px;
margin-right: 15px;
max-width: 750px;
width: auto;
height: auto;
}
.overlay {
background-color: rgb(0, 0, 0);
/* Fall-back for browsers not supporting RGBA */
background-color: rgba(0, 0, 0, 0.7);
border: 6px solid rgba(30, 30, 30, 0.8);
border: 6px solid rgb(30, 30, 30);
/* Fall-back for browsers not supporting RGBA */
-webkit-background-clip: padding-box;
background-clip: padding-box;
min-width: 515px;
width: auto;
}
.toptitle {
color: black;
background: -webkit-linear-gradient(#8F0000, #720000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
'
}
.toptitlename {
color: white;
}
.toptitlenameparent {
background-color: red;
background: -webkit-linear-gradient(#8F0000, #720000);
margin-top: -10px;
padding-left: 15px;
}
.toptitleparent {
background-color: white;
margin-top: -10px;
padding-left: 15px;
}
.swedishflag {
margin-left: 5px;
}
.ukflag {
width: auto;
height: auto;
max-width: 30px;
max-height: 30px;
margin-left: 10px;
}
.placeholder {
background: -webkit-linear-gradient(#8F0000, #720000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
'
}
.copyright {
font-size: 11px;
text-align: bottom;
color: white;
}
.normalhr {
margin-left: 0%;
width: 70%;
size: 1%;
}
.facebook {
width: auto;
height: auto;
max-width: 30px;
max-height: 30px;
margin-left: 30px;
}
.twitter {
width: auto;
height: auto;
max-width: 30px;
max-height: 30px;
margin-left: 7px;
}
.newslist {
text-decoration: none;
margin-left: 1017px;
list-style-type: none;
color: white;
width: auto;
max-width: 950px;
}
.externallist {
color: white;
text-decoration: none;
list-style-type: none;
width: auto;
max-width: 950px;
margin-left: 550px;
}
.leftpic {
display: block;
max-width: 300px;
max-height: 300px;
height: auto;
width: auto;
margin-left: 50px;
margin-top: -100px;
border: 1px solid white;
}
.newsheader {
color: red;
right: -1130px;
position: relative;
background: -webkit-linear-gradient(#8F0000, #720000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
'
}
a:link {
text-decoration: none;
color: white;
}
a:visited {
text-decoration: none;
color: white;
}
a:hover {
text-decoration: none;
color: white;
}
a:active {
text-decoration: none;
color: white;
}
.externalheader {
color: red;
margin-top: -110px;
margin-left: 590px;
background: -webkit-linear-gradient(#8F0000, #720000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
'
}
.afterinfobar {
margin-top: -1px;
}
.abouttitle {
color: red;
background: -webkit-linear-gradient(#8F0000, #720000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
'
}
.aboutinfo {
color: white;
width: auto;
max-width: 750px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="indexstyle.css" rel="stylesheet" type="text/css">
<title>Johannes Sundqvist | Index</title>
</head>
<body>
<!-- Start of language switch and social bar -->
<a href="index.html">
<img class="ukflag" src="http://icons.iconarchive.com/icons/custom-icon-design/flag-3/256/United-Kingdom-flag-icon.png" alt="English (UK)">
</a>
<a href="indexsv.html">
<img class="swedishflag" src="http://www.eurovision.tv/img/upload/flags/medium/Sweden.png" alt="Swedish">
</a>
<a href="https://www.facebook.com/johannes.sundqvist.9">
<img class="facebook" src="http://international.olemiss.edu/wp-content/uploads/sites/23/2014/01/facebook-logo-transparent.png" alt="Facebook">
</a>
<a href="http://twitter.com/TheXariez">
<img class="twitter" src="https://g.twimg.com/Twitter_logo_blue.png" alt="Twitter">
</a>
<!-- End of language switch and social bar -->
<!-- Start of top header and body -->
<div class="toptitlenameparent">
<h2 class="toptitlename"> Johannes Sundqvist </h2>
</div>
<!-- Start of overlay -->
<div class="overlay">
<div id="rightnews">
<h1 class="newsheader"> News </h3>
<div class="frontpagelists">
<ul>
<li class="newslist"> Internet CV Created - View <span style="color:#8F0000">here</span> (clickable) </li>
</ul>
<h1 class="externalheader"> External Links </h1>
<ul>
<li class="externallist">Internet CV (Curriculum Vitae) (clickable)
</li>
<li class="externallist">IT Blog (Swedish only, clickable)
</li>
</ul>
</div>
</div>
<img class="leftpic" src="https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-xpf1/v/t1.0-9/10406823_10201587226402089_720379364643065326_n.jpg?oh=6110f5e2e100a383cb32745fc5aa492c&oe=55599AE6&__gda__=1432453081_e9db450a88b424d8d5d5287e19868609">
<hr class="afterinfobar">
<h3 class="abouttitle"> About this site </h3>
<p class="aboutinfo">This site was created using HTML and CSS, it is a site mainly created for a school task we got, but a very large part of it was also created just to pure enjoyment from me as the author. For you asking, Yes, That is me on the picture. But no, I will
not be giving you my phone number for any weird reason.</p>
<br>
<hr>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<!-- Copyright -->
<p class="copyright">Copyright © Johannes Sundqvist | 2015</p>
<!-- End of overlay and body -->
</div>
</body>
</html>
http://getbootstrap.com/ is your best option. bootstrap has the best predefined css classes that will optimize divs text images to work on both pc and mobile. they have great documentations and examples to show you how it works.
Related
I'm trying to make my website responsive without Bootstrap but when I use the #Media query tag it doesn't work - nothing changes.
.........................................................................
This is my code:
body {
font-family: "Oswald",Helvetica,Arial,sans-serif;
/* font-family: 'Roboto', sans-serif; */
/* overflow-y: hidden; */
/* background-image: url("https://preview.redd.it/qmfjuz883g7z.png?width=1024&s=c5e92c9c5e20b147ef13daf77eab47dae203496f"); */
background-color: #e5e5e5;
/* background-color: #222831; */
margin: 0px;
}
html {
scroll-behavior: smooth;
}
h1 {
margin: 0;
}
.Terms:hover {
font-weight: bold;
text-decoration: underline;
}
.Terms {
text-decoration: none;
color: white;
}
.SmallGamesLogoWhite:hover {
transform: scale(1.1);
}
.SocialMedia {
margin-top: 85px !important;
height: 60px !important;
}
.Company_Text_Info {
color: #fafafa;
width: 500px;
margin-top: 30px;
margin-left: 20px;
}
.EmailIcon_Link:hover {
text-decoration: underline;
font-weight: bold;
}
.EmailIcon_Link {
margin-left: 20px;
color: #fafafa;
text-decoration: none;
}
.EmailIcon_Image {
margin-top: 10px;
margin-left: 20px;
height: 20px;
}
.SmallGamesLogoWhite {
margin-top: 30px;
margin-left: 20px;
/* margin-right: 150px; */
height: 35px;
}
#footer {
background-color: #393e46;
height: 400px;
}
#logo {
padding: 20px 20px;
top:0;
left:0;
}
.SmallGameStudio_footer {
margin-top: 350px;
}
#video-content {
margin-top: 100px;
margin-bottom: 100px;
}
.video_h1 {
margin-top: 100px;
}
.video_p {
font-size: 15px;
width: 450px;
text-transform: uppercase;
}
.CenteredText{
margin-top: 35px;
color: white;
}
/* .CenteredText_Span{
color: white;
font-weight: bold;
} */
.NavbarLinks_Video{
margin-right: 450px;
position: absolute;
top: 0;
right: 0;
padding: 25px 25px;
text-decoration: none;
word-spacing: 30px;
font-size: 25px;
color: black !important;
}
::-moz-selection { /* Code for Firefox */
color: white;
background: #ffe4e4;
}
::selection {
color: white;
background: #ffe4e4;
}
.NavbarLinks_Games{
margin-right: 635px;
position: absolute;
top: 0;
right: 0;
padding: 25px 25px;
text-decoration: none;
word-spacing: 30px;
font-size: 25px;
color: black !important;
}
#LearnMore {
margin-top: 150px;
margin-bottom: 300px;
color: white;
}
.games_image:hover {
cursor: pointer;
transform: scale(1.1);
}
#games {
background-color: #393b44;
margin: 0;
}
.games_content_fig_desc {
color: white !important;
width: 250px;
margin-top: 15px;
}
.games_content {
display: flex;
flex-wrap:wrap;
}
.games_content_fig {
margin-left: 55px;
color: black;
color: #ffec00;
}
.download_button:hover {
transform: scale(1.1);
}
.download_button {
background-color: #ff7171; /* Default Website Color Scheme */
margin: 25px 55px;
border: none;
color: white;
padding: 15px 32px;
cursor: pointer;
text-align: center;
text-decoration: none;
border-radius: 5px;
font-size: 16px;
}
.games_image {
height: 200px;
margin: 25px 25px;
margin-bottom: 25px;
border-radius: 50px;
}
#media (max-width: 980px) {
.games_image {
height: 200px;
margin: 25px 25px;
margin-bottom: 25px;
border-radius: 50px;
}
}
#background_grass {
background-image: url("https://preview.redd.it/qmfjuz883g7z.png?width=1024&s=c5e92c9c5e20b147ef13daf77eab47dae203496f");
/* margin-top: 45px;
padding: 5px; */
height: 750px;
}
#LearnMore:hover{
color: white;
}
.Copyright_Text {
margin-bottom: 5px;
color: white;
}
.LearnButton:hover {
color: white;
background-color: #d9adad;
}
.LearnButton {
width: 150px;
}
.FooterLinks:hover {
font-weight: bold;
text-decoration: underline;
}
#FooterLinks {
word-spacing: 30px;
font-size: 35px;
padding-top: 50px;
}
.FooterLinks {
color: white;
text-decoration: none;
}
.NavbarLinks_Home{
margin-right: 800px;
position: absolute;
top: 0;
right: 0;
padding: 25px 25px;
text-decoration: none;
word-spacing: 30px;
font-size: 25px;
color: black !important;
}
.NavbarLinks_Contact {
margin-right: 300px;
position: absolute;
top: 0;
right: 0;
padding: 25px 25px;
text-decoration: none;
word-spacing: 30px;
font-size: 25px;
color: black !important;
}
.LearnMore_Social {
margin-right: 600px;
position: absolute;
top: 0;
right: 0;
padding: 25px 25px;
text-decoration: none;
word-spacing: 30px;
font-size: 25px;
color: black !important;
}
.ArrowUpIcon {
height: 45px;
}
.LearnMore_P {
font-size: 20px;
width: 500px;
}
.LearnMore_Desc:hover {
background-color: #d9adad; /* Default Website Hover Color Scheme*/
}
.LearnMore_H1 {
font-size: 35px;
}
.LearnMore_Desc {
background-color: #ff7171; /* Default Website Color Scheme */
margin-top: 25px;
margin-right: 50px;
border: none;
color: white;
padding: 10px 20px; /* Default Padding was 15px 32px;*/
cursor: pointer;
text-align: center;
text-decoration: none;
display: inline-block;
border-radius: 5px;
font-size: 16px;
}
.NavbarLinks_Home:hover{
color: white !important;
height: 53px;
background-color: black;
font-weight: bold;
text-decoration: underline;
}
.NavbarLinks_Contact:hover{
color: white !important;
height: 53px;
background-color: black;
font-weight: bold;
text-decoration: underline;
}
.NavbarLinks_Games:hover{
color: white !important;
height: 53px;
background-color: black;
font-weight: bold;
text-decoration: underline;
}
.NavbarLinks_Video:hover{
color: white !important;
height: 53px;
background-color: black;
font-weight: bold;
text-decoration: underline;
}
.GooglePlay_Icon {
/* margin-right: 600px; */
position: absolute;
top: 0;
right: 0;
padding: 25px 25px;
word-spacing: 30px;
font-size: 45px;
height: 45px;
}
.itch_image:hover {
cursor: pointer;
transform: scale(1.1);
}
.itch_image {
height: 50px;
border-radius:35px;
margin-top: 10px;
margin-left: 20px;
}
.googleplay_image:hover {
cursor: pointer;
transform: scale(1.1);
}
.QuickLinks_Links:hover {
transform: scale(1.1);
}
.QuickLinks_Links {
color: #fafafa;
font-size: 25px;
position: absolute;
top: 0;
right: 0;
text-decoration: none;
}
.QuickLinks {
margin-top: 85px;
margin-right: 550px;
}
.subscribe {
margin-top: 85px;
position: absolute;
top: 0;
right: 0;
}
input[type=text], select {
width: 75%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.subscribe_h1 {
margin-bottom: 20px;
color: #fafafa;
}
.subscribe_button:hover {
transform: scale(1.1);
}
.subscribe_button {
margin-right: 65;
background-color: #ff7171;
border: none;
color: white;
padding: 15px 20px;
cursor: pointer;
text-align: center;
text-decoration: none;
display: inline-block !important;
border-radius: 5px;
font-size: 16px;
}
.QuickLinks_Contant {
margin-top: 130px;
margin-right: 535px;
}
.QuickLinks_Games {
margin-top: 175px;
margin-right: 542px;
}
.QuickLinks_Videos {
margin-top: 220px;
margin-right: 542px;
}
.QuickLinks_Terms {
margin-top: 265px;
margin-right: 430px;
}
.copyright_message {
padding-top: 3px;
color: #fafafa;
}
.Privacy:hover {
text-decoration: underline;
font-weight: bold;
}
.Privacy {
color: #fafafa;
text-decoration: none;
}
.message_development {
position: absolute;
top: 0;
right: 0;
margin-top: 200px;
margin-right: 100px;
width: 500px;
color: white;
}
.subscribe {
margin-right: 150px;
margin-top: 300px;
position: absolute;
top: 0;
right: 0;
}
#copyright {
height: 65px;
background-color: #455d7a;
}
.QuickLinks_h1 {
margin-bottom: 100px;
/* position: absolute;
bottom: 0;
right: 0; */
color: white;
}
.Logo_Header {
margin-top: 200px;
}
.googleplay_image {
height: 50px;
margin-top: 10px;
margin-left: 30px;
}
/* .Itch_Footer_Icon {
margin-right: 600px; */
/* margin-bottom: 20px;
margin-top: 150px;
border-radius: 75px;
padding: 25px 25px;
font-size: 45px;
height: 45px;
} */
.GooglePlay_Footer_Icon:hover {
transform: scale(1.1);
}
.GooglePlay_Footer_Icon {
/* margin-right: 600px; */
/* margin-bottom: 20px; */
margin-top: 50px;
padding: 25px 15px;
font-size: 45px;
height: 45px;
}
/* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
.SmallGamesLogo:hover {
transform: scale(1.1);
}
.GooglePlay_Icon:hover {
transform: scale(1.5);
}
.Itch_io_Icon:hover {
transform: scale(1.5);
}
.Itch_io_Icon {
margin-right: 150px;
/* margin-right: 600px; */
position: absolute;
top: 0;
right: 0;
padding: 25px 25px;
font-size: 45px;
border-radius: 75px;
height: 45px;
}
#container {
width: 100%;
max-width: 1100%;
}
#Navbar {
/* position: fixed;
top: 0;
left: 0; */
width: 100%;
background-color: white !important;
}
.LearnButton {
background-color: #ff7171; /* Default Website Color Scheme */
margin-top: 25px;
border: none;
color: white;
padding: 15px 32px;
cursor: pointer;
text-align: center;
text-decoration: none;
display: inline-block;
border-radius: 5px;
font-size: 16px;
}
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: white;
color: #ff5757;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
#myBtn:hover {
color: white !important;
background-color: #ff5757;
}
./* Use a media query to add a break point at 800px: */
#media screen and (max-width:800px) {
#background_grass, #Navbar, #logo, #NavLinks {
width:100%; /* The width is 100%, when the viewport is 800px or smaller */
}
}
/* Footer Wavy CSS */
<!DOCTYPE html>
<html>
<head>
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/a779d142a2.js" crossorigin="anonymous"></script>
<!-- StyleSheet -->
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/games.css">
<link rel="shortcut icon" type="image/png" href="img/favicon_platformergame.png"/>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght#300&display=swap" rel="stylesheet">
<!-- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap" rel="stylesheet"> -->
<!-- <meta name="viewport" content ="width=device-width,initial-scale=1,user-scalable=yes" /> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SmallGamesStudios</title>
</head>
<body>
<div id="container">
<div id="Navbar">
<div id="logo">
<!-- Make image (Logo) black -->
<img class="SmallGamesLogo" src="img/SmallGamesLogo.png" alt="SmallGamesStudios"/>
</div>
<div id="NavLinks">
<div class="Navbar_Links">
<a class="NavbarLinks_Contact" href="contact.html">Contact</a>
<a class="NavbarLinks_Games" href="games.html">Games</a>
<a class="NavbarLinks_Video" href="videos.html">Video</a>
<a class="NavbarLinks_Home" href="index.html">Home</a>
</div>
<div class="Navbar_Social">
<img class="GooglePlay_Icon" src="img/GooglePlay.png" alt="Google Play Icon"/>
<img class="Itch_io_Icon" src="img/itch.io.png" alt="Itch.io Icon"/>
<!-- <img class="Youtube_Icon" src="img/YoutubeLogo.png" alt="Youtube_Icon"/> -->
<!-- <a class="NavSocial_Itch" href="#"><i class="fab fa-itch-io"></i></a>
<a class="NavSocial_GooglePlay" href="#"><i class="fab fa-google-play"></i></a> -->
</div>
</div>
<div id="games">
<div class="games_content">
<div class="PlatformerGame">
<figure>
<img class="games_image" src="img/PlatformerGame.png" alt="dream_blast_icon">
<figcaption class="games_content_fig">Platformer Game</figcaption></a>
<figcaption class="games_content_fig games_content_fig_desc">We just launched our first, new game! Try avoid dieing from enemies and falling! Collect coins to win, keep your score and try and win! This game is Only for Computers and PCs. Make sure to extract the file and run the exe file!</figcaption>
<button class="download_button" type="button" name="button">Download</button>
</figure>
</div>
<div class="message">
<h2 class="message_development">We are currently in development making new games! Make sure you subscribe to our Newsletter to get a notification!</h2>
<div class="subscribe">
<form action="https://formspree.io/maypgwbg" method="post">
<input class="subscribe-input" placeholder="Your Email" type="text" name="_replyto"/>
<button class="subscribe_button" type="submit">Send</button>
</form>
</div>
</div>
<!-- <div class="angry_birds">
<figure>
<img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon">
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<button class="download_button" type="button" name="button">Download</button>
</figure>
</div>
<div class="angrybirds_match">
<figure>
<img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon">
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<button class="download_button" type="button" name="button">Download</button>
</figure>
</div>
<div class="angrybirds-friends">
<figure>
<img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon">
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<button class="download_button" type="button" name="button">Download</button>
</figure>
</div>
<div class="angrybirds_evolution">
<figure>
<img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon">
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<button class="download_button" type="button" name="button">Download</button>
</figure>
</div>
<div class="angrybirds_blast">
<figure>
<img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon">
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<button class="download_button" type="button" name="button">Download</button>
</figure>
</div> -->
</div>
</div>
<button onclick="topFunction()" id="myBtn" title="Go to top"><img class="ArrowUpIcon" src="img/ArrowUpIcon.png" alt=""></button>
<div id="footer">
<!-- <div class="SocialMedia_Footer"> -->
<div id="SmallGamesLogoWhite Company_Info SocialFooter_Links">
<img class="SmallGamesLogoWhite" src="img/SmallGamesLogoWhite.png" alt="SmallGamesStudiosFooter"/>
<p class="Company_Text_Info">
SmallGameStudios is a small mobile and PC/Laptop gaming company. Founded in 2020, SmallGameStudios has released some games. Several fun games. We are here to do the best work to entertain people worldwide and make games that we want to show to our friends. Join us on this new journey and lets connect the world through amazing games made with pride and passion.
</p>
<p class="Email"><img class="EmailIcon_Image" src="img/Email_Icon.png" alt="Email_Icon"><a class="EmailIcon_Link" href="contact.html">abdulfareed454#gmail.com</a></p>
<img class="itch_image" src="img/itch.io.png" alt="itch.io-logo">
<img class="googleplay_image" src="img/GooglePlay.png" alt="GooglePlay-icon">
</div>
<!-- <div id="QuickLinks">
<center>
<h1 class="QuickLinks_h1">Quick Links</h1>
<a class="QuickLinks QuickLinks_Links" href="#">Home</a>
<a class="QuickLinks_Contant QuickLinks_Links" href="contact.html">Contact</a>
<a class="QuickLinks_Games QuickLinks_Links" href="games.html">Games</a>
<a class="QuickLinks_Videos QuickLinks_Links" href="videos.html">Videos</a>
<a class="QuickLinks_Terms QuickLinks_Links" href="terms.html">Terms & Conditions</a>
</center>
</div> -->
<center>
<div id="copyright">
<div class="copyright_message">
<p class="copyright_message_text">© 2009 - 2020 SmallGameStudios. All rights Reserved. <a class="Privacy" href="#">Privacy policy</a>.</p>
</div>
</div>
</center>
<!-- <div>
<h1 class="Newsletter_h1">Join Our Newsletter</h1>
<form action="https://formspree.io/maypgwbg" method="POST">
<input class="" placeholder="Your Email" type="text" name="_replyto">
<button class="" type="submit">Send</button>
</form>
</div> -->
</div>
</div>
</body>
<!-- Script Section -->
<script>
//Get the button
var mybutton = document.getElementById("myBtn");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
</body>
</html>
.......................................................................................
This is the code i added for #media:
#media screen and (max-width:800px) {#background_grass, #Navbar, #logo, #NavLinks { width: 100%; } }
What am i doing wrong? I'm writing the #Media query wrong?
After a quick look at your code I'd recommend trying something like this:
.games_image {
height: 200px;
margin: 25px 25px;
margin-bottom: 25px;
border-radius: 50px;
}
#media (max-width: 980px) {
.games_image {
height: 200px;
margin: 25px 25px;
margin-bottom: 25px;
border-radius: 50px;
}
}
Also I'd maybe include this:
* {
width: 100%;
padding: 0;
margin: 0;
}
There's no quick way to use media queries and make it responsive but wrapping media queries below and making adjustments to the individual parts can work really well and allow you to have the finish that you want.
When building from scratch, you have to plan and structure your HTML to make the page responsive. You can make a web page responsive with Media Queries. However, there are tons of screens and devices with different heights and widths, so it is hard to create an exact breakpoint for each device. For starters you can do something like this:
*{
margin: 0;
padding: 0;
}
/* Small devices (portrait tablets and large phones, 600px and up) */
#media only screen and (max-width: 600px) {
/* Define CSS rules for mobile device here */
.col-2,
.col-3{
width: 100% !important;
}
}
/* CSS rules for rest of the screen size */
.col{
min-height: 10vh;
float: left;
text-align: center;
}
.col-1{
width: 100%;
background: lime;
}
.col-2{
width: 50%;
background: pink;
}
.col-3{
width: 33.3%;
background: cyan;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive</title>
<link rel="stylesheet" href="./assets/css/custom.css">
</head>
<body>
<div class="col col-1">col-1</div>
<div class="col col-2">col-2</div>
<div class="col col-2">col-2</div>
<div class="col col-3">col-3</div>
<div class="col col-3">col-3</div>
<div class="col col-3">col-3</div>
</body>
</html>
Always Design for Mobile First.Mobile First means designing for mobile before designing for desktop or any other device (This will make the page display faster on smaller devices).
You can define CSS rules for mobile device inside the Media Query for mobile device.
Then modify the property for the same elements out side the Media Query block of mobile device to make it look good on other screens.
You can define CSS Media Queries for multiple Screens also. For example as below:
/* Extra small devices (phones, 600px and down) */
#media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets and large phones, 600px and up) */
#media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
#media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up) */
#media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops and desktops, 1200px and up) */
#media only screen and (min-width: 1200px) {...}
You can tweak it and adjust to your needs. Experiment.
Some Screenshots:
On Desktop
On Mobile
I am trying to get a White Border Around Everything present in the <main> tag, but I have not had any luck. It will only to around the <nav> section for some reason. Help?
header{
background-color: #030303;
color:#ffffff;
height: 60px;
text-align: center;
padding-top: 30px;
padding-left: 3em;
background-image: url("assets/dndlogo.jpg");
background-repeat: no-repeat;
background-position: right;
}
#dndlogo{
float: right;
height: 50px;
}
header h1{
font-family: Georgia, "Times New Roman", Serif;
margin-top: 0px;
font-size: 3em;
letter-spacing: 0.25em;
}
#schedulebox{
float: left;
height: 750px;
width: 15%;
float: left;
background-color: aqua;
text-align: center;
}
#homecontent{
height: 750px;
width: 84.3%;
float: left;
background-color: aquamarine;
border: red solid;
}
nav {
overflow: hidden;
background-color: #030303;
font-family: Arial;
float: top;
margin: 0;
padding: 0;
}
nav li{
float: left;
font-size: 20px;
color: black;
text-align: center;
padding: 15px 20px;
text-decoration: none;
list-style-type: none;
color: white;
height: 15px;
}
nav li:hover{
background-color: white;
border-radius: 15px;
transition: 0.5s;
color: black;
}
nav ul{
margin: 0;
padding-bottom: 10px;
padding-left: 0;
}
footer{
background-color: #030303;
float: bottom;
color: white;
}
#schedulebox h1{
border-bottom: solid;
padding-top: 0;
margin: 0;
}
html{
background-color: #030303;
}
a{
color: white;
text-decoration: none;
}
a:hover{
color: black;
}
main{
border: white solid;
order-radius: 10px;
}
#wrapper{
background-color: #030303;
}
#schedulebox{
border: red solid;
}
#dragonpic{
width: 1600px;
height: auto;
}
<html lang="en">
<link rel="stylesheet" href="style.css" type="text/css">
<head>
<meta charset="UTF-8">
<title>D&D WCTC Home</title>
</head>
<body>
<div id="wrapper">
<header>
<h1>Dungeons and Dragons: WCTC</h1>
</header>
<main>
<nav><ul><li>Home</li> <li><a>Page2</a></li> <li><a>Page3</a></li></ul></nav>
<div id="schedulebox">
<h1>Schedule</h1>
<p>We will usually have games twice every week. However, we will switch games every week so please look at the schedule for the one you wish to join.</p>
<h2>Campaigns in Progress:</h2>
<ul><li>Plague of The Gods</li><li>Inheritence of Felwinter</li></ul>
<h2>Upcoming Campaigns</h2>
<ul><li>Plague of The Gods</li><li>Inheritence of Felwinter</li></ul>
<h3>We run games at 5pm CST to 8pm CST on Wednesdays and Fridays 5pm CST to 8pm CST</h3>
</div>
<div id="homecontent">
<img src="assets/dragon.png" id="dragonpic">
<h2>Who are we?</h2>
<h3>We are a local Dungeons and Dragons club at Waukesha County Technical College. We host multiple games occuring at the same time with as many as 6 players at once. Each party's actions effect the in game universe that other parties will have to deal with. We are always welcoming new members and are also looking for people looking to become Dungeon Masters!</h3>
<h2>Looking to Join?</h2>
<h3>Head over to our join page to learn how to get started!</h3>
</div>
</main>
<footer>
<div id="footercontent">
<small><i>Copyright © 2020 Company</i></small>
</div>
</footer>
</div>
</body>
</html>
I am just trying to get a white border around the main website content and not the <nav> or <header> section. I've tried having a separate division in the code for the content, but to no avail.
You need to have clearfix hack to clear floats. Refer to w3schools tutorial for more info.
<main class="clearfix">
.clearfix::after {
content: "";
clear: both;
display: table;
}
header {
background-color: #030303;
color: #ffffff;
height: 60px;
text-align: center;
padding-top: 30px;
padding-left: 3em;
background-image: url("assets/dndlogo.jpg");
background-repeat: no-repeat;
background-position: right;
}
#dndlogo {
float: right;
height: 50px;
}
header h1 {
font-family: Georgia, "Times New Roman", Serif;
margin-top: 0px;
font-size: 3em;
letter-spacing: 0.25em;
}
#schedulebox {
float: left;
height: 750px;
width: 15%;
float: left;
background-color: aqua;
text-align: center;
}
#homecontent {
height: 750px;
width: 84.3%;
float: left;
background-color: aquamarine;
border: red solid;
}
nav {
overflow: hidden;
background-color: #030303;
font-family: Arial;
float: top;
margin: 0;
padding: 0;
}
nav li {
float: left;
font-size: 20px;
color: black;
text-align: center;
padding: 15px 20px;
text-decoration: none;
list-style-type: none;
color: white;
height: 15px;
}
nav li:hover {
background-color: white;
border-radius: 15px;
transition: 0.5s;
color: black;
}
nav ul {
margin: 0;
padding-bottom: 10px;
padding-left: 0;
}
footer {
background-color: #030303;
float: bottom;
color: white;
}
#schedulebox h1 {
border-bottom: solid;
padding-top: 0;
margin: 0;
}
html {
background-color: #030303;
}
a {
color: white;
text-decoration: none;
}
a:hover {
color: black;
}
main {
border: thick solid white;
border-radius: 10px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
#wrapper {
background-color: #030303;
}
#schedulebox {
border: red solid;
}
#dragonpic {
width: 1600px;
height: auto;
}
<html lang="en">
<link rel="stylesheet" href="style.css" type="text/css">
<head>
<meta charset="UTF-8">
<title>D&D WCTC Home</title>
</head>
<body>
<div id="wrapper">
<header>
<h1>Dungeons and Dragons: WCTC</h1>
</header>
<main class="clearfix">
<nav>
<ul>
<li>Home</li>
<li><a>Page2</a></li>
<li><a>Page3</a></li>
</ul>
</nav>
<div id="schedulebox">
<h1>Schedule</h1>
<p>We will usually have games twice every week. However, we will switch games every week so please look at the schedule for the one you wish to join.</p>
<h2>Campaigns in Progress:</h2>
<ul>
<li>Plague of The Gods</li>
<li>Inheritence of Felwinter</li>
</ul>
<h2>Upcoming Campaigns</h2>
<ul>
<li>Plague of The Gods</li>
<li>Inheritence of Felwinter</li>
</ul>
<h3>We run games at 5pm CST to 8pm CST on Wednesdays and Fridays 5pm CST to 8pm CST</h3>
</div>
<div id="homecontent">
<img src="assets/dragon.png" id="dragonpic">
<h2>Who are we?</h2>
<h3>We are a local Dungeons and Dragons club at Waukesha County Technical College. We host multiple games occuring at the same time with as many as 6 players at once. Each party's actions effect the in game universe that other parties will have to
deal with. We are always welcoming new members and are also looking for people looking to become Dungeon Masters!</h3>
<h2>Looking to Join?</h2>
<h3>Head over to our join page to learn how to get started!</h3>
</div>
</main>
<footer>
<div id="footercontent">
<small><i>Copyright © 2020 Company</i></small>
</div>
</footer>
</div>
</body>
</html>
make a div under <div id="wrapper"></div> then give padding around 20px to the wrapper div , and then give border value to the new div you will make under the div with id wrapper
When I removed the float:left, it worked for me like this.
#schedulebox{
height: 750px;
width: 15%;
background-color: aqua;
text-align: center;
}
#homecontent{
height: 750px;
width: 84.3%;
background-color: aquamarine;
border: red solid;
}
Then I added border to wrapper
#wrapper{
border:1vw solid white;
background-color: #030303;
}
This worked for me!
Since there are floated elements in main, you need to add overflow: auto; to main to include all floated elements in it.
header{
background-color: #030303;
color:#ffffff;
height: 60px;
text-align: center;
padding-top: 30px;
padding-left: 3em;
background-image: url("assets/dndlogo.jpg");
background-repeat: no-repeat;
background-position: right;
}
#dndlogo{
float: right;
height: 50px;
}
header h1{
font-family: Georgia, "Times New Roman", Serif;
margin-top: 0px;
font-size: 3em;
letter-spacing: 0.25em;
}
#schedulebox{
float: left;
height: 750px;
width: 15%;
float: left;
background-color: aqua;
text-align: center;
}
#homecontent{
height: 750px;
width: 84.3%;
float: left;
background-color: aquamarine;
border: red solid;
}
nav {
overflow: hidden;
background-color: #030303;
font-family: Arial;
float: top;
margin: 0;
padding: 0;
}
nav li{
float: left;
font-size: 20px;
color: black;
text-align: center;
padding: 15px 20px;
text-decoration: none;
list-style-type: none;
color: white;
height: 15px;
}
nav li:hover{
background-color: white;
border-radius: 15px;
transition: 0.5s;
color: black;
}
nav ul{
margin: 0;
padding-bottom: 10px;
padding-left: 0;
}
footer{
background-color: #030303;
float: bottom;
color: white;
}
#schedulebox h1{
border-bottom: solid;
padding-top: 0;
margin: 0;
}
html{
background-color: #030303;
}
a{
color: white;
text-decoration: none;
}
a:hover{
color: black;
}
main{
border: white solid;
border-radius: 10px;
overflow: auto;
}
#wrapper{
background-color: #030303;
}
#schedulebox{
border: red solid;
}
#dragonpic{
width: 1600px;
height: auto;
}
<html lang="en">
<link rel="stylesheet" href="style.css" type="text/css">
<head>
<meta charset="UTF-8">
<title>D&D WCTC Home</title>
</head>
<body>
<div id="wrapper">
<header>
<h1>Dungeons and Dragons: WCTC</h1>
</header>
<main>
<nav><ul><li>Home</li> <li><a>Page2</a></li> <li><a>Page3</a></li></ul></nav>
<div id="schedulebox">
<h1>Schedule</h1>
<p>We will usually have games twice every week. However, we will switch games every week so please look at the schedule for the one you wish to join.</p>
<h2>Campaigns in Progress:</h2>
<ul><li>Plague of The Gods</li><li>Inheritence of Felwinter</li></ul>
<h2>Upcoming Campaigns</h2>
<ul><li>Plague of The Gods</li><li>Inheritence of Felwinter</li></ul>
<h3>We run games at 5pm CST to 8pm CST on Wednesdays and Fridays 5pm CST to 8pm CST</h3>
</div>
<div id="homecontent">
<img src="assets/dragon.png" id="dragonpic">
<h2>Who are we?</h2>
<h3>We are a local Dungeons and Dragons club at Waukesha County Technical College. We host multiple games occuring at the same time with as many as 6 players at once. Each party's actions effect the in game universe that other parties will have to deal with. We are always welcoming new members and are also looking for people looking to become Dungeon Masters!</h3>
<h2>Looking to Join?</h2>
<h3>Head over to our join page to learn how to get started!</h3>
</div>
</main>
<footer>
<div id="footercontent">
<small><i>Copyright © 2020 Company</i></small>
</div>
</footer>
</div>
</body>
</html>
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 making a website when i am om full screen the website looks good but when i am making the screen smaller the divs come out etc.
Here is a printscreen of it:
How do i fix this?
This is the HTML and CSS im using:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Jari Rengeling</title>
<link rel="stylesheet" href="../CSS/StyleSheet.css" type="text/css">
</head>
<body>
<div id="header">
<img alt="wood" src="../Images/wood.png" id="wood">
<div id="menu">
<span id="naam">Jari Rengeling</span>
<ul id="nav1">
<li class="li1">Home</li>
<li class="li1">Over mij</li>
<li class="li1">Ervaringen</li>
<li class="li1">Contact</li>
</ul>
</div>
<div id="headertext">
<h1 class="space">Welkom</h1>
<p class="space" id="headerp">Mijn naam is Jari Rengeling, ik ben een beginnend Applicatieontwikkelaar. Neem gerust een kijkje op mijn eigen portfolio.</p>
</div>
</div>
<div id="footer">
<div id="navigatie">
<h2 id="h22">Navigatie</h2>
<ul id="ul2">
<li class="li2">Home</li>
<li class="li2">Over mij</li>
<li class="li2">Ervaringen</li>
<li class="li2">Contact</li>
</ul>
</div>
<div id="projecten">
<h2 id="h21">Projecten</h2>
<div id="project1"></div>
<div id="project2"></div>
<p>Geen huidge projecten...</p>
</div>
<div id="socialmedia">
<h2 id="h23">Sociale Media</h2>
<img alt="facebook" src="../Images/facebook.png" id="facebook" class="miniaturen">
<img alt="twitter" src="../Images/twitter.png" id="twitter" class="miniaturen">
</div>
<div id="contact">
<h2 id="h24">Contact</h2>
<p>Klik hier om mijn contact gegevens te bekijken!</p>
</div>
</div>
</body>
</html>
CSS
body
{
margin: 0px;
padding: 0px;
background-color: rgba(154, 135, 100, 1.0);
width: auto;
}
#menu
{
width: 100%;
height: 100px;
z-index: 1;
background-color: rgba(154, 135, 100, 0.80);
}
#nav1
{
margin: 0px;
text-align: right;
margin-right: 400px;
}
.li1
{
display: inline;
padding-left: 2%;
font-size: 19px;
line-height: 100px;
font-family: Champagne;
color: white;
}
#wood
{
position: absolute;
z-index: -1;
height: 800px;
width: 100%;
}
#naam
{
font-family: Champagne;
font-size: 40px;
color: white;
line-height: 100px;
margin: 0px;
position: absolute;
margin-left: 400px;
}
.space
{
margin: 0px;
color: white;
padding-top: 20px;
text-align: right;
font-family: Caviar;
}
#headerp
{
max-width: 480px;
display: inline-block;
font-size: 25px;
}
#headertext h1
{
font-size: 50px;
}
#headertext
{
float: right;
margin-right: 400px;
margin-top: 240px;
}
#footer
{
background-color: rgba(154, 135, 100, 0.80);
height: 210px;
width: 100%;
margin-top: 700px;
}
#h21
{
font-family: Caviar;
margin-left: 400px;
color: white;
border-bottom: 1px solid white;
max-width: 230px;
padding-top: 10px;
}
#project1
{
border: 1px solid black;
width: 100px;
height: 100px;
margin-left: 400px;
background-color: rgba(128, 128, 128, 0.15);
position: absolute;
padding-top: 0px;
}
#project2
{
border: 1px solid black;
width: 100px;
height: 100px;
margin-left: 530px;
background-color: rgba(128, 128, 128, 0.15);
padding-top: 0px;
position: absolute;
}
p
{
font-family: Caviar;
color: #ebebeb;
}
#projecten p
{
margin-left: 400px;
margin-top: 120px;
position: absolute;
}
#projecten
{
margin-left: 200px;
margin-top: 0px;
padding-top: 0px;
}
#navigatie
{
margin-left: 400px;
position: absolute;
}
.li2
{
list-style-type: none;
}
#ul2
{
position: absolute;
margin: 0px;
padding: 0px;
padding-top: 10px;
font-family: Caviar;
color: #ebebeb;
}
#h22
{
font-family: Caviar;
color: white;
padding-top: 10px;
border-bottom: 1px solid white;
margin: 0px;
}
a:hover
{
color: black;
}
#h23
{
font-family: Caviar;
color: white;
padding-top: 10px;
border-bottom: 1px solid white;
margin: 0px;
}
#socialmedia
{
position: relative;
margin-left: 900px;
top: -56px;
padding: 0px;
max-width: 214px;
}
.miniaturen
{
padding-right: 5px;
padding-top: 20px;
}
#contact
{
position: absolute;
margin-left: 1200px;
top: 802px;
padding: 0px;
max-width: 100px;
}
#h24
{
font-family: Caviar;
color: white;
padding-top: 10px;
border-bottom: 1px solid white;
margin: 0px;
}
a
{
text-decoration: none;
color: white;
font-family: Champagne;
}
There is a rule in css known as #media rule.
#media is used for creating responsive webpage.
example of #media rule :
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
#media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
<h1>Resize the browser window to see the effect!</h1>
<p>The media query will only apply if the media type is screen and the viewport is 480px wide or wider.</p>
</body>
</html>
Seeing your CSS code, I noticed you are almost always using pixels as a measure. You shouldn't do that unless you know exactly the size of the screen were your website will be open. Otherwise, using percentages is always a good thing. You can control the style like with pixels and when you resize, since everything has it's size according their parent elements, everything will resize.
I changed a bit of your CSS and HTML code for you to see it. It's not perfect but you can understand the power of using percentages instead of pixels (:
http://jsbin.com/tacayaweya/edit?html,css,output
You could use #media queries (just like it was said here) to control the style your website based on the screen size. The example of #Advaith is a good example of how to use it.
As also mentioned in the comments, using frameworks like Bootstrap can help you with the design of your website.
I have been trying to add three icons for like 6 hours and nothing works can someone please help :(
Want the icon to show up above "Performance", "Technology", and "Design".
In addition I wanted to add quote icons to the <p> tags inside the three div's.
Also wanted to change the color of the icons to match the hr tag with the same hue of red.
Here is my HTML
<html>
<header>
<title>NavBar</title>
<link type="text/css" rel="Stylesheet" href="NavBar Example.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</header>
<body>
<div id="menu wrapper" class="red">
<div class="left"></div>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Contact</li>
<li class="login"><a class="login" href="#">Log In</a></li>
</ul>
</div>
<div class="header">
<img class="head-image" src="banner2.jpg">
</div>
<div class="hr">
<hr />
</div>
<div class="content">
<div class="container">
<div class="icon1">
<i class="fa fa-rocket fa-5x"></i>
<h2>Performance</h2>
<hr class="ptd" />
<p>Best in class when it comes to raw power!</p>
</div>
<div class="icon2">
<i class="fa fa-power-off fa-5x"></i>
<h2>Technology</h2>
<hr class="ptd" />
<p>Oringinal Innovations pushing the boundaries of modern technology</p>
</div>
<div class="icon3">
<i class="fa fa-laptop fa-5x"></i></a>
<h2>Design</h2>
<hr class="ptd" />
<p>Designed with you in mind</p>
</div>
</div>
</div>
<div class="footer">
</div>
</body>
</html>
Here is my CSS
body {
background-image: url(black-Linen.png);
}
/* NavBar */
#menu {
font-family: Arial, sans-serif;
font-weight: bold;
text-transform: uppercase;
margin: 50px 0;
padding: 0;
list-style-type: none;
background-color: #800000;
font-size: 13px;
height: 40px;
border-bottom: 2px solid #5A0000;
}
#menu li {
float: left;
margin: 0;
}
#menu li a {
text-decoration: none;
display: block;
padding: 0 20px;
line-height: 40px;
color: #FFF;
}
#menu li a:hover {
background-color: #CC0000;
border-bottom: 2px solid #DDD;
color: #000;
}
#menu_wrapper ul {
margin-left: 12px;
}
#menu_wrapper {
padding: 0 16px 0 0;
background-color: #666666;
}
#menu_wrapper div {
float: left;
height: 44px;
width: 12px;
background-color: #666666;
}
.header {
height: 720px;
width: 1600px;
margin: 0 auto 0 auto;
padding: 10px 10px 20px 10px;
overflow: hidden;
}
.head-image {
height: 720px;
width: 1600px;
box-shadow: 5px 5px 3px #000;
}
div.hr {
height: 32px;
background: url(fire.png) no-repeat scroll center;
}
div.hr hr {
display: none;
}
.content {
width:1600px;
height: 250px;
margin: 25px auto 15px auto;
padding: 10px;
}
/*Performance*/
.icon1 {
border: 2px solid #FFF;
background-image: url(tactile_noise.png);
height: 240px;
width: 500px;
float: left;
margin-right: auto;
margin-left: auto;
}
.container i {
display: block;
margin: 10px auto 0 auto;
width: 32px;
color: #800000;
border-radius:50%;
}
/*Technology*/
.icon2 {
border: 2px solid #FFF;
background-image: url(tactile_noise.png);
height: 240px;
width: 500px;
float: left;
margin-right: 42px;
margin-left: 42px;
}
/*Design*/
.icon3 {
border: 2px solid #FFF;
background-image: url(tactile_noise.png);
height: 240px;
width: 500px;
float: left;
margin-right: auto;
margin-left: auto;
}
h2 {
text-align: center;
font-weight: bold;
font-family: roboto, sans-serif;
margin-top: 2px;
}
h2 a {
text-decoration: none;
color: #FFF;
}
h2 a:hover, a:active {
color: #9f1111;
}
.ptd {
width: 40%;
}
p {
text-align: center;
font-style: italic;
font-family: roboto, sans-serif;
color: #FFF;
}
I think it's actually working fine, I can see icons in my JS Fiddle.
Could the problem be your link to your CSS file? Should there be a space within the href?
<link type="text/css" rel="Stylesheet" href="NavBar Example.css">
http://jsfiddle.net/Delorian/1x6u553h/
Start by double checking your markup. You have two IDs "menu" + "wrapper" and one selector "#menu_wrapper". I think you should keep IDs just for actions and add classes to add style.
Your markup:
<div id="menu wrapper" class="red">
...
</div>
Correct markup:
<div id="menu" class="wrapper red">
...
</div>
You are missing the protocol http:// on your link to the bootstrap CDN.
Try to add it to the link and see if it works:
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">