I'm very new to HTML and CSS and have finally created my new website. The site works fine on my laptop and PC, but when I open it on my phone, there is this huge white space covering half my screen in portrait mode. It's perfectly fine in landscape mode.
I want my website to be completely zoomed in when opened in portrait mode, so that you can swipe/scroll to navigate on the site and get rid of the white space. Basically, at the moment, when the site is opened, it zooms out to show 100% of the site, but I only want it to show whatever fits the mobile screen in portrait mode. Hope my question is clear. I've been searching for an answer for over 3 hours now. Please help me guys :(
My css: https://pastebin.com/AeHyczJh
My HTML: https://pastebin.com/N5jV8yqY
<html>
<head>
<meta charset="utf-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<meta name="description" content="Affordable and professional web design">
<meta name="keywords" content="web design, affordable web design, professional web design">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrap">
<header>
<div class="container">
<img src="images/final.png" width="162" height="200" alt="logo" id="logo"/>
<nav>
<ul>
<li class="current">Home</li>
<li class="dropdown">
Registration
<div class="dropdown-content">
Team
Individual
Coach a team
Manage a team
</div>
</li>
<li class="dropdown">
KWSA Women's Soccer League
<div class="dropdown-content">
Match Schedule
Practice Schedule
Pitch Locations
Team Kits
Top Scorers
</div>
</li>
<li class="dropdown">
Sponsors
<div class="dropdown-content">
Sponsors of KWSL
Sponsor a team
</div>
</li>
<li class="dropdown">
Info
<div class="dropdown-content">
Rules
FAQ
</div>
</li>
<li>The Carpool Program</li>
</ul>
</nav>
</div>
</header>
<section id="main_content">
<iframe width="560" height="315" src="https://www.youtube.com/embed/WSd0HZVh5pE?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
<div id="main_text">
<h1></h1>
<p></p>
</div>
</section>
<footer>
<div class="foot-container">
<img src="images/fb.png" class="social_fb">
<img src="images/youtube.png" class="social_youtube">
<img src="images/insta.png" class="social_insta">
<img src="images/mail.png" class="social_mail">
</div>
</footer>
</div>
</body>
</html>
#font-face {
font-family: 'YourFontName'; /*a name to be used later*/
src: url(''); /*URL to font*/
}
#charset "utf-8";
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
html{
max-height: 5px;
}
}
body{
font: 15px/1.5 Arial, Helvetica,sans-serif;
padding:0;
margin:0;
background-color:#f4f4f4;
overflow: scroll;
background: url(images/field.jpg) no-repeat 0 -200px;
}
h1,
p{
margin: 0;
}
#wrap{
}
.container{
margin: auto;
overflow: hidden;
}
header{
padding-top: 30px;
min-height: 70px;
padding-bottom: 0px;
min-width: 1300px;
padding-left: 20px;
}
#logo{
position: absolute;
top: 20px;
left: 20px;
margin: auto;
}
header li{
float:center;
display:inline;
padding: 0 70px 0 0px;
}
nav{
float: right;
}
header a{
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
font-size: 12px;
}
header a:hover{
font-weight: bold;
}
iframe{
position: static;
top: 300px;
left: 200px;
float:right;
box-shadow: 10px 10px 100px black;
overflow: hidden;
margin: 200px 20px 0px 0px;
}
#main_content{
position: static;
min-height: 700px;
min-width: 1300px;
width: 100%;
z-index: 1;
}
#main_content h1{
position: absolute;
left: -135px;
top: 165px;
text-align: center;
color: #FFFFFF;
font-family:"Bauhaus 93";
font-size: 50px;
min-height: 500px;
min-width: 150px;
}
#main_content p{
color:#FFFFFF;
text-align: center;
height: 10px;
width: 400px;
position: absolute;
left: 410px;
top: 275px;
}
li a, .dropbtn {
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: all 700ms ease;
border: black 1px solid;
}
li a:hover, .dropdown:hover .dropbtn {
background: black;
color: white;
box-shadow: inset 0 0 0 3px black;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
background: rgba(208,208,208,0.8);
box-shadow: 1px 1px 1px black;
}
.dropdown-content a:hover {background-color:black;}
.dropdown:hover .dropdown-content {
display: block;
}
li a, .dropbtn-2 {
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown2:hover .dropbtn-2 {
}
.dropdown-content-2 {
display: none;
position: absolute;
background-color: #1A3C60;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content-2 a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content-2 a:hover {background-color:rgba(56,97,159,0.46)}
.dropdown2:hover .dropdown-content-2 {
display: inline-block;
position: absolute;
left: 160px;
margin-top: -47px;
}
li.dropdown2 {
display: inline-block;
}
#FAQ{
position: static;
background: url(images/faq_bg.png) center no-repeat ;
min-width: 1300px;
min-height: 700px;
width: 100%;
height: 100%;
}
#FAQ h1{
padding-top: 75px;
color: #e4e3e3;
font-family:"Bauhaus 93";
font-size: 50px;
text-align: center;
left: 390px;
}
#FAQ ul p{
text-align: left;
color: #e4e3e3;
max-width: 500px;
position: relative;
font-weight: normal;
}
#FAQ ul{
text-align: left;
color: #e4e3e3;
max-width: 500px;
position: relative;
left: 400px;
top: 50px;
z-index: 2;
font-weight: bold;
}
.social_fb{
position: relative;
top: 15px;
left: 500px;
border-radius: 50%;
background: rgba(168,168,168,0.7);
transition: all 1s ease;
}
.social_fb:hover{
background: #3b5998;
}
.social_youtube{
position: relative;
top: 15px;
left: 520px;
border-radius: 50%;
background: rgba(168,168,168,0.7);
transition: all 1s ease;
}
.social_youtube:hover{
background: #bb0000;
}
.social_insta{
position: relative;
top: 15px;
left: 540px;
border-radius: 50%;
background: rgba(168,168,168,0.7);
transition: all 1s ease;
}
.social_insta:hover{
background: #8a3ab9;
}
.social_mail{
position: relative;
top: 15px;
left: 560px;
border-radius: 50%;
background: rgba(168,168,168,0.7);
transition: all 1s ease;
}
.social_mail:hover{
background: #e4a805;
}
#carpool{
position: static;
background: url(images/faq_bg.png) center no-repeat ;
min-width: 1300px;
min-height: 700px;
width: 100%;
z-index: 1;
height: 100%;
}
#carpool h1{
padding-top: 75px;
color: #e4e3e3;
font-family:"Bauhaus 93";
font-size: 50px;
text-align: center;
left: 390px;
}
#carpool ul p{
text-align: left;
color: #e4e3e3;
max-width: 500px;
position: relative;
font-weight: normal;
}
#carpool ul{
text-align: left;
color: #e4e3e3;
max-width: 500px;
position: relative;
left: 400px;
top: 50px;
z-index: 2;
font-weight: bold;
}
#soon{
position: absolute;
left: 550px;
top: 300px;
}
Related
I'm new to HTML and CSS. I have a project due on Friday and I don't understand how to make my page look the same in all browsers and resolutions. I will leave my CSS and HTML code, so if anyone is kind enough to help me figure it out I'd really appreciate it. We did some simple designs before but I was trying new things out and I guess what I did looks good on like bigger displays but on smaller ones the elements are just messed up.
body{
font-family: 'Playfair Display';
font-size: 20px;
}
.figure1{
float:right;
clear: both;
padding-bottom: 150px;
padding-left: 450px;
padding-right: 8px;
background-color: #D1C45E;
width: 500px;
height: 600px;
}
.figure2{
float:left;
clear: both;
padding-top: 250px;
padding-bottom: 50px;
padding-right: 450px;
padding-left: 8px;
background-color: #D1C45E;
width: 400px;
height: 400px;
}
.imgMe {
position: absolute;
left: 770px;
top: 65px;
}
.navbar {
overflow: hidden;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 10px 12px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 20px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: #D1C45E;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #D1C45E;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #fff;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #D1C45E;
}
.dropdown:hover .dropdown-content {
display: block;
}
h1{
display: inline;
float: none;
padding-left: 140px;
font-size: 80px;
font-weight: 700;
line-height: 1.2;
}
h3{
display: block;
float: none;
padding-top: 350px;
padding-left: 340px;
text-transform: uppercase;
color: #d5c455;
font-size: 20px;
}
h2{
display: block;
float: right;
position: relative;
left: 1030px;
bottom: 650px;
text-transform: uppercase;
font-size: 42px;
}
button {
margin: 20px;
outline: none;
}
.custom-btn {
width: 130px;
height: 40px;
padding: 10px 25px;
border: 2px solid #000;
font-family: 'Lato', sans-serif;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
position: relative;
left: 395px;
font-weight: bold;
font-style: italic;
}
.btn-1 {
transition: all 0.3s ease;
}
.btn-1:hover {
box-shadow:
-7px -7px 20px 0px #fff9,
-4px -4px 5px 0px #fff9,
7px 7px 20px 0px #0002,
4px 4px 5px 0px #0001;
}
br {
display: inline-block;
content: "";
margin-top: 35%;
}
.pText{
display: block;
float: right;
position: absolute;
left: 930px;
top: 1500px;
line-height: 40px;
}
a{
all: revert;
text-decoration: none;
color: black;
}
html {
scroll-behavior: smooth;
}
#down {
margin-top: 100%;
padding-bottom: 25%;
}
footer {
text-align: center;
padding: 40px;
background-color: #D1C45E;
color: white;
display: block;
position: absolute;
top: 2100px;
left: 0px;
width: 1823px;
height: 100px;
}
.socials{
list-style: none;
display: flex;
align-items: center;
justify-content: center;
margin: 1rem 0 3rem 0;
}
.copyright{
text-align: left;
display: inline;
position: absolute;
bottom: 0px;
left: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Janko's homepage </title>
<link href="assets/CSS/project1.css" rel="stylesheet" type="text/css">
<link rel="icon" href="assets/media/home.png">
</head>
<body>
<div class="navbar">
<div class="dropdown">
<button class="dropbtn">
<img src="assets/media/menu.png" alt="an image of a dropdown menu" height="50" width="50">
</button>
<div class="dropdown-content">
Education
Personal
Résumé
</div>
</div>
</div>
<section>
<figure class="figure1">
<img class="imgMe" src="assets/media/janko-image.png" title="Janko " alt="An image of me" width="950" height="815">
</figure>
<h3> Web designer & developer </h3>
<h1> I'm Janko </h1>
<button class="custom-btn btn-1">About me</button>
</section>
<section>
<br>
<figure class="figure2">
<div id="down">
<h2> About me </h2>
</div>
<p class="pText"> I'm a 19 year old Web developer and designer from Croatia. I specialise in HTML and Java. I'm interested in finding a fullstack developer job. The mission of this site is to showcase my web-developing and designing abilities to my potential employers, my professors and viewers who might take inspiration from my website. Not to mention all the feedback I can get will most definitely help me form my webdesign style in the future.</p>
</figure>
<br>
</section>
<section>
<br>
<footer>
<ul class="socials">
<li><img src="assets/media/instagram.png" alt="instagram icon" height="60" width="60"></li>
<li><img src="assets/media/email.png" alt="mail icon" height="60" width="60"></li>
<li><img src="assets/media/facebook.png" alt="facebook icon" height="55" width="60"></li>
</ul>
<p class="copyright"> Copyright © Janko 2022</p>
</footer>
</section>
</body>
</html>
So here's the HTML code for my website about a holiday destination (New York). I've so far made a nav bar and implemented parallax scrolling with two background images. I then saw when running the code that there was a white space after the nav bar and the first background image and I'm not sure how to solve this. I've tried changing the padding and margins around but that's not working :( Some help would be greatly appreciated!
body, html{
height: 100%;
margin: 0;
padding: 0;
font-family: 'Work Sans', sans-serif;
font-weight: 400;
}
.container {
width: 80%;
margin: 0 50px;
}
header{
background:plum;
position: relative;
}
header::after{
content: "";
display: table;
clear:both;
}
.logo{
width: 100px;;
height: 60px;
float: left;
padding: 0px;
}
nav{
float: inline-end;
overflow: auto;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav li{
display: inline-block;
margin-left: 70px;
padding-top: 20px;
font-size: 18px;
position: relative;
}
nav a{
color: black;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover{
color: rgb(0, 0, 0);
}
nav a::before{
content: "";
display: block;
height: 3px;
background-color: rgb(0, 0, 0);
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before{
width: 100%;
}
.bg-one{
background-image: url("bg-one.jpg");
height: 100%;
padding-top: 0;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
position:relative;
}
.transbox{
padding: 10px;
width: 30%;
background-color: white;
border: 10px double black;
opacity: 0.6;
margin-left: 50px;
margin-right: auto;
margin-top: 4%;
margin-bottom: auto;
display: block;
}
.transbox p{
margin: 5%;
font-weight: bold;
color: black;
}
h1{
text-align: center;
font-size: 65px;
}
.first-block{
height: 100px;
background-color:rgb(109, 176, 243);
text-align: center;
border: 10px double white;
padding-bottom: 60px;
vertical-align: auto;
}
h3{
text-transform: uppercase;
font-size: 50px;
text-align: center;
color: rgb(13, 97, 170);
}
.bg-two{
background-image: url("bg-two.jpg");
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
position: relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>New York</title>
<link rel="stylesheet" href="main.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght#400&display=swap"
rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<img src="nyc-logo.png" alt="logo" class="logo">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contacts</li>
</ul>
</nav>
</div>
</header>
<div class="bg-one">
<div class="transbox">
<h1>NEW YORK</h1>
</div>
</div>
<div class="first-block">
<h3>Welcome to the city that never sleeps...</h3>
</div>
<div class="bg-two"></div>
</body>
</html>
I'm not fully understand what is white space you mean, but try to delete margin-top: 4% in
.transbox{
padding: 10px;
width: 30%;
background-color: white;
border: 10px double black;
opacity: 0.6;
margin-left: 50px;
margin-right: auto;
margin-bottom: auto;
display: block;
}
I have been trying to solve this issue but for some reason my code is wrong and I am a beginner, I am trying to get those in place, but it isn't responsive, and they get distorted. I am seeking some help to solve this.
please do look at the link(https://i.stack.imgur.com/ZO5F2.jpg) above.
Thank you!!
#import url('https://fonts.googleapis.com/css2?family=Alice&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Alice&family=NTR&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: #F4F4F4;
}
navup{
justify-content: space-around;
align-items: center;
display: flex;
min-height: 62px;
background-color: #000000;
color: white;
}
navup h1{
/*padding-left: 40rem;*/
font-family: 'alice', serif;
font-size: 36px;
font-weight: normal;
font-style: italic;
}
navup li{
list-style: none;
}
navup ul li{
display: flex;
}
navup li a{
/*padding-right: -10rem;*/
display: flex;
color: white;
text-decoration: none;
font-family: 'NTR', sans-serif;
font-size: 20px;
}
navup img{
/*margin-right: 200px;*/
}
navlo{
width: 100%;
justify-content: space-evenly;
align-items: center;
display: flex;
max-height: 60px;
margin: auto;
background-image: linear-gradient(#FFFFFF,#898989);
border-radius: 0px 0px 0px 9px;
}
navlo img{
width: 61px;
height: 61px;
margin-top: 2.95px;
}
navlo ul{
display: flex;
}
navlo ul li{
list-style: none;
display: flex;
padding: 0rem 1.5rem;
}
navlo li a{
color: #000000;
text-decoration: none;
font-family: 'NTR', sans-serif;
font-size: 20px;
font-weight: bold;
}
.barone img{
position: absolute;
width: 89px;
height: 10px;
left: 906px;
top: 46px;
background: #001E5A;
border-radius: 4px;
}
.bartwo img{
position: absolute;
width: 102px;
height: 10px;
left: 1025px;
top: 46px;
background: #001E5A;
border-radius: 4px;
}
.barthree img{
position: absolute;
width: 109px;
height: 10px;
left: 1157px;
top: 46px;
background: #001E5A;
border-radius: 4px;
}
.barfour img{
/* Services bar */
position: absolute;
width: 89px;
height: 10px;
left: 1296px;
top: 46px;
background: #001E5A;
border-radius: 4px;
}
.barfive img{
/* Partners Bar */
position: absolute;
width: 101px;
height: 10px;
left: 1415px;
top: 46px;
background: #001E5A;
border-radius: 4px;
}
.barsix img{
position: absolute;
width: 111px;
height: 11px;
left: 1546px;
top: 46px;
background: #001E5A;
border-radius: 4px;
}
.bars img{
display: inline;
/*width: 50%;*/
margin-top: 70px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewpoint" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="">
<link rel="stylesheet" href="style.css">
<title>Art</title>
<style>
/* width */
::-webkit-scrollbar {
background-color: grey;
width: 13px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: black;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: black;
}
</style>
</head>
<body>
<SECTION>
<navup>
<div class="logo">
<h1>Art</h1>
</div>
<!-- <ul>
<li>
Login/Signup
</li>
<li>
<img src="../images/account.png">
</li>
</ul> -->
</navup>
</SECTION>
<section>
<navlo>
<ul>
<li>
HOME
</li>
<li>
ABOUT ME
</li>
<li>
BUY ART
</li>
<li>
BLOG
</li>
<li>
PARTNERED
</li>
<li>
CONTACT ME
</li>
</ul>
</navlo>
<section class="bars">
<div class="barone"><img src="../images/homebar.svg" alt="a lower bar for home"></div>
<div class="bartwo"><img src="../images/aboutmebar.svg" alt="a lower bar for home"></div>
<div class="barthree"><img src="../images/buyartbar.svg" alt="a lower bar for home"></div>
<div class="barfour"><img src="../images/blogbar.svg" alt="a lower bar for home"></div>
<div class="barfive"><img src="../images/partnersbar.svg" alt="a lower bar for home"></div>
<div class="barsix"><img src="../images/contactmebar.svg" alt="a lower bar for home"></div>
</section>
</section>
</body>
</html>
Rajayogi Nandina
I am new to Html and css but I am stuck with a buggy problem. I created my first responsive website but when i scale it down to small sizes and scroll to the right there are 40-50 px of empty space with only the background . I must add that when I scale it up the empty part disappears. Some help?
html {
width: 100%;
display: inline-block;
margin: 0px;
}
body {
margin: auto;
font-family: Arial;
background-image: url("weed.png");
margin-left: 0px;
margin-right: 0px;
}
/*Weedmania Logo*/
#weedmania_shade{
z-index: -1;
height: 255px;
width: 100%;
margin-left: 0px;
margin-top: 0px;
background-color: rgba(0,0,0,0.7);
}
#weedmania_logo_img {
margin-right: -120px;
margin-top: -405px;
height: 370px;
width: 90%;
min-width: 350px;
max-width: 800px;
}
/*Site Banner*/
#site_panel {
float: left;
background-image: url(weeds.jpg);
font-family: "Gigi Regular";
width: 98%;
color: green ;
border: 4px solid black;
padding: 5px;
margin-left: 6px;
margin-top: -175px;
}
#site_panel p {
font-style: italic;
text-shadow: 1px 2px black;
}
#site_panel h1 {
text-shadow: 1px 3px black;
}
/*Menu*/
nav {
float: left;
width: 10%;
max-width: 200px;
min-width: 100px;
height: 100px;
margin-top: 0px;
margin-left: 6px;
}
nav ul{
padding: 0;
background-color: green;
border: 2px solid black;
}
nav ul li {
list-style: none;
border : 1px solid lime;
padding : 5px;
}
nav ul li a{
color: lime;
list-style: none;
text-decoration: none;
font-family: "Arial";
font-style: italic;
}
nav ul li a:hover{
color : #ccffb3;
text-decoration: underline;
}
/*Leaves And Joint*/
#joint_figure #joint_img{
float: center;
border: 3px solid black;
margin-top: 0px;
width: 50%;
min-width: 157px;
}
#leaf_img_left{
float: left;
max-width: 300px;
width: 25%;
height: 30%;
margin-left: -30px;
margin-top: 10px;
}
#leaf_img_right{
float: right;
max-width: 300px;
width: 25%;
height: 30%;
margin-right: -30px;
margin-top: 10px;
}
#description{
width: 50%;
height: 10%;
min-width: 300px;
font-size: 110%;
background-color: rgba(0,0,0,0.75);
}
#description_text{
color: rgba(255,255,255,0.5);
font-family: "Comic Sans MS";
padding-top: 2px;
text-align: center;
font-size: 83%;
}
<!DOCTYPE html>
<html>
<head>
<title> WeedMania - Weed's biggest community </title>
<link rel="stylesheet" href="style.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" contnet="initial-scale=1.0">
</head>
<body>
<div><nav>
<ul>
<li>
Index
</li>
<li>
Good Trip
</li>
<li>
Buy Weed
</li>
</ul>
</nav></div>
<article><center><figure id="weedmania_shade"></figure></center></article>
<div><figure id="weedmania_logo"><center><img src="weedmania_logo.png" id="weedmania_logo_img" alt=""></center></figure></div>
<div><figure id="stop"></figure></div>
<div><article id="site_start">
<header id="site_panel">
<h1> Smoke Weed Everyday </h1>
<p> Posted by <strong>WeedMania</strong> </p>
</header>
<div><figure class="leaves">
<img id="leaf_img_left" src="leaf.png" alt="">
</figure></div>
<div><figure class="leaves">
<img id="leaf_img_right" src="leaf.png" alt="">
</figure></div>
</article></div>
<div><center><figure id="joint_figure">
<img id="joint_img" src="joint1.jpg" alt="">
</figure></center></div>
<center><article id="description">
<p id="description_text">This forum is designed to bring you the latest news about weed worldwide, informations about weed strains, smoking stories and , basically everything you need to know about weed. Feel free the create an account and join the community</p>
</article></center>
</body>
</html>
If you don't want space to the right side. you need to remove 'min-width' or width with padding. Please see below example. you cannot have any spaces.
html {
width: 100%;
display: inline-block;
margin: 0px;
}
body {
margin: auto;
font-family: Arial;
background-image: url("weed.png");
margin-left: 0px;
margin-right: 0px;
}
/*Weedmania Logo*/
#weedmania_shade{
z-index: -1;
height: 255px;
width: 100%;
margin-left: 0px;
margin-top: 0px;
background-color: rgba(0,0,0,0.7);
}
#weedmania_logo_img {
//margin-right: -120px;
margin-top: -405px;
height: 370px;
width: 90%;
//min-width: 350px;
max-width: 800px;
}
/*Site Banner*/
#site_panel {
float: left;
background-image: url(weeds.jpg);
font-family: "Gigi Regular";
//width: 98%;
color: green ;
border: 4px solid black;
padding: 5px;
margin-left: 6px;
margin-top: -175px;
}
#site_panel p {
font-style: italic;
text-shadow: 1px 2px black;
}
#site_panel h1 {
text-shadow: 1px 3px black;
}
/*Menu*/
nav {
float: left;
width: 10%;
max-width: 200px;
min-width: 100px;
height: 100px;
margin-top: 0px;
margin-left: 6px;
}
nav ul{
padding: 0;
background-color: green;
border: 2px solid black;
}
nav ul li {
list-style: none;
border : 1px solid lime;
padding : 5px;
}
nav ul li a{
color: lime;
list-style: none;
text-decoration: none;
font-family: "Arial";
font-style: italic;
}
nav ul li a:hover{
color : #ccffb3;
text-decoration: underline;
}
/*Leaves And Joint*/
#joint_figure #joint_img{
float: center;
border: 3px solid black;
margin-top: 0px;
width: 50%;
//min-width: 157px;
}
#leaf_img_left{
float: left;
max-width: 300px;
width: 25%;
height: 30%;
margin-left: -30px;
margin-top: 10px;
}
#leaf_img_right{
float: right;
max-width: 300px;
width: 25%;
height: 30%;
margin-right: -30px;
margin-top: 10px;
}
#description{
//width: 50%;
height: 10%;
//min-width: 300px;
font-size: 110%;
background-color: rgba(0,0,0,0.75);
}
#description_text{
color: rgba(255,255,255,0.5);
font-family: "Comic Sans MS";
padding-top: 2px;
text-align: center;
font-size: 83%;
}
<!DOCTYPE html>
<html>
<head>
<title> WeedMania - Weed's biggest community </title>
<link rel="stylesheet" href="style.css">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div><nav>
<ul>
<li>
Index
</li>
<li>
Good Trip
</li>
<li>
Buy Weed
</li>
</ul>
</nav></div>
<article><center><figure id="weedmania_shade"></figure></center></article>
<div><figure id="weedmania_logo"><center><img src="weedmania_logo.png" id="weedmania_logo_img" alt=""></center></figure></div>
<div><figure id="stop"></figure></div>
<div><article id="site_start">
<header id="site_panel">
<h1> Smoke Weed Everyday </h1>
<p> Posted by <strong>WeedMania</strong> </p>
</header>
<div><figure class="leaves">
<img id="leaf_img_left" src="leaf.png" alt="">
</figure></div>
<div><figure class="leaves">
<img id="leaf_img_right" src="leaf.png" alt="">
</figure></div>
</article></div>
<div><center><figure id="joint_figure">
<img id="joint_img" src="joint1.jpg" alt="">
</figure></center></div>
<center><article id="description">
<p id="description_text">This forum is designed to bring you the latest news about weed worldwide, informations about weed strains, smoking stories and , basically everything you need to know about weed. Feel free the create an account and join the community</p>
</article></center>
</body>
</html>
I tried researching this question on this site, but everything wasn't related to my particular site. Pretty much I have a background image on my home page, and the background is "fixed" and "covered". I am not sure if that's the reason why it is not working. I want the "View Works" button in the center of the computer. Please help!
HTML:
<html>
<head>
<meta charset="UTF-8">
<title>Kasia's Website </title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
<a href="works.html">
<input class="butt" type="button" value="VIEW WORKS" />
</a>
</div>
<div id="page">
<div id="sidebar">
<div>
<a href="index.html"><img id="logo"
src="http://i66.tinypic.com/xnf4us.png" /></a>
</div>
<div>
<ul class="sb">
<li> Home </li>
<li> About </li>
<li> Works </li>
<li> Contact </li>
</ul>
</div>
<div id="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$('#sidebar-btn').click(function(){
$('#sidebar').toggleClass('visible');
});
});
</script>
</div>
</body>
</html>
CSS
#charset "UTF-8";
body {
background-image: url(http://i66.tinypic.com/ww1d7n.png);
background-attachment: fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
font-family: "Helvetica Neue";
}
#sidebar {
background: #05E2D4;
background-color: rgba(5, 226, 212, 0.7);
width: 220px;
height: 100%;
display: block;
position: absolute;
left: -200px;
top: 0px;
transition: left 0.3s linear;
}
#sidebar.visible {
left: 0px;
transition: left 0.3s linear;
}
ul.sb {
margin: 0px;
padding: 0px;
}
ul li {
list-style: none;
}
ul li a {
text-decoration: none;
color: #FFFFFF;
padding: 200px;
display: block;
width: 180px;
padding: 30px;
text-transform: uppercase;
font-weight: 105;
letter-spacing: 2.5px;
line-height: 30%;
margin-left: 20px;
}
#sidebar-btn {
display: inline-block;
vertical-align: middle;
width: 20px;
height: 15px;
position: absolute;
margin: 20px;
top: 0px;
right: -60px;
cursor: pointer;
}
#sidebar-btn span {
height: 2px;
background: #000000;
margin-bottom: 5px;
display: block;
}
a {
text-decoration: none;
}
a:link {
color: #FFFFFF;
}
a:visited {
color: none;
}
a:hover {
color: #ffcd03;
}
a:active {
color: #ffcd03;
}
#logo {
margin: 20px 50px 20px 50px;
}
#page {
max-width: 800px;
min-width: 600px;
}
#Kasiaport {
width: 500px;
margin: 50px 200px 50px 200px;
}
aside {
width: 30%;
background-color: white;
padding: 40px 40px 20px 40px;
margin: auto;
}
p.work {
color: white;
font-size: 9px;
text-transform: uppercase;
border-style: solid;
border-color: white;
margin-left: auto;
margin-right: auto;
width: 70px;
padding: 15px 30px 15px 30px;
display: block;
}
.butt {
-webkit-border-radius: 0;
-moz-border-radius: 0;
background-color: transparent;
border-radius: 2px;
color: #ffffff;
font-size: 15px;
padding: 10px 20px 10px 20px;
border: solid #FFFFFF 2px;
text-decoration: none;
font-weight: 200;
letter-spacing: 1.5px;
font-family: "Helvetica Neue";
text-align: center;
margin-left: 45%;
margin-top: 32%;
position: absolute;
}
.butt:hover {
border-color: #ffcd03;
background-color: none;
color: #ffcd03;
text-decoration: none;
}
http://codepen.io/kasiariele/pen/MaLdWv/
In order to see the error visually, you may need to go in full screen mode (http://codepen.io/kasiariele/full/MaLdWv/) or make the screen smaller so you can see it scroll.
Thank you.
Don't use margin to "center" your elements as you did.
You can add this code and the button will be centered both horizontally and vertically without having to adjust your old code:
.butt {
margin: 0; /* reset your old margin */
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Check browser support for transforms and any extra prefixes needed (-ms for ie9).