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
Related
I was trying to make this parallax-website. In the CSS I am defining properties for .image1 . So I wrote down properties and then just below it I again wrote some properties for the same class .image1. But only the ~ opacity, position (from 1st) and other properties defined (from 2 time) were applied. I checked the it using Inspect Element and all other properties were cut down. I am not able to understand why this is happening. Please help me.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
font-family: 'Lato', sans-serif;
font-weight: 400;
line-height: 1.8em;
color: #666;
}
.image1 {
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
opacity: 0.70;
}
.image1 {
background: url('https://jolly-kalam-23776e.netlify.app/parallaxsite/img/image1.jpg');
min-height: 100%;
}
.text-box-image1 {
position: absolute;
/* To bring that box in center */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.text-image1 {
font-size: 27px;
letter-spacing: 8px;
color: white;
background-color: #111;
padding: 20px;
}
.section-one {
padding: 50px 80px;
}
.section-one .heading {
text-align: center;
letter-spacing: 1px;
margin: 20px;
}
p {
text-align: center;
font-size: 17px;
}
<div class="image1">
<div class="text-box-image1">
<span class="text-image1">PARALLAX WEBSITE</span>
</div>
</div>
I think you need to mention background image as "background-image". You are declaring background property individually. or you can write like that way :
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
font-family: 'Lato', sans-serif;
font-weight: 400;
line-height: 1.8em;
color: #666;
}
.image1 {
background: url('https://jolly-kalam-23776e.netlify.app/parallaxsite/img/image1.jpg') no-repeat fixed center center;
background-size: cover;
min-height: 100%;
opacity: 0.70;
position: relative;
}
.text-box-image1 {
position: absolute;
/* To bring that box in center */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.text-image1 {
font-size: 27px;
letter-spacing: 8px;
color: white;
background-color: #111;
padding: 20px;
}
.section-one {
padding: 50px 80px;
}
.section-one .heading {
text-align: center;
letter-spacing: 1px;
margin: 20px;
}
p {
text-align: center;
font-size: 17px;
}
<div class="image1">
<div class="text-box-image1">
<span class="text-image1">PARALLAX WEBSITE</span>
</div>
</div>
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.
I need to have a image on div background. Over this image, its mandatory to have one title, subtitle and a button.
All these three elements need to have top and left in % for dynamic position.
I had made several tries, but without success.
HTML
<div id="container">
<div id="block1">
<div id="title">LIAM</div>
<div id="subtitle">SUPER SLIM FIT</div>
<div id="link">
See all jeans
</div>
</div>
</div>
CSS
#block1 {
background-image: url('http://tiffosi.com/fw16/img/img1.jpg');
background-repeat: no-repeat;
background-size: contain;
width: 100%;
height: 1450px;
max-width: 1086px;
max-height: 1450px;
position: relative;
top: 0;
left: 0;
}
#block1 #subtitle {
font-size: 16pt;
color: white;
position: absolute;
top: 23.4%;
left: 43.5%;
letter-spacing: 1px;
}
#block1 #link {
width: 184px;
text-align: center;
height: 43px;
line-height: 43px;
border: 1px solid white;
font-size: 11pt;
top: 29.3%;
left: 41.3%;
position: absolute;
}
#block1 #link a {
color: white;
text-decoration: none;
font-weight: 100;
}
#media only screen and (min-width : 768px) {
#block1 #title{
top: 12%;
left:42%;
font-size:80%;
}
}
#media only screen and (min-width : 992px) {
#block1 #title {
font-size: 100%;
position: absolute;
top: 16.5%;
left: 42%;
letter-spacing: 2px;
}
}
#block1 #title {
font-size: 97px;
color: white;
position: absolute;
top: 16.5%;
left: 42%;
letter-spacing: 2px;
}
Link to jsffidle: https://jsfiddle.net/jggscada/
instead of positioning each element individually , i suggest you give position:absolute to #block1 and position it on the image ( image as background to #container or make another div surrounding the #block1 div ) .
i used top:40vh -> vh=viewport height
and then position the elements inside the block1 as you desire.
also i deleted the #link div and added styles directly to the link instead. seems more logical this way :) . if you want a link to behave like a div use display:block , in this case i used display:inline-block
VERY IMPORTANT : do not use fixed width and height if you want something to be responsive. i used width:100vw on .container so it has the width of the screen.
see snippet below or fiddle here > Jsfiddle
let me know if it works for you
#container {
background-image: url('http://tiffosi.com/fw16/img/img1.jpg');
background-repeat: no-repeat;
background-size: contain;
width: 100vw;
height: 1450px;
max-width: 1086px;
max-height: 1450px;
position: relative;
top: 0;
left: 0;
border: 1px solid red;
}
#block1 #title {
font-family: oswald-bold;
font-size: 60pt;
color: white;
letter-spacing: 5px;
}
#block1 #subtitle {
font-family: oswald-bold;
font-size: 16pt;
color: white;
letter-spacing: 1px;
}
#block1 a{
width: 184px;
text-align: center;
height: 43px;
line-height: 43px;
border: 1px solid white;
font-family: Oswald-Medium;
font-size: 11pt;
color: white;
text-decoration: none;
font-weight: 100;
display:inline-block;
margin-top:50px;
}
#block1 {
position:absolute;
top:40vh;
left:0;
margin:0 auto;
right:0;
text-align:center;
}
<div id="container">
<div id="block1">
<div id="title">LIAM</div>
<div id="subtitle">SUPER SLIM FIT</div>
See all jeans
</div>
</div>
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