The text in this header centers just fine until you shrink the width of the page, then it just moves the text to the right.
You can test it here:
http://jsfiddle.net/ors2gqey/
.header {
background-color: #000;
width: 100%;
display: block;
overflow: hidden;
}
.headerImg {
padding: 200px;
background-image: url("header.jpg");
background-position: 50% 100%;
background-size: cover;
background-attachment: fixed;
text-align: center;
}
.header h1 {
min-width: 140px;
text-align: center;
color: white;
font-size: 4.5em;
}
<header class="header">
<div class="headerImg">
<h1>TEST TEXT</h1>
</div>
</header>
#media (max-width: 600px) {
.headerImg {
padding: 0;
}
}
.header {
background-color: #000;
width: 100%;
display: block;
overflow: hidden;
}
.headerImg {
padding: 200px;
background-image: url("header.jpg");
background-position: 50% 100%;
background-size: cover;
background-attachment: fixed;
text-align: center;
}
#media (max-width: 600px) {
.headerImg {
padding: 0;
}
}
.header h1 {
min-width: 140px;
text-align: center;
color: white;
font-size: 4.5em;
}
<header class="header">
<div class="headerImg">
<h1>TEST TEXT</h1>
</div>
</header>
The problem was that I used padding on all sides.
Solved with just using padding on the top and bottom:
.headerImg {
padding-top: 200px;
padding-bottom: 200px;
background-image: url("header.jpg");
background-position: 50% 100%;
background-size: cover;
background-attachment: fixed;
text-align: center;
}
Related
The image is cut off a bit and the text to the left isn’t centering also I tried to add a min-height to the pics and max-width to banner image for responsiveness but they didn’t take. any tips on these?
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Comfortaa', cursive;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
color: black;
}
h1 {
font-family: 'Righteous', cursive;
font-size: 4rem;
}
img {
width: 100%;
}
header {
height: 8vh;
width: 90%;
margin: 0 auto;
}
.nav-links {
height: 8vh;
width: 0 auto;
display: flex;
justify-content: space-around;
align-items: center;
}
.nav-link:hover {
border-bottom: 4px black solid;
}
.banner {
background-image: url(/Aleesha/woman\ wit\ hat.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 30vh;
margin-bottom: 2vh;
}
.hats {
display: flex;
height: 40vh;
}
.hat-text {
border: 2px dotted;
flex: 1;
display: flex;
}
h2 {
width: 100%;
border: 2px dotted;
font-size: 8rem;
align-items: center;
}
#slider {
flex: 1.8;
overflow: hidden;
}
#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
animation: 20s slider infinite;
}
#slider figure img {
width: 100%;
float: left;
max-width: 20%;
min-height: 100%;
object-fit: contain;
}
#keyframes slider {
0% {
left: 0;
}
20% {
left: 0;
}
25% {
left: -100%;
}
45% {
left: -100%;
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: -300%;
}
95% {
left: -300%;
}
100% {
left: -400%;
}
}
<html>
<body>
<main>
<!--BANNER-->
<section class="banner">
<div class="container">
<div class="banner-content">
<h1>ALEESHA</h1>
</div>
</div>
</section>
<!--HATS-->
<section class="hats">
<div class="hat-text">
<H2>HATS</H2>
</div>
<div id="slider">
<figure>
<img src="/Aleesha/Pics/Slideshow/Hats/slide1.jpg" alt="Black Reptile Hat">
<img src="/Aleesha/Pics/Slideshow/Hats/slide2.jpg" alt="Cheeta Squence Hat">
<img src="/Aleesha/Pics/Slideshow/Hats/slide3.jpg" alt="White Thug Life Bucket Hat">
<img src="/Aleesha/Pics/Slideshow/Hats/slide4.jpg" alt="yellow W worn blue hat">
<img src="/Aleesha/Pics/Slideshow/Hats/slide1.jpg" alt="Life is Fantastic yellow hat">
</figure>
</div>
</section>
</main>
</body>
</html>
I'm try create simple website for improve my skills in HTML and CSS languages but I don't know how to put this text in center please check image below
Preview image
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
.orange {
width: 50%;
height: 100%;
background-color: #f5a130;
background-size: cover;
float: left;
}
.black {
width: 50%;
height: 100%;
background-color: #383838;
background-size: cover;
float: right;
}
.title {
margin: 0;
font-family: 'Montserrat', sans-serif;
color: #454;
text-align: center;
letter-spacing: 20px;
}
<body>
<div class="orange"></div>
<div class="black"></div>
<h1 class="title">TEST WEBSITE</h1>
</body>
I tried use text-align but It's go to bottom
you should work with positions relative and absolute so you can control it i added : .title {
position:relative;
bottom:50%;}
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
.orange {
width: 50%;
height: 100%;
background-color: #f5a130;
background-size: cover;
float: left;
}
.black {
width: 50%;
height: 100%;
background-color: #383838;
background-size: cover;
float: right;
}
.title {
position:relative;
bottom:50%;
margin: 0;
font-family: 'Montserrat', sans-serif;
color: #454;
text-align: center;
letter-spacing: 20px;
}
<body>
<div class="orange"></div>
<div class="black"></div>
<h1 class="title">TEST WEBSITE</h1>
</body>
I've seen this asked on SO but I can't seem to get it to work. I am trying to take a horizontal ul and have it change to vertical when the screen size is less than 768px.
Here is my css code:
/* HeaderWrap */
#headerwrap {
background: url(../img/topgraph.png) no-repeat center top;
position: relative;
background-color: #3e86c3;
background-size: cover;
margin-top: -20px;
padding-top: 200px;
height:100vh;
background-attachment: scroll;
background-position: 0px 0px;
background-repeat: no-repeat;
min-height: 650px;
width: 100%;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#headerwrap h1 {
text-align: center;
margin-top: 60px;
margin-bottom: 15px;
color: white;
font-size: 45px;
font-weight: 300;
letter-spacing: 1px;
}
#headerwrap h2 {
text-align: center;
margin: 60px 200px 15px 200px;
color: white;
font-size: 35px;
font-weight: 300;
letter-spacing: 1px;
}
#headerwrap .header-links {
position: absolute;
bottom: 0;
text-align: center;
width: 100%;
height: 160px;
color: #fff;
padding-bottom: 20px;
}
#headerwrap ul {
text-align: center;
text-decoration: none;
list-style-type: none;
margin: 0;
overflow: hidden;
}
#headerwrap li {
float: left;
padding-left: 18%;
font-size: 24px;
}
#headerwrap img {
width: 100px;
height: 100px;
}
#media (max-width: 768px) {
#headerwrap {
padding-top: 100px;
}
#headerwrap h1 {
margin-top: 60px;
font-size: 36px;
}
#headerwrap h2 {
margin: 30px 50px 15px 50px;
font-size: 20px;
}
#headerwrap .header-links {
position: absolute;
bottom: 0;
text-align: center;
width: 100%;
height: 340px;
color: #fff;
padding-bottom: 20px;
}
#headerwrap li {
font-size: 18px;
display: block !important;;
padding: 0;
}
#headerwrap img {
width: 60px;
height: 60px;
}
<div id="headerwrap">
<div class="row">
<h1>Headline</h1>
<h2>Marketing blurb </h2>
<div class="col-lg-6">
</div>
<div>
<!--<img src="img/topgraph.png" class="bg">-->
</div>
</div>
<div class="header-links">
<ul>
<li><img src="img/icons/icnDevelopers_wh.png"><br>Prebid.JS</li>
<li><img src="img/icons/icnGetStarted_wh.png"><br>Get Started!</li>
<li><img src="img/icons/icnAdOps_wh.png"><br>Ad Ops</li>
</ul>
</div>
</div>
<!-- /headerwrap -->
No matter what I do within the #media query the li elements stay horizontal. Any help would be appreciated.
On your #media you have to set the width property of your ul and li to the 100%
#media (max-width: 768px) {
...
#headerwrap ul {
float: left;
width: 100%;
}
#headerwrap li {
width: 100%;
}
...
}
Very simple example using flexbox.
https://codepen.io/anon/pen/QZEXVg
Key is the media query enforcing the constraint.
#media (min-width: 768px) {
.navbar__list {
display: flex;
justify-content: flex-start;
}
}
Add width: 100% to the <li> in the #media query.
Demo:
/* HeaderWrap */
#headerwrap {
background: url(../img/topgraph.png) no-repeat center top;
position: relative;
background-color: #3e86c3;
background-size: cover;
margin-top: -20px;
padding-top: 200px;
height:100vh;
background-attachment: scroll;
background-position: 0px 0px;
background-repeat: no-repeat;
min-height: 650px;
width: 100%;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#headerwrap h1 {
text-align: center;
margin-top: 60px;
margin-bottom: 15px;
color: white;
font-size: 45px;
font-weight: 300;
letter-spacing: 1px;
}
#headerwrap h2 {
text-align: center;
margin: 60px 200px 15px 200px;
color: white;
font-size: 35px;
font-weight: 300;
letter-spacing: 1px;
}
#headerwrap .header-links {
position: absolute;
bottom: 0;
text-align: center;
width: 100%;
height: 160px;
color: #fff;
padding-bottom: 20px;
}
#headerwrap ul {
text-align: center;
text-decoration: none;
list-style-type: none;
margin: 0;
overflow: hidden;
}
#headerwrap li {
float: left;
padding-left: 18%;
font-size: 24px;
}
#headerwrap img {
width: 100px;
height: 100px;
}
#media (max-width: 768px) {
#headerwrap {
padding-top: 100px;
}
#headerwrap h1 {
margin-top: 60px;
font-size: 36px;
}
#headerwrap h2 {
margin: 30px 50px 15px 50px;
font-size: 20px;
}
#headerwrap .header-links {
position: absolute;
bottom: 0;
text-align: center;
width: 100%;
height: 340px;
color: #fff;
padding-bottom: 20px;
}
#headerwrap li {
font-size: 18px;
display: block !important;
padding: 0;
width: 100%
}
#headerwrap img {
width: 60px;
height: 60px;
}
<div id="headerwrap">
<div class="row">
<h1>Headline</h1>
<h2>Marketing blurb </h2>
<div class="col-lg-6">
</div>
<div>
<!--<img src="img/topgraph.png" class="bg">-->
</div>
</div>
<div class="header-links">
<ul>
<li><img src="img/icons/icnDevelopers_wh.png"><br>Prebid.JS</li>
<li><img src="img/icons/icnGetStarted_wh.png"><br>Get Started!</li>
<li><img src="img/icons/icnAdOps_wh.png"><br>Ad Ops</li>
</ul>
</div>
</div>
<!-- /headerwrap -->
Remove float: left; for the "regular" li elements and add display: inline-block instead. Otherwise they will also be floated (displayed next to each other) on smaller screens.
Or add float: none in the media query.
My site www.stefaniefranciotti.com functions as intended on desktop, but on mobile the full screen iframe containing a three.js canvas crashes the site. The three.js canvas has a 3d object in it that the user can rotate around, on mobile it sort of scoots off the screen. I have the iframe styled as follows:
html:
<div class="row">
<div class="my-fluid-container">
<div class="intrinsic-container">
<iframe src="stefhead.html" name="stefhead" frameborder="0" scrolling="no" allowfullscreen ><p>Your browser does not support iframes.</p></iframe>
<div class="header-content-inner wow fadeIn text-center">
<h1 class="awesome">Stefanie Franciotti</h1>
<hr>
<p style= "color: gray; font-weight: 400;font-size: 16px;margin-bottom: 50px;">UI/UX designer in NYC.</p>
<FORM METHOD="LINK" ACTION="password.html">
<INPUT TYPE="submit" class="btn btn-primary btn-lg outline" VALUE="Resume & Portfolio">
</FORM>
</div>
</div>
</div>
</div>
css:
body { padding-top: 70px;
font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
height: 100%;
}
.intrinsic-container {
position: relative;
height: 0;
overflow: hidden;
}
/* 16x9 Aspect Ratio */
.intrinsic-container-16x9 {
padding-bottom: 56.25%;
}
/* 4x3 Aspect Ratio */
.intrinsic-container-4x3 {
padding-bottom: 75%;
}
.intrinsic-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
margin-top: 50px;
}
header {
position: relative;
width: 100%;
min-height: auto;
text-align: center;
color: #fff;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
background-color: white;
}
header .header-content {
position: relative;
width:100%;
height: auto;
padding: 100px 15px;
text-align: center;
float: left;
}
header .header-content .header-content-inner h1 {
margin-top: 0;
margin-bottom: 0;
font-weight: 100;
}
h1{
font-weight: 100;
font-size: 4em;
}
header .header-content .header-content-inner hr {
margin: 30px auto;
}
header .header-content .header-content-inner p {
margin-bottom: 50px;
font-size: 16px;
font-weight: 400;
color: gray;
}
#media(min-width:768px) {
header {
min-height: 100%;
}
header .header-content {
position: absolute;
top: 50%;
padding: 0 50px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
header .header-content .header-content-inner {
margin-right: auto;
margin-left: auto;
max-width: 1000px;
}
header .header-content .header-content-inner p {
margin-bottom: 50px;
font-size: 16px;
font-weight: 400;
color: gray;
}
}
Any help would be appreciated!!! thank you
To disable the iframe you can use this code:
#media only screen and (max-width : 480px) {
iframe{display:none;}
}
you can change the screen width to whatever you want it to be.
Cheers
the background of the "main" part of the homepage(marked in red), should be black but because of the image, it cannot be seen. This is my code:
body {
color: white;
font-family: futura;
background-color: black;
font-size: 15px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
background: url(Website_Bilder/background.png)
no-repeat center center fixed;
-moz-background-size: cover;
background-size: cover;
}
head {
font-size: 30px;
display: block;
position:relative;
background-position: center;
background-size: cover;
background-attachment: fixed;
text-align: center;
}
section {
font-size: 15px solid #a0a0a0;
border: 50px;
padding: 0%;
clear: ;
margin: 1em auto;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* link color */
li a:hover {
background-color: #111;
}
img {
width: 100%;
float: center;
height: auto;
max-width:100%;
display: block;
margin: 1em auto;
left:0px;
top:100px;
z-index:-1;
}
p {
padding 10px 20px 10px 20px;
margin 20px;
}
and this is what I get:
/I made better screenshot and added more code
In case that I understand you correctly: You want your red bordered area to have a black background instead of the image that is defined as background in your CSS body selector? Then you just have to define a new CSS class/id for the html tag that surrounds this area, like this:
html, body {
height: 100%;
width: 100%;
}
body {
color: white;
font-family: futura;
background-color: black;
font-size: 15px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
background: url(http://tub.tubgit.com/reimg/resize-img.php?src=http://photos.up-wallpaper.com/images251/jdicnfzws24.jpg&h=1080&w=1920)
no-repeat center center fixed;
-moz-background-size: cover;
background-size: cover;
}
div.redArea {
min-width: 70%;
height: 100%;
background-color: black;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="redArea">
<p>this is a test</p>
</div>
</body>
</html>
The width of the redArea class has to be defined as min-width because you have set the max-width of your body selector to 700px.