I used hover images but when I opened it on small screen {400px, 969px } those images are overflowing, it's not fit with devices. I tried with x overflow but its chopping the image. I need those images to fit all devices with
*, *::before, *::after{
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.hero2 container{
width: 100%;
max-width: 100%;
margin: auto;
display: block;
text-align: center;
position: absolute;
top: 0; left: 0;
}
figure{
width: 400px;
height: 300px;
overflow: hidden;
position: relative;
display: inline-block;
vertical-align: top;
border: 5px solid #fff;
box-shadow: 0 0 5px #ddd;
margin: auto;
}
figcaption{
position: absolute;
left: 0; right: 0;
top: 0; bottom: 0;
text-align: center;
font-weight: bold;
width: 100%;
height: 100%;
display: table;
}
figcaption div{
display: table-cell;
vertical-align: middle;
position: relative;
top: 20px;
opacity: 0;
color: #2c3e50;
text-transform: uppercase;
}
figcaption div:after{
position: absolute;
content: "";
left: 0; right: 0;
bottom: 40%;
text-align: center;
margin: auto;
width: 0%;
height: 2px;
background: #2c3e50;
}
figure img{
flex: auto;
float:left;
margin-right: 2px;
position: relative;
-webkit-transition: all 0.5s linear;
transition: all 0.5s linear;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
width: 100%;
}
figure:hover figcaption{
background: rgba(255,255,255,0.3);
}
figcaption:hover div{
opacity: 1;
top: 0;
}
figcaption:hover div:after{
width: 50%;
}
figure:hover img{
-webkit-transform: scale3d(1.2, 1.2, 1);
transform: scale3d(1.2, 1.2, 1);
}
.grid {
position: relative;
margin: 0 auto;
padding: 1em 0 4em;
max-width: 1000px;
list-style: none;
text-align: center;
}
/*font-face*/
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 100;
src: local('Lato Hairline'), local('Lato-Hairline'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/boeCNmOCCh-EWFLSfVffDg.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 300;
src: local('Lato Light'), local('Lato-Light'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/KT3KS9Aol4WfR6Vas8kNcg.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/9k-RPmcnxYEPm8CNFsH2gg.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: local('Lato Bold'), local('Lato-Bold'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/wkfQbvfT_02e2IWO3yYueQ.woff) format('woff');
}
.hero2 p {
font-size: 50;
}
.hero2 row content container{
width: 100%;
max-width: 900px;
margin: 0 auto;
position: relative;
padding: 0 0%;
flex: auto;
}
<link href='https://fonts.googleapis.com/css?family=Raleway:400,800,300' rel='stylesheet' type='text/css'>
<link href="test1.css" rel="stylesheet"type="text/css">
<div class="hero2">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible"content="ie=edge">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<body>
<div class="row content">
<p> Projects </p>
<div class="container">
<figure>
<img src="online%20shoping.jpg" alt="Thumb"width="300" height=" 300" />
<figcaption><div> Online shoping site <br> Technology: Java , SQL <br>
Web-based online shopping application . It maintains the details of customer payments, product receipts, products and also updating, deletion for the same. It also stores the details of invoices generated by customer and payments details. The primary features of the project are high accuracy, design flexibility and easy availability. </div></figcaption>
</figure>
<figure>
<img src="hexapod.jpg" alt="Thumb" width="300" height=" 300" />
<figcaption><div> Hexapod Robot <br>Technology: Embedded This project develops a Hexapod robot used to explore a remote location by sensing the parameters like light, temperature, distance etc, processes it and transmits the collected data to the control station using wireless means. Here Wi-Fi technology was used, real time video capturing facility. </div></figcaption>
</figure>
<figure>
<img src="per.JPG" alt="Thumb" width="300" height=" 300"/>
<figcaption><div> dipuraj.com- Personal website </div></figcaption>
</figure>
<figure>
<img src="autonom.jpg" alt="Thumb" width="300" height=" 300" />
<figcaption><div>Machine learning project Technology: JAVA, SQL <br>
Getting the true data and after making real time examples it will be used to teach the machine , how to react with situations occurring around it. For getting the perfect output we analysed it through several stages after the development. </div></figcaption>
</figure>
</div></div>
</body>
</div>
screen shoot hover effect[output what I got what I am expecting in all screen (small mobile device below 400 res)
hope that I will get a solution from someone
You have not used media query to fit in different device , Since you have followed the same css for all the device you should not specify the width and height for figure instead try using max-width and max-height
figure{
max-width: 400px; /* Corrected css */
max-height: 300px;
}
If you specify width in all device the given width will be applied unless you have written media query to apply different width for different devives.
Please remove the width and height given to the tag inside your html and specify it through css to maintain the height and width of the image to fit the parent.
It will Help you try to define your width and height of window like
window.innerWidth;
window.innerHeight;
In java script and set your image size width and height with %.
For more help W3schools.
Try this,
change figure width:400px; into width:100%;
figure{
width:100%;
}
I have used media query with calculation for width now you can check. when your device width is less than 600 you will get full view of your image for device width above 600 you will see two split of your image panel.
*, *::before, *::after{
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.hero2 container{
width: 100%;
max-width: 100%;
margin: auto;
display: block;
text-align: center;
position: absolute;
top: 0; left: 0;
}
figure{
width: calc(50% - 5px);
height: 300px;
overflow: hidden;
position: relative;
display: inline-block;
vertical-align: top;
border: 5px solid #fff;
box-shadow: 0 0 5px #ddd;
margin: auto;
}
#media only screen and (max-width: 600px) {
figure{
width: calc(100% - 5px);
height: 300px;
}
}
figcaption{
position: absolute;
left: 0; right: 0;
top: 0; bottom: 0;
text-align: center;
font-weight: bold;
width: 100%;
height: 100%;
display: table;
}
figcaption div{
display: table-cell;
vertical-align: middle;
position: relative;
top: 20px;
opacity: 0;
color: #2c3e50;
text-transform: uppercase;
}
figcaption div:after{
position: absolute;
content: "";
left: 0; right: 0;
bottom: 40%;
text-align: center;
margin: auto;
width: 0%;
height: 2px;
background: #2c3e50;
}
figure img{
flex: auto;
float:left;
margin-right: 2px;
position: relative;
-webkit-transition: all 0.5s linear;
transition: all 0.5s linear;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
width: 100%;
}
figure:hover figcaption{
background: rgba(255,255,255,0.3);
}
figcaption:hover div{
opacity: 1;
top: 0;
}
figcaption:hover div:after{
width: 50%;
}
figure:hover img{
-webkit-transform: scale3d(1.2, 1.2, 1);
transform: scale3d(1.2, 1.2, 1);
}
.grid {
position: relative;
margin: 0 auto;
padding: 1em 0 4em;
max-width: 1000px;
list-style: none;
text-align: center;
}
/*font-face*/
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 100;
src: local('Lato Hairline'), local('Lato-Hairline'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/boeCNmOCCh-EWFLSfVffDg.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 300;
src: local('Lato Light'), local('Lato-Light'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/KT3KS9Aol4WfR6Vas8kNcg.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/9k-RPmcnxYEPm8CNFsH2gg.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: local('Lato Bold'), local('Lato-Bold'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/wkfQbvfT_02e2IWO3yYueQ.woff) format('woff');
}
.hero2 p
{
font-size: 50;
}
.hero2 row content container{
width: 100%;
max-width: 900px;
margin: 0 auto;
position: relative;
padding: 0 0%;
flex: auto;
}
<link href='https://fonts.googleapis.com/css?family=Raleway:400,800,300' rel='stylesheet' type='text/css'>
<link href="test1.css" rel="stylesheet"type="text/css">
<div class="hero2">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible"content="ie=edge">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<body>
<div class="row content">
<p> Projects </p>
<div class="container">
<figure>
<img src="online%20shoping.jpg" alt="Thumb" />
<figcaption><div> Online shoping site <br> Technology: Java , SQL <br>
Web-based online shopping application . It maintains the details of customer payments, product receipts, products and also updating, deletion for the same. It also stores the details of invoices generated by customer and payments details. The primary features of the project are high accuracy, design flexibility and easy availability. </div></figcaption>
</figure>
<figure>
<img src="hexapod.jpg" alt="Thumb" />
<figcaption><div> Hexapod Robot <br>Technology: Embedded This project develops a Hexapod robot used to explore a remote location by sensing the parameters like light, temperature, distance etc, processes it and transmits the collected data to the control station using wireless means. Here Wi-Fi technology was used, real time video capturing facility. </div></figcaption>
</figure>
<figure>
<img src="per.JPG" alt="Thumb" />
<figcaption><div> dipuraj.com- Personal website </div></figcaption>
</figure>
<figure>
<img src="autonom.jpg" alt="Thumb" />
<figcaption><div>Machine learning project Technology: JAVA, SQL <br>
Getting the true data and after making real time examples it will be used to teach the machine , how to react with situations occurring around it. For getting the perfect output we analysed it through several stages after the development. </div></figcaption>
</figure>
</div></div>
</body>
</div>
Related
I'm trying to make a mouse trailer for my site, but when hovering over a YouTube iframe the trailer does not follow it into the iframe area. (I'm using js to extract the x and y coordinates of the mouse from the body) I have like no idea how to make this work so any help or ideas would be much appreciated!
Code below:
there are ">"s next to important code
html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="homestyle.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<title>****************</title>
</head>
<body>
<div id="trailer">
</div>
<script src="homescript.js"></script>
<div class="navbaralign">
<ul class="navbar">
<li>Home</li>
<li>About</li>
<li>My Work</li>
<li>Contact</li>
</ul>
</div>
<div id="toppage" class="toppage">
<div class="maintitle">
<h1>****************</h1>
<h2>Front-end web developer, music producer, and 3d animator/artist.</h2>
</div>
</div>
<div id="about" class="about">
<h3>About Me</h3>
</div>
> <div id="mywork" class="mywork">
> <iframe class="interactable" src="https://www.youtube.com/embed/B6ipLAQ7lM4" title="bowling alley
> animations be like" frameborder="0" allow=""></iframe>
> <iframe class="interactable" src="https://www.youtube.com/embed/kJniNIlKIDE" title="Ktashi - HOLD
> ON" frameborder="0" allow=""></iframe>
> </div>
</body>
</html>
css
html {
scroll-behavior: smooth;
}
#trailer {
height: 20px;
width: 20px;
background-color: #ffffff;
border-radius: 20px;
position: fixed;
left: 0;
top: 0;
z-index: 10000;
pointer-events: none;
opacity: 0;
transition: opacity 500ms ease;
}
body:hover > #trailer {
opacity: 1;
}
body {
background-color: #FF4722;
margin: 0;
}
h1 {
font-family: Inter;
font-weight: 900;
color: #FFFFFF;
font-size: 48px;
line-height: 48px;
text-align: center;
padding-left: 10vw;
padding-right: 10vw;
}
h2 {
font-family: Inter;
font-weight: 300;
color: #FFF9D1;
font-size: 24px;
line-height: 24px;
text-align: center;
padding-left: 10vw;
padding-right: 10vw;
}
h3 {
font-family: Inter;
font-weight: 600;
color: #ffffff;
font-size: 24px;
line-height: 12px;
text-align: left;
}
.toppage {
height: 100vh;
display: grid;
place-items: center;
}
.navbaralign {
display: flex;
justify-content: center;
}
.navbar {
display: flex;
justify-content: space-between;
height: 5vh;
padding: 0;
list-style: none;
align-items: center;
background-color: #000000;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.50);
margin: 0;
position: fixed;
top: 1vh;
width: 80%;
border-radius: 6vh;
padding: 2.5vh;
box-sizing: border-box;
padding-top: 3vh;
padding-bottom: 3vh;
}
.maintitle {
display: grid;
place-items: center;
user-select: none;
}
a {
text-decoration: none;
color: #ffffff;
font-family: Inter;
font-weight: 600;
font-size: 18px;
transition: color 500ms ease;
background-color: linear-gradient(#ffffff, #000000)
}
a:hover {
color: #FFF9D1;
}
#media (max-width: 700px) and (orientation: portrait) {
.navbar {
flex-direction: column;
height: 20vh;
}
}
.mywork {
display: flex;
gap: 2vw;
padding: 2vw;
background-image: linear-gradient(#FF4722, #000000)
}
iframe {
aspect-ratio: 16 / 9;
flex-grow: 1;
flex-shrink: 0;
flex-basis: 0;
}
.interactable {
transition: background-size 500ms ease, opacity 500ms ease;
}
.interactable:hover {
background-size: 105%;
opacity: 0.8;
}
js
const trailer = document.getElementById("trailer");
window.onmousemove = e => {
const x = e.clientX - trailer.offsetWidth / 2,
y = e.clientY - trailer.offsetHeight / 2;
const keyframes = {
transform: `translate(${x}px, ${y}px)`
};
trailer.animate(keyframes, {
duration: 800,
fill: "forwards"
});
};
I've tried adding
pointer-events: none;
to the iframes' class in css and I had a feeling that that wouldn't work. I was right. but I honestly have no idea what else could work. 😅
For security reasons, browsers don't allow you to get information about interactions made on cross-domain iframes. In this case, youtube.com is a different domain than the original website(ie cross-domain), and thus you can't get mouse information while the user is interacting with youtube. This is done to prevent things like embedding banking websites and getting the user's interactions made on logins etc... You can normally get around this by putting a transparent div over the original iframe, but that would also block any mouse interaction with the youtube iframe in the process. This would mean that while the circle would follow the mouse while you were over the youtube window, you would be unable to start the video since you couldn't interact with the youtube page. There isn't really a way to get around this issue, since it is caused by your web browser's security. Hopefully, this helps :)
I am a beginner in web design and development and I am trying to make the navigation bar be more responsive when it is viewed on phones and tablets but for some reason it appears really buggy on the phone, I have used a meta tag so that the browser renders it correctly but it doesn't, it comes out all buggy like the picture below:
Click on the link to see picture -> As you can see it's coming out half and half
I have enabled overflow-x:hidden but some how am still able to browse towards the right and see the nav bar which isn't meant to be visible unless clicked, I don't understand why that's happening.
Click on the link to see picture -> This is how it is when you load it.
I have also tried to put the screen resolution as follows:
`#media screen and (max-width:1024px){
.nav-links
{
width:48%;
}
}
#media screen and (max-width:768px)`
This is also running on my firebase server and is available to view through this link:https://test-response-5f60c.web.app/PAGES/quotes.html
I am sorry for any code inconsistencies and mistakes, please help me out, I don't understand what I am doing wrong in the CSS. This is the tutorial I followed: Click on the link -> Tutorial
Following is my code:
function navSlide() {
const burger = document.querySelector(".burger");
const nav = document.querySelector(".nav-links");
const navLinks = document.querySelectorAll(".nav-links li");
burger.addEventListener("click", () => {
//Toggle Nav
nav.classList.toggle("nav-active");
//Animate Links
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = ""
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;
}
});
//Burger Animation
burger.classList.toggle("toggle");
});
}
navSlide();
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
margin: 0;
}
nav{
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #000000;
color: #f9f9f9;
font-family: 'Open Sans', sans-serif;
font-size: large;
}
.logo{
text-transform: uppercase;
letter-spacing: 3px;
font-size: 20px;
}
.nav-links {
list-style-type: none;
padding: 1.2%;
margin:0;
overflow: hidden;
background-color: #000000;
display: flex;
align-items: center;
justify-content: center;
}
.nav-links li a {
font-size: 18px;
font-weight: bold;
display: inline-block;
color: white;
text-align: center;
padding: 26px 26px;
text-decoration: none;
transition: 0.3s;
}
li a:hover {
background-color: #3498DB ;
}
.burger{
display: none;
cursor: pointer;
}
.burger div{
width: 25px;
height: 4px;
background-color: #f9f9f9;
margin: 5px;
}
.head {
font-family: sans-serif;
font-weight: bold;
margin: auto;
width: 60%;
border: 3px solid #3498DB ;
padding: 40px;
text-align: center;
opacity: 5.9;
animation-duration: 3s;
animation-name: fadein;
}
#media screen and (max-width:1024px){
.nav-links{
width:48%;
}
}
#media screen and (max-width:768px){
body {
overflow-x: hidden !important;
}
.nav-links{
position: absolute;
right: 0;
height: 92vh;
top: 8vh;
background-color: #000000;
display: flex;
flex-direction: column;
align-items:center;
width: 50%;
transform: translate(100%);
transition: transform 0.5s ease-in;
}
.nav-links li{
opacity: 0;
}
.burger{
display: block;
}
.nav-active {
transform: translate(0%);
}
}
#keyframes navLinkFade {
from{
opacity: 0;
transform: translateX(50px);
}
to{
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
#googleForm {
margin-left: 20px;
text-align: center;
margin-top: 20px;
}
<!doctype html>
<html>
<head>
<style>
body {
background-image: url('../IMG/land2.jpg');
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: auto ;
}
</style>
<title> Quotes </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../CSS/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<div class="logo">
<h4> Edge Concreting and Landscaping </h4>
</div>
<ul class="nav-links">
<li>Home</li>
<li>Quotes</li>
<li>Contact</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<div id="googleForm">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSd5uy_5vc6ozsY1kcGRliC8hYH9w_WqEU1acN0tJQ6rrqEJmg/viewform?embedded=true" width="640" height="1427" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
</div>
<script src="../JS/app.js"></script>
</body>
</html>
Set your media queries to a lower max width and position absolute.
For example.
#media (max-width: 768px){.logo h4 {position: absolute;
right: 50px;}}
That should enable you to select your logo and adjust it for mobile device.
#media (max-width: 768px){.nav-links{position: absolute;
right: 50px;}}
Should enable you to select and adjust your dropdown. You can change or substitute rightor left or top or bottom or width within the same media query.
Try reducing the width of nav-links.
This worked for me:
html, body {
overflow-x: hidden;
}
body {
position: relative;
}
I'm working on a short one-page site with a rotating set of pix. Somehow the js script and images are breaking the site's ability to scale down. I'm not an experienced coder, so I'm flailing a bit.
I'm pretty sure it's to do with some of the fixed widths in the CSS, but removing them creates even more trouble. Any help tracking down the cause would be much appreciated. Here's a Codepen link to the problem.
HTML:
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html" ; charset="utf-8" />
<meta name="created" content="Fri, 22 Jan 2016 17:43:40 GMT" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="jvs_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrap">
<div class="maingrid">
<div class="slides">
<img src="http://tests.markgarvey.com/slideshow_images/out1.png" max-width:100%;>
<img src="http://tests.markgarvey.com/slideshow_images/out2.png" max-width:100%;>
<img src="http://tests.markgarvey.com/slideshow_images/out3.png">
<img src="http://tests.markgarvey.com/slideshow_images/out4.png">
<img src="http://tests.markgarvey.com/slideshow_images/out5.png">
<img src="http://tests.markgarvey.com/slideshow_images/out6.png">
<img src="http://tests.markgarvey.com/slideshow_images/out7.png">
<img src="http://tests.markgarvey.com/slideshow_images/out8.png">
<img src="http://tests.markgarvey.com/slideshow_images/out9.png">
<img src="http://tests.markgarvey.com/slideshow_images/out10.png">
</div>
<!-- end of slides div -->
<div class="centertext">
<img src="http://tests.markgarvey.com/images/JVSA_weblogo3.png" width="281" height="106" alt="" title="" border="0" />
<p class="name">FIRSTNAME LASTNAME</p>
<p class="address">1234 Example Street<br> Princeton, New Jersey 12345<br> testing#email.net
<br> 505.422.6563
</p>
<p>Solemnly he came forward and mounted the round gunrest. He faced about and blessed gravely thrice the tower, the surrounding country and the awaking mountains. Then, catching sight of Stephen Dedalus, he bent towards him and made rapid crosses
in the air, gurgling in his throat and shaking his head. Stephen Dedalus, displeased and sleepy, leaned his arms on the top of the staircase and looked coldly at the shaking gurgling face that blessed him, equine in its length, and at the light
untonsured hair, grained and hued like pale oak.
</p>
</div>
<!-- end of centertext div -->
</div>
<!-- end of maingrid div -->
</div>
<!-- end of wrap div -->
<script>
function nextSlide() {
var q = function(sel) {
return document.querySelector(sel);
}
q(".slides").appendChild(q(".slides img:first-child"));
}
setInterval(nextSlide, 5000)
</script>
</body>
</html>
CSS:
#wrap {
max-width: 100%;
width: 1000px;
background: #FFF;
margin: 0 auto;
}
.maingrid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
align-items: center;
justify-items: center;
margin-top: 50px;
}
.centertext {
align-self: center;
justify-self: center;
margin-top: 20px;
display: block;
position: relative;
margin-left: auto;
margin-right: auto;
text-align: left;
letter-spacing: normal;
line-height: 19px;
padding-bottom: 5px;
font-family: Verdana, Arial, sans-serif;
color: #000000;
font-size: 1em;
line-height: 20px;
}
img {
max-width: 100%;
height: auto;
}
.name {
font-size: 1.5em;
font-weight: bold;
font-variant: small-caps;
margin-bottom: 5px;
}
.address {
margin-top: 8px;
line-height: 24px;
font-family: Arial, sans-serif;
color: #000000;
font-size: 1em;
line-height: 19px;
}
/* the slide container with a fixed size */
.slides {
max-width: 100%;
width: 1000px;
height: 670px;
position: relative;
}
/* the images are positioned absolutely to stack. opacity transitions are animated. */
.slides img {
height: auto;
display: block;
position: absolute;
transition: opacity 1s;
opacity: 0;
max-width: 100%;
width: 1000px;
margin-bottom: 60px;
}
/* the first image is the current slide. it's faded in. */
.slides img:first-child {
z-index: 2;
/* frontmost */
opacity: 1;
}
/* the last image is the previous slide. it's behind the current slide and it's faded over. */
.slides img:last-child {
z-index: 1;
/* behind current slide */
opacity: 1;
}
Thanks for any help.
Your fixed widths (of 1000px) are to blame.
Try:
.slides {
width:100%;
max-width: 1000px;
height: 670px;
position: relative;
}
/* the images are positioned absolutely to stack. opacity transitions are animated. */
.slides img {
height: auto;
display: block;
position: absolute;
transition: opacity 1s;
opacity: 0;
width:100%;
max-width: 1000px;
margin-bottom:60px;
}
Here is an edited codepen.
Right now when I resize my webpage it messes up my entire website. I have looked up solutions but they have not worked for me. I read that it might be because I have some positions set to absolute, I tried setting them to relative but that did not work. Any help is appreciated :)
Website: http://al-saba.net/
#import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:400);
* {margin: 0; padding: 0;}
html {
background-color: black;
opacity: .9;
min-height:100%;
width: 100%;
height: 100%;
background-repeat: no-repeat;
z-index: 2000;
}
h1 {
position: absolute;
font-family: 'Passion One';
font-size: 200px;
color: blue;
letter-spacing: 1.6rem;
top: calc(62% - 200px);
text-align: center;
text-shadow: 2px 4px 3px rgba(0,0,0,0.6);
opacity: .8;
width: 100%;
z-index: 2001;
}
h2 {
position: absolute;
font-family: 'Open Sans', monospace;
font-size: 26px;
color: #6EBEDC;
letter-spacing: .4rem ;
top: calc(64% - 30px);
text-align: center;
opacity: .68 ;
width: 100%;
z-index: 2002;
}
h3 {
position: absolute;
font-family: 'Open Sans', monospace;
font-size: 24px;
color: #6EBEDC;
letter-spacing: .4rem ;
top: calc(38% - 30px);
text-align: center;
opacity: .68 ;
width: 100%;
z-index: 2003;
}
body {
}
footer {
position: absolute;
bottom: calc(22% - 100px);
right: calc(16% - 125px);
letter-spacing: .6rem;
z-index: 2002;
}
.homepage-hero-module {
border-right: none;
border-left: none;
position: relative;
}
.no-video .video-container video,
.touch .video-container video {
display: none;
}
.no-video .video-container .poster,
.touch .video-container .poster {
display: block !important;
}
.video-container {
position: relative;
height: 106%;
width: 100%;
overflow: hidden;
background: #000;
}
.video-container .filter {
z-index: 100;
position: absolute;
background: rgba(0, 0, 0, 0.4);
width: 102%;
}
.video-container video {
position: absolute;
z-index: 0;
bottom: 0;
}
.video-container video.fillWidth {
width: 100%;
}
a {text-decoration: none;}
/* This class is added on scroll */
.fixed {
position: fixed;
top: 0;
height: 70px;
z-index: 1;
}
/* Navigation Settings */
nav {
position: absolute;
bottom: 0;
width: 100%;
height: 70px;
background: #5B5B5B;
opacity: .8;
font-family: 'open-sans-bold', AvenirNext-Medium, sans-serif;
}
nav:hover {
opacity: .9;
}
nav li {
display: inline-block;
padding: 24px 24px;
}
nav li a:hover {
color: black;
}
nav li a{
color: white;
text-transform: uppercase;
}
section {
height: 100vh;
}
/* Screens Settings */
#screen1 {
background: #1061E5;
text-align: center;
}
#screen1 p {
padding-top: 200px;
text-align: center;
}
#screen2 {
background: white;
text-align: center;
}
#screen3 {
background: black;
text-align: center;
}
#media only screen and (max-width: 520px) {
nav li {
padding: 24px 4px;
}
nav li a {
font-size: 16px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale=1">
<script src = "jquery-3.1.1.min.js"></script>
<script src = "script.js"></script>
<link rel = "stylesheet" href="style.css">
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Passion+One|Source+Code+Pro" rel="stylesheet">
<title> AL-SABA.net </title>
</head>
<body>
<header>
<h3> Design • Code • Programs </h3>
<h1> AL-SABA </h1>
<h2> Personal Website </h2>
</header>
<link href='http://fonts.googleapis.com/css?family=Varela+Round' rel = 'stylesheet' type = 'text/css'>
<div class = "homepage-hero-module">
<div class = "video-container">
<div class = "filter"></div>
<video autoplay loop class = "fillWidth">
<source src="coding.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
<source src="Love-Coding.webm" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
</div>
</div>
<section id="screen1">
<p>Scroll down</p>
<nav class = "bar">
<ul>
<li class = "bar-home">Home</li>
<li class = "bar-about">About</li>
<li class = "bar-projects">Projects</li>
<li class = "bar-contact">Contact</li>
</ul>
</nav>
</section>
<section id="screen2"></section>
<section id="screen3"></section>
<footer>
</footer>
</body>
</html>
It looks like everything is okay except for the "Al-Saba" h1. You can declare the font size using relative values that consider the viewport width.
Change your h1 CSS. Make this: font-size:200px; something like font-size:15vw.
The "Design • Code • Programs" and "Personal Website" overlap "Al-Saba" because you have them all in the same div. Try this instead:
<header>
<div> <h3> Design • Code • Programs </h3></div>
<div> <h1> AL-SABA </h1></div>
<div> <h2> Personal Website </h2></div>
</header>
You can adjust the position.
For example try adjusting the heading element position. You can see a big different.
h1,h2,h3 {
position:static;
}
Just remove this metatag
<meta name = "viewport" content = "width = device-width, initial-scale=1">
Here's my html and css code. My strategy seemed to work well with the 1st background image, but when I got to the 2nd background image, it no longer worked. I created a stage outside the main content area set the position to relative then a wrapper to include my 2 backgrounds with their position to absolute so I can manually position it. However, once I get to the benefits-section div, it acts like this part is no longer contained in the content-wrapper div. Can anyone spot my problem? I also included an image of what the the website actually looks like completed.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Garcinia Cambogia</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div class="stage">
<div class="bg-wrapper">
<img src='img/flower-background.jpg' id="bg" atl="flower background">
<img src="img/middle-background.jpg" id="bg2" alt="benefits-section background">
</div>
<div class="content-wrapper">
<nav>
<h1>Produce</h1>
<ul>
<li>Home</li>
<li>About the Product</li>
<li>Benefits</li>
<li>Testimonals</li>
<li>Buy</li>
<li>Contact</li>
<li>Blog</li>
</ul>
</nav>
<div class="copy">
<h2>Increase your <br> energy level with <br> <span>Garcinia Cambogia</span></h2>
<img src="img/product.png" alt="Main Product">
<div class="opt-in">
<h2>Try it Out</h2>
<form>
<input type="text" value="Your Name*">
<input type="text" value="Your Email*">
</form>
<div class="order-btn">
<h2>Order Now</h2>
</div>
</div><!-- end of opt-in -->
</div><!-- end of copy -->
<div class="promo-section">
<h1> About Garcinia Cambogia </h1>
<h2> Reduce food intake and promote <span>weight loss fast</span>!</h2>
<p>Effective thermogenic supplements are those that contain key ingredients that create a fat burning 'thermogenic'
environment by working together and in synergy. Some of these ingredients also aid
in reducing appetite and spiking an increase in short-term energy. Dosage of Garcinia cambogia, beginning
from 750 mg to 1,500 mg, takes 2-3 times in individual dose before meals.
</p>
<h2> Other <span>Related</span> Products</h2>
<ul>
<div class="hover08">
<div class="img-wrapper">
<li><img src="img/Rasberry-product.png" alt="Rasberry Product"><a class="search" id="search1" href="#"><img src="img/search-icon.png" alt="search"></a></li>
</div>
<div class="img-wrapper">
<li><img src="img/Garcinia-Cambogia.png" alt="Garcinia"><a class="search" id="search2" href="#"><img src="img/search-icon.png" alt="search"></a></li>
</div>
<div class="img-wrapper">
<li id="mango-ketone"><img src="img/Mango-Ketone.png" alt="Mango Product"><a class="search" id="search3" href="#"><img src="img/search-icon.png" alt="search"></a></li>
</div>
</ul>
</div><!-- end of hover08 -->
</div><!-- end of promo-section -->
<div class="benefits-section clear">
<h1> What are the benefits </h1>
<h2> Obesity is an imbalance between fat intake and energy expenditure.
Now day obesity is a problem of health and mind in many people.</h2>
<p>The rush hours working lifestyle make many people take junk food and fast food more than nutritionists.
The important factor is Generic, it is found that one obese patient has a 40% chance of obesity and both
obese patients have 80% chance of obesity. The chronic diseases that are developed from obesity are
diabetes, high blood pressure, stroke, heart attack, cancer, gout and sleep apnea. So control the weight
is the best way to void health problem.
Control the body weight helps you against the chronic diseases and make good looking. There are many
ways to reduce and control the weight. Using weight control products is not the best way, especially use
potential dangerous diet products without consult from the doctors or the pharmacists. Balance the energy
expenditure and fat intake is an important point. If you eat more you have to exercise more. Other ways
are break bad habits such as alcohol intake, watching T.V. during eating, or ignore vegetables. You have
to realize how much the fat in each menu and should the low cholesterol with high nutrition.</p>
</div>
</div><!-- end of content-wrapper -->
</div><!-- end of stage -->
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
</body>
</html>
#font-face { font-family: 'Lucida Sans Demibold Roman'; src: url('../fonts/Lucida Sans Demibold Roman.ttf'); }
#font-face { font-family: 'Arizonia-Regular'; src: url('../fonts/Arizonia-Regular.ttf'); }.stage { position: relative; max-height: 100%; max-width: 100%; }
.content-wrapper { width: 960px; margin: 0 auto; position: relative; z-index: 2; }
.bg-wrapper { position: absolute; z-index: 1; left: 0; top: 0; min-width: 100% }
#bg { position: relative; top: 0; left:0; min-width: 100%; max-height: 760px; }
#bg2 { position: relative; top: 500px; left: 0; min-width: 100%; max-height: 702px; }
nav h1 { font-size: 69px; font-family: 'Arizonia-Regular'; letter-spacing: 0; text-align: center; color: #e0bd67; margin-bottom: 15px; margin-top: 15px; }
nav ul { list-style-type: none; padding: 0; margin: 0; background-color: #c29f4d; box-shadow: 5px 5px 1px #808279; height: 50px; width: 100%; float: left; margin-bottom: 95px; }
nav ul li { display: inline; padding-right: 40px; padding: 16px 40px 16px 0; margin-top: 0; float: left;}
nav li:first-child { padding-left: 113.04px; }
nav li:last-child { padding-right: 113.04px; }
nav a { text-decoration: none; color: #fff; font-family: 'Lucida Sans Demibold Roman'; font-size: 16px; }
.copy { float: left; }
.copy h2 { font-family: 'Open Sans'; font-size: 34px; color: #fff; font-weight: bold; float: right; text-transform: uppercase; line-height: 34px; margin-bottom: 35px; margin-top: 0;}
.copy img { float: left; margin-top: 55px; }
.copy span { color: #ffd062; }
.opt-in { background-color: #d1aa50; width: 378px; height: 299px; float: right; margin-bottom: 78px; }
.opt-in h2 {float: left; width: 301px; text-align: center; margin: 15px 38.5px; padding-bottom: 20px; border-bottom: 2px solid #fff; }
.opt-in input { width: 296px; height: 40px; background-color: #ecdcb7; margin: 7px 38.5px; padding-left: 5px; }
.order-btn h2 { border-bottom: none; }
.promo-section { float: left; }
.promo-section h1 { font-family: 'Open Sans'; font-size: 36px; text-transform: uppercase; color: #c29f4d; text-align: center; border-bottom: 2px solid #c29f4d; width: 795px; margin: 90px 82.5px 30px 82.5px; padding-bottom: 5px; }
.promo-section h2 { text-align: center; font-size: 26px; color: #8e8e8e; }
.promo-section h2 span { color: #c29f4d; }
.promo-section p { text-align: center; color: #8e8e8e; font-family: 'Open Sans'; font-size: 16px; }
.promo-section ul { list-style-type: none; margin-top: 30px; padding: 0; }
.promo-section ul div li { display: inline; float: left; margin-right: 109.5px }
#mango-ketone { margin-right: 0;}
.img-wrapper { position: relative; float: left; }
.hover08 li img { -webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }
.hover08 li:hover img { -webkit-filter: grayscale(0); filter: grayscale(0); }
.hover08 a.search { position: absolute; top: 0px; right: 0px; opacity: 0; background-color: transparent; filter: alpha(opacity=0); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }
#search1 { top:71px; right: 200px;}
#search2 { top: 92px; right: 190px; }
#search3 { top: 67px; right: 100px; }
.hover08 li:hover a.search { opacity: 1; -webkit-transition-delay: .2s; transition-delay: .2s;}
.benefits-section { margin-top: 30px; float: left; }
.benefits-section h1 { color: #fff;}
.clear { clear: both; }