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.
Related
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>
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;
}
I'm struggling with a CSS issue and I was hoping for some help.
Here's the story:
I'm designing a header. It's split in two divs. First one must be 70% wide and second one 30% wide. I used the css-property "Display: table-cell" in order to place them side by side.
div.chapo {
width: 70%;
display: table-cell;
}
div.img_header {
width: 30%;
display: table-cell;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
background-image: url(...);
}
It's working fine when the text placed in the first div is long enough:
Buuuut... when text is short, it's all messy:
I can't figure out why my widths values aren't kept in this specific case.
Thanks in advance for all who would be kind enough to help me...
Here's the fiddle link: https://jsfiddle.net/vinny38/verucw8p/3/
I wrapped both div ce_text chapo and img_header to .test-wrap class and give it to below css:
.test-wrap {
display: table;
width: 100%;
}
body,
div {
margin: 0;
padding: 0;
font-family: 'Roboto condensed', sans-serif;
}
div.inside {
position: relative;
}
div.chapo {
background-color: #ef4056;
background-image: none;
width: 70%;
height: 255px;
display: table-cell;
vertical-align: top;
background-color: #aaa;
color: #fff;
padding: 20px 8%;
position: relative;
}
h1 {
margin-top: 0;
font: 1.4em 'Oswald', Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
}
div.chapo p {
width: 100%;
min-width: 100%;
position: relative;
padding: 0;
font-size: 1em;
font-weight: 300;
}
div.img_header {
width: 30%;
position: relative;
display: table-cell;
vertical-align: top;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
background-image: url(https://image.freepik.com/free-psd/abstract-background-design_1297-73.jpg);
}
div.mod_breadcrumb {
height: 40px;
margin: 0;
padding-top: 5px;
padding-right: 30px;
padding-bottom: 5px;
background-color: #e3e3e3;
padding-left: 8%;
}
.mod_breadcrumb ul li {
height: 30px;
display: inline-block;
padding: 3px 0;
color: #828282;
}
.test-wrap {
display: table;
width: 100%;
}
<div class="inside">
<div class="test-wrap">
<div class="ce_text chapo">
<h1>My header</h1>
<div class='text-chapo'>
<p>Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consectetur adipiscing </p>
</div>
</div>
<div class="img_header"></div>
</div>
<div class="mod_breadcrumb block">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
This CSS it's ok... the 'float:left' option and relative width are different.
Here, I disccount the paddings left and right of total width. The float is necessary to horizontal align.
body,
div {
margin: 0;
padding: 0;
font-family: 'Roboto condensed', sans-serif;
}
div.inside {
position: relative;
}
div.chapo {
background-image: none;
width: 50%;
height: 255px;
vertical-align: top;
background-color: #aaa;
color: #fff;
padding: 20px 10%;
position: relative;
float: left;
}
h1 {
margin-top: 0;
font: 1.4em 'Oswald', Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
}
div.chapo p {
width: 100%;
position: relative;
padding: 0;
font-size: 1em;
font-weight: 300;
}
div.img_header {
width: 30%;
position: relative;
height: 295px;
vertical-align: top;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
float: left;
-webkit-background-size: cover;
background-image: url(https://image.freepik.com/free-psd/abstract-background-design_1297-73.jpg);
}
div.mod_breadcrumb {
height: 40px;
margin: 0;
padding-top: 5px;
padding-right: 2%;
padding-bottom: 5px;
background-color: #e3e3e3;
padding-left: 8%;
float:left;
width:90%;
}
.mod_breadcrumb ul li {
height: 30px;
display: inline-block;
padding: 3px 0;
color: #828282;
}
Try like this:
You have to define float property as well as you must define height:255px (as for another div you have given height as 255px )for your img_header class. It's really necessary.
body,
div {
margin: 0;
padding: 0;
font-family: 'Roboto condensed', sans-serif;
box-sizing: border-box
}
div.inside {
position: relative;
}
div.chapo {
background-color: #ef4056;
background-image: none;
width: 70%;
float:left;
height: 255px;
display: table-cell;
vertical-align: top;
background-color: #aaa;
color: #fff;
padding: 20px 8%;
position: relative;
}
h1 {
margin-top: 0;
font: 1.4em 'Oswald', Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
}
div.chapo p {
width: 100%;
min-width: 100%;
position: relative;
padding: 0;
font-size: 1em;
font-weight: 300;
}
.clearfix {
clear:both;
}
.img_header {
width: 30%;
height: 255px;
float: right;
position: relative;
display: table-cell;
vertical-align: top;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
background-image: url(https://image.freepik.com/free-psd/abstract-background-design_1297-73.jpg);
}
div.mod_breadcrumb {
height: 40px;
margin: 0;
padding-top: 5px;
padding-right: 30px;
padding-bottom: 5px;
background-color: #e3e3e3;
padding-left: 8%;
}
.mod_breadcrumb ul li {
height: 30px;
display: inline-block;
padding: 3px 0;
color: #828282;
}
<div class="inside">
<div class="ce_text chapo">
<div class='text-chapo'>
<h1>My header</h1>
<p>Lorem </p>
<p>Aliquam porttitor.</p>
</div>
</div>
<div class="img_header"></div>
<div class="mod_breadcrumb block">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="clearfix"></div>
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
I am having the hardest time here...I have searched for a while now and can't quite figure out how to properly get my text to properly re-size in my parent container.
Here is the code:
html,
body,
box,
thumbnail_image,
overlay,
h1,
h3,
h6,
p,
body {
width: 100%;
padding-bottom: 25px;
font-size: 100%;
}
input {
font-family: "Roboto";
position: absolute;
top;
25.5px;
font-weight: 700;
font-size: 14px;
color: #fff;
background-color: transparent;
text-align: right;
border-width: 0;
width: 100%;
margin: 0 0 .1em 0;
}
.heart_button {
position: absolute;
top: 25.5px;
right: 55px;
}
.heart_button:hover,
.heart_button:active,
.heart_button:focus {
color: #dd0239;
}
.heart_background {
position: absolute;
top: 20px;
right: 20px;
background-color: #000000;
opacity: .1;
width: 65px;
height: 30px;
border-radius: 15px;
}
.box {
margin: 50px auto;
position: relative;
max-width: 90%;
height: 490px;
width: 700px;
background-color: #18a0ff;
box-shadow: 1px 15px 50px 2px;
}
.quote_image {
position: absolute;
opacity: .1;
top: 62px;
left: 51px;
}
.image_overlay {
background-color: #282a37;
width: 170px;
height: 490px;
position: absolute;
float: left;
}
.thumbnail_image {
position: absolute;
float: left;
opacity: .12;
display: inline-block;
}
.text_container {
left: 200px;
width: 400px;
height: 338px;
max-width: 90%;
word-wrap: break-word;
position: absolute;
}
h1 {
color: #fff;
text-transform: uppercase;
font-size: 3.7em;
font-family: Montserrat;
font-weight: 700;
line-height: 1.3;
text-align: left;
width: 100%;
word-wrap: break-word;
}
.author_name {
position: absolute;
left: 206px;
bottom: 0px;
}
h3 {
font-family: Open Sans;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 1em;
text-align: left;
color: #fff;
}
p {
font-family: "Roboto";
font-weight: 700;
font-size: 14px;
color: #fff;
text-align: center;
}
h6 {
font-family: Open Sans;
font-weight: light;
font-size: 1em;
letter-spacing: 2px;
text-transform: uppercase;
text-align: center;
}
nav {
position: absolute;
left: 35px;
bottom: 28px;
}
html {
background: linear-gradient(209deg, #E5ECEF 40%, #BBC2C5 100%) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#footer {
clear: both;
}
#media screen and (max-width: 649px) {
.box {
width: 450px;
height: 350px;
max-width: 90%;
}
h1 {
font-size: 2em;
word-wrap: break-word;
}
.text_container {
width: 280px;
height: 236.6px;
max-width: 90%;
}
}
<body>
<div class="box">
<div class="heart_button">
<img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457311522/little_heart_jle1j3.png">
</div>
<div class="heart_background">
</div>
<div class="image_overlay">
</div>
<div class="thumbnail_image">
<img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457298445/Sheldon_Pic_l3cprk.jpg">
</div>
<div class="text_container">
<h1>Don't You think that if I were wrong, I'd know it?</h1>
</div>
<div class="author_name">
<h3> - Sheldon Cooper </h3>
</div>
<div class="quote_image">
<img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457314397/quotations_image_wfwimc.png">
</div>
<nav>
<img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457364436/arrow-left_moebxn.png">
<img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457364436/arrow-right_oilpij.png">
</nav>
</div>
</body>
So again, my thought was that I could have the .box class be a parent container and then the .text_container that would be nested could 're-size the text in a responsive manner in smaller viewports. But it's not...and my hair is going grey.
Errggghhhh...
child with the position absolute can't change the size or its parent or vice versa. Alternatively you can use the float property and set it to "right". Also, you might want to use % instead of pixels if you're aiming for a responsive design.
I guess what you need is http://freqdec.github.io/slabText/
font-size cannot do resize accroding to the windows's width, unless you define different font-size accroding to the width with Media Queries