Working on a mobile first approach and have encountered a strange re-alignment issue while expanding from mobile (480) to tablet view (768px).
The final layout is supposed to look like this:
However, I see this:
I understand that this is a CSS display issue, I can get Display: inline-block to work for the text segment to align with the album artwork (I have to reduce the width of the div though), but I cannot get the Display: inline-block to apply to the third div and to get it to align on the right hand side of the text box. Here's the HTML (removed unnecessary code for this question). The three relevant classes are'album-artwork', 'info-bar-container' and 'dig-box' (the lightning bolt). What is the best way to go about fixing this problem?
Thank you for your help!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="" />
<meta name="author" content="" />
<link rel="icon" href="assets/img/favicon.ico" />
<title>UNCVRD</title>
<!-- Bootstrap Core CSS -->
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<!-- Font awesome icons -->
<link href="assets/css/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<!-- Custom Css -->
<link href="assets/css/custom.css" rel="stylesheet">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
<!-- Ionicons -->
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<!-- HTML5 shiv and REspond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Music Feed -->
<section id="music-feed">
<div class="song-container">
<div class="album-artwork">
<img class="sc-artwork" src="https://i1.sndcdn.com/artworks-000182929734-focihg-t500x500.jpg">
<div class="album-dark-overlay">
<div class="ranking-triangle"></div>
<i class="icon ion-ios-play"></i>
</div>
</div>
<div class="info-bar-container">
<div class="info-bar">
<div class="info-bar-text">
<div class="artist-name">Echos - Gold</div>
<div class="curator-name">Curated by <a class="curator-link" href="">UNCVRD</a></div>
</div>
</div>
<div class="dig-box">
<i class="icon ion-ios-bolt balanced"></i>
</div>
</div>
</div>
</section>
</section>
<!-- Bootstrap Core Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="assets/js/jquery-3.1.1.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>
CSS stylesheet!
/* Reference Palette
Background: #dedede
Grey font: #b9b9b9
*/
/* ==== General ==== */
html {
font-family: 'Open Sans', sans-serif;
}
body {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
background: #dedede;
font-family: 'Open Sans', sans-serif;
}
h4 {
margin: 0;
padding: 0;
}
/* ==== Navigation Bar ==== */
.navbar {
position: relative;
margin-bottom: 16px;
}
.navbar-toggle {
padding: 0;
border: none;
border-radius: none;
margin: 13px 0 0 16px;
}
.navbar-toggle .icon-bar {
background-color: black;
}
.navbar-brand {
position: absolute;
left: 50%;
margin-left: -53.5px !important;
padding: 0;
display: block;
font-size: 30px;
color: black;
}
.dropdown-menu {
color: black;
}
.navbar .nav > li > a {
color: black;
border-top: 1px solid #dedede;
}
ul.nav.navbar-nav.navbar-right {
margin-bottom: 0;
margin-top: -7.5px;
}
.container-fluid > .navbar-collapse {
margin-top: 3.25px;
}
/* ==== FEED ==== */
#feed {
width: 480px;
margin: auto;
}
/* ==== Playlist Mode ==== */
.playlist-header {
margin-bottom: 16px;
}
.playlist-select {
margin-bottom: 16px;
display: flex;
max-width: 260px;
}
.discovery-mode {
padding-right: 8px;
padding-left: 8px;
min-width: 130px;
font-size: 14px;
height: 30px;
background-color: white;
text-align: center;
vertical-align: middle;
line-height: 30px;
}
.playlist-choice {
flex: 1;
min-width: 130px;
height: 30px;
font-size: 14px;
border: 2px solid #fff;
text-align: center;
vertical-align: middle;
line-height: 26px;
}
/* ==== Music Feed ==== */
#music-feed {
margin-top: 16px;
width: 448px;
}
.song-container {
width: 100%;
height: 220px;
margin-bottom: 16px;
}
.song-container:last-child {
margin-bottom: 82px;
}
.album-artwork {
width: 100%;
height: 155px;
overflow: hidden;
position: relative;
}
.sc-artwork {
position: absolute;
left: -1000%;
right: -1000%;
top: -1000%;
bottom: -1000%;
margin: auto;
min-height: 100%;
min-width: 100%;
}
.info-bar-container {
display: flex;
}
.album-dark-overlay {
/* background-color: rgba(0, 0, 0, 0.25);*/
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
line-height: 77.5px;
color: #dedede;
}
.ranking-triangle {
width: 0;
height: 0;
position: relative;
border-style: solid;
border-width: 38px 38px 0 0;
border-color: #fff transparent transparent transparent;
}
.ranking {
top: 0;
right: 0;
width: 38px;
text-align: left;
}
.info-bar {
width: 90%;
max-width: 484px;
height: 65px;
background-color: white;
display: table;
}
.dig-box {
width: 10%;
background-color: white;
text-align: center;
line-height: 65px;
max-height: 65px;
}
.ion-ios-bolt {
color: #dedede;
font-size: 30px;
}
.ion-ios-bolt:hover {
color: black;
-o-transition: .5s;
-ms-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
/* ...and now for the proper property */
transition: .5s;
}
.ion-ios-play {
font-size: 80px;
color: white;
opacity: 1;
}
.ion-ios-play:hover {
color: #b9b9b9;
-o-transition: .5s;
-ms-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
/* ...and now for the proper property */
transition: .5s;
}
.info-bar-text {
display: table-cell;
vertical-align: middle;
white-space: nowrap;
text-overflow: ellipsis;
}
#music-feed .artist-name {
font-size: 16px;
font-weight: 600;
margin-left: 16px;
}
#music-feed .curator-name {
font-size: 14px;
color: #b9b9b9;
margin-left: 16px;
}
.curator-link {
color: black;
}
.curator-link:hover {
color: black;
text-decoration: none;
}
/* ==== Progress Bar ==== */
#progress-bar-container {
position: fixed;
bottom: 60px;
left: 0;
}
#progress-bar-container .container-fluid {
margin: 0;
padding: 0;
height: 6px;
}
.progress-background {
width: 100%;
height: 6px;
background-color: #b9b9b9;
position: fixed;
}
.progress-bar {
width: 40%;
height: 6px;
background-color: #000;
position: fixed;
z-index: 1;
}
/* ==== Bottom Music Bar ==== */
#music-bar {
width: 100%;
height: 60px;
background: white;
position: fixed;
bottom: 0;
left: 0;
}
#music-bar .container-fluid {
padding: 0;
height: 60px;
}
.music-control-container {
font-size: 28px;
height: 60px;
display: inline-flex;
line-height: 60px;
text-align: center;
vertical-align: middle;
}
#music-bar .ion-ios-rewind {
margin-left: 16px;
}
#music-bar .ion-pause {
margin: 0 12px;
}
#music-bar .ion-ios-fastforward {
margin-right: 0px;
}
#music-bar .album-artwork {
float: right;
height: 30px;
width: 30px;
margin: 15px 0 15px 15px;
padding: 0;
position: relative;
}
.music-control-container img {
width: auto;
height: auto;
vertical-align: top;
width: 100%;
height: 100%;
}
#music-bar .song-name {
font-size: 13px;
font-weight: 600;
margin-left: 15px;
}
/* ==== Custom Media Queries ==== */
#media only screen and (min-width: 768px) {
#feed {
width: 768px;
margin: auto;
}
#music-feed {
width: 736px;
}
.song-container {
height: 160px;
}
.album-artwork {
width: 160px;
height: 160px;
margin-right: -4px;
display: inline-block;
}
.info-bar-container {
width: 576px;
display: inline-block;
}
.info-bar {
max-width: 576px;
height: 160px;
}
.dig-box {
width: 10%;
background-color: white;
text-align: center;
line-height: 160px;
max-height: 160px;
}
}
You've set a width on your #music-feed which appears to be too thin to hold all the items, causing them to drop down to the next lines. Also your div.dig-box isn't set to "display: inline-block" so by default wants to occupy a line by itself.
From there onwards you have a bit more work to do but hope this helps.
Related
I have a navbar at the top of my page with an image logo and some hyperlinks. I want to make it so the image is always the max height it can be while staying within the foot print of the navbar. Here's what I mean:
As you can see, the image in the top left has 10px padding, but the image is slightly too small and has a larger gap at the bottom.
This is my code:
HTML:
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="UTF-8">
<title>Home | Aeron</title>
<link rel="icon" type="image/x-icon" href="./images/favicon.png">
<link rel="stylesheet" media="screen and (min-width: 1294px)" href="main.css">
<link rel="stylesheet" media="screen and (max-width: 1294px)" href="mobile.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="header">
<img src="./images/logo.png" title="Aeron" alt="logo" class="header-logo">
<div class="desktop-nav">
<ul class="desktop-nav-links">
<li>Home</li>
<li>Portfolio</li>
<li>Contact me</li>
<li>About me</li>
<li>Recipes</li>
<li>Progress</li>
<li>PC Setup Designer</li>
<li>Gallery</li>
</ul>
</div>
</body>
</html>
CSS:
html {
box-sizing: border-box;
scroll-behavior: smooth;
font-family: 'Poppins', sans-serif;
height: 100%;
}
body {
margin: 0;
background: linear-gradient(45deg, #280036 0%, #000836 100%);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
height: 100%;
}
.header-logo {
margin: 10px;
float: left;
height: 72px;
}
.header {
background-color: #000000;
overflow: hidden;
width: 100%;
}
.desktop-nav-links {
float: right;
margin-right: 1.5vw;
}
.desktop-nav-links a {
margin: 1.5vw;
display: block;
color: white;
font-size: 1vw;
}
.desktop-nav-links li {
float: left;
list-style: none;
}
How can I make it so no matter what screen size is, the image is always as big as it can be without influening the navbar height?
Basically by making it position:absolute inside the position:relative header, you can control where it begins top:0 and where it'll end bottom:0.
Update:
We will wrap the image inside a container. That container will take 100% of the height by using absolute position with top and bottom equals 0. It will have a padding of the desired 10px, where as inside of it the image will reside having a height of 100%.
:root {
color-scheme: dark;
}
html {
box-sizing: border-box;
scroll-behavior: smooth;
font-family: 'Poppins', sans-serif;
height: 100%;
}
body {
margin: 0;
background: linear-gradient(45deg, #280036 0%, #000836 100%);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
height: 100%;
}
.heading {
margin: 20px;
font-size: 2.5vw;
text-align: center;
color: #ffffff;
}
p {
color: #ffffff;
font-size: 20px;
}
a {
text-decoration: none;
}
.slideshow-container {
display: block;
width: 80%;
position: relative;
margin: 10px;
margin-left: auto;
margin-right: auto;
}
.mySlides {
display: none;
}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
background-color: #a6a6a650;
}
.slide-name {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.slide-number {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.progress-bar {
width: 100%;
border: none;
border-radius: 100px;
background-color: #FFFFFF;
padding: 3px;
}
.progress-tag {
color: #DDDDDD;
margin-left: 10px;
}
.fill-html {
width: 75%;
background-color: #FA3200;
border-radius: 100px;
}
.fill-css {
width: 60%;
background-color: #0000C8;
border-radius: 100px;
}
.fill-js {
width: 10%;
background-color: #C80000;
border-radius: 100px;
}
.fill-php {
width: 0%;
background-color: #00C832;
border-radius: 100px;
}
.fill-rwpd {
width: 100%;
background-color: #450099;
border-radius: 100px;
}
#return {
display: none;
position: fixed;
bottom: 50px;
right: 50px;
z-index: 99;
border: none;
background-color: #3a3a3a;
cursor: pointer;
border-radius: 100px;
width: 60px;
height: 60px;
}
#return:hover {
background-color: #2a2a2a;
}
.progress-container {
padding: 10px;
}
.headar-logo-container {
position: absolute;
left: 0;
top: 0;
bottom: 0;
padding: 10px;
}
.header-logo {
height: 100%;
}
.header {
background-color: #000000;
overflow: hidden;
width: 100%;
position: relative;
}
.desktop-nav-links {
float: right;
margin-right: 1.5vw;
}
.desktop-nav-links a {
margin: 1.5vw;
display: block;
color: white;
font-size: 1vw;
}
.desktop-nav-links a:hover {
color: #b4b4b4;
transition: 0.2s all ease;
}
.desktop-nav-links li {
float: left;
list-style: none;
}
.menu-button {
display: none;
}
.copyright {
color: #b4b4b4;
font-size: 15px;
}
footer {
background: #000000;
padding: 25px 0;
text-align: center;
bottom: 0;
width: 100%;
height: auto;
display: block;
}
.hyperlink {
display: inline-block;
position: relative;
color: #b4b4b4;
}
.hyperlink:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0px;
left: 0;
background-color: #b4b4b4;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hyperlink:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 35px;
margin-left: 50px;
}
.recipe-container {
margin: 0px;
display: grid;
grid-template-columns: auto auto auto;
justify-content: center;
}
.recipe-window {
margin: 10px;
padding: 10px;
border: 1px solid #ffffff;
background-color: #ffffff;
word-break: break-word;
width: min-content;
border-radius: 10px;
}
.recipe-title {
color: black;
margin-top: 5px;
padding: 0px;
font-size: 25px;
}
.footer-links {
display: flex;
justify-content: center;
align-items: center;
}
.footer-links p {
margin: 0;
}
.footer-links a {
color: #ffffff;
margin: auto 10px auto 10px;
}
.footer-links a:hover {
color: #b4b4b4;
}
.about {
text-align: center;
padding: 0 300px;
}
.mobile-nav {
display: none;
}
.footer-logo {
width: 160px;
}
.table-container {
display: grid;
grid-template-columns: auto;
justify-content: center;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
background-color: white;
color: black;
border: 2px solid black;
}
td,
th {
border: 1px solid black;
padding: 10px 20px;
}
th {
font-size: 20px;
}
td {
font-size: 15px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.output {
display: grid;
grid-template-columns: auto;
justify-content: center;
border-radius: 10px;
}
.total1 {
border: none;
}
.pc-border-title {
text-align: center;
}
.intro-heading {
font-size: 25px;
text-align: center;
color: #ffffff;
}
.pcbuilder-link {
color: #cecece;
}
.pcbuilder-link:hover {
color: #adadad;
}
.table-heading {
font-size: 50px;
text-align: center;
color: #000000;
margin-bottom: 10px;
margin-top: 0px;
border: 2px solid #000000;
}
#photo {
padding: 10px;
background-color: #ffffff;
border-radius: 10px;
}
.scrn_button {
font-size: 30px;
background-color: #bfbfbf;
border: 2px solid black;
border-radius: 10px;
color: black;
}
.scrn_button:hover {
cursor: pointer;
background-color: #9b9b9b;
}
.scrn_button:active {
background-color: #797979;
}
.contact-form {
border-radius: 10px;
background-color: #ffffff;
color: #000000;
padding: 10px;
width: auto;
}
.input {
width: 100%;
background-color: #bfbfbf;
border: none;
color: black;
border-radius: 10px 0px 10px 0px;
padding: 5px;
font-size: 18px;
}
.contact-form-container {
margin: 10px 300px;
}
.submit-button-container {
text-align: center;
}
.submit-button {
font-size: 25px;
border-radius: 10px;
border: none;
background-color: #818181;
user-select: none;
}
.submit-button:active {
background-color: #414141;
transition: ease 0.1s;
}
#keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.price::before {
content: "\00a3";
}
#msg {
background-color: #bfbfbf;
border: none;
color: black;
border-radius: 10px 0px 10px 0px;
padding: 5px;
resize: none;
width: 100%;
font-size: 15px;
}
.submit-button:hover::after {
content: ' >';
}
.upload-label {
background-color: #0030b0;
color: white;
padding: 10px;
font-size: 18px;
border-radius: 5px;
cursor: pointer;
border: none;
user-select: none;
}
.upload {
margin: 10px;
text-align: center;
}
#output {
width: 100%;
text-align: center;
padding: 10px;
}
.portfolio-intro {
font-size: 30px;
}
.content {
margin: 10px;
}
.professional:hover:before {
content: 'un-';
font-weight: bolder;
}
.learn-more {
color: #ffd000;
font-size: 20px;
}
.learn-more:hover {
color: #dab200;
transition: all ease 0.3s;
}
.learn-more:active {
color: #bb9900;
transition: all 0s;
}
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="UTF-8">
<title>Home | Aeron</title>
<link rel="icon" type="image/x-icon" href="./images/favicon.png">
<link rel="stylesheet" media="screen and (min-width: 1294px)" href="main.css">
<link rel="stylesheet" media="screen and (max-width: 1294px)" href="mobile.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="header">
<div class="headar-logo-container">
<img src="https://picsum.photos/30/20" title="Aeron" alt="logo" class="header-logo">
</div>
<div class="desktop-nav">
<ul class="desktop-nav-links">
<li>Home</li>
<li>Portfolio</li>
<li>Contact me</li>
<li>About me</li>
<li>Recipes</li>
<li>Progress</li>
<li>PC Setup Designer</li>
<li>Gallery</li>
</ul>
</div>
<div class="mobile-nav">
<span class="menu-button" onclick="openNav()">☰</span>
<div id="mobile-nav-panel" class="mobile-nav-panel">
+
<ul class="mobile-nav-link-list">
<li class="mobile-nav-link">Home</li>
<hr>
<li class="mobile-nav-link">Portfolio</li>
<hr>
<li class="mobile-nav-link">Contact me</li>
<hr>
<li class="mobile-nav-link">About me</li>
<hr>
<li class="mobile-nav-link">Recipes</li>
<hr>
<li class="mobile-nav-link">Progress</li>
<hr>
<li class="mobile-nav-link">PC Setup Designer</li>
<hr>
<li class="mobile-nav-link">Gallery</li>
<hr>
<li class="mobile-nav-link"></li>
</ul>
</div>
</div>
</div>
<h1 class="heading">Welcome to Aeron</h1>
<div class="content">
</div>
<div style="height:100%"></div>
<footer>
<img src="./images/logo.png" title="Aeron" alt="logo" class="footer-logo">
<p class="copyright">Copyright © 2022 Aeron</p>
<div class="footer-links">
About me
<p>|</p>
Policy
<p>|</p>
<a href=contact.html>Contact me</a>
</div>
</footer>
<button onclick="topFunction()" id="return" title="Return To Top"><img src="./images/arrow_upward.svg" width="30px" alt="Return"></button>
<script>
let mybutton = document.getElementById("return");
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
}
function openNav() {
document.getElementById("mobile-nav-panel").style.width = "100%";
}
function closeNav() {
document.getElementById("mobile-nav-panel").style.width = "0";
}
</script>
</body>
</html>
I am making a website where people can watch videos and I want my videos to fit the screens on telephones but it wont fit. The widht does not want to change.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hamza</title>
<link rel="icon" href="profile.jpg">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/e838428f0c.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
<ul>
<a class="hamxa" href="index.html">
<center>
<img class="profile-pic-1" src="profile.jpg">
</center>
<h1 class="hamza">Hamza</h1>
</a>
<div class="items">
<a href="videos.html">
<button><i class="fa-solid fa-circle-play"></i>VIDEOS</button>
</a>
<a href="https://docs.google.com/forms/d/e/1FAIpQLSc4uB40mPR_idarZm--J8_0iM3je3ipRw4wY_L9Ka_pqYMQPg/viewform">
<button><i class="fa-solid fa-briefcase"> WORK</i></button>
</a>
</div>
</ul>
</nav>
<p></p>
<div class="container">
<div class="video-container">
<div>
<div class="video"><video poster="welcome.jpg" src="Video1.mp4"></video></div>
<p>Welcome To The Cult.</p>
</div>
</div>
<h2>New Videos</h2>
<div class="video-container">
<div>
<div class="video"><video poster="Video1.jpg" src="Video1.mp4"></video></div>
<p>BECOME THE STRONG MAN THEY NEED / TESTOSTERONE IS AT ALL TIME LOW</p>
</div>
<div>
<div class="video"><video poster="Video2.jpg" src="Video1.mp4"></video></div>
<p>7 Reasons People Dislike You Immediately</p>
</div>
<div>
<div class="video"><video poster="Video3.jpg" src="Video1.mp4"></video></div>
<p>PSYCHOLOGICAL SECRETS OF ATTRACTION</p>
</div>
</div>
<div class="popup-video">
<span>×</span>
<video src="Video1.mp4" autoplay controls></video>
</div>
</div>
<script>
document.querySelectorAll('.video-container video').forEach(vid =>{
vid.onclick = () =>{
document.querySelector('.popup-video').style.display = 'block';
document.querySelector('.popup-video video').src = vid.getAttribute('src')
}
});
document.querySelector('.popup-video span').onclick = () =>{
document.querySelector('.popup-video').style.display = 'none';
document.querySelector('.popup-video video').src = 'none';
}
</script>
</body>
</html>
Here is my CSS:
#import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght#500&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Josefin Sans', sans-serif;
text-align: center;
}
h1 {
color: white;
}
h2 {
margin: 30px;
text-decoration: underline;
}
a {
color: black;
margin: 0;
font-size: 18px;
font-weight: 700;
line-height: 20px;
margin-bottom: 12px;
margin-left: 12px;
text-align: left;
text-decoration: none;
max-width: 100%;
}
p {
width: 437px;
font-size: 18px;
margin-top: 20px;
}
nav {
background: #222222;
border: 1px solid #222222;
border-right: none;
border-left: none;
}
ul {
padding: 0;
margin: 0;
}
button {
padding: 0;
border: none;
background: #222222;
color: white;
width: 100px;
height: 50px;
}
button:hover {
padding: 0;
background: white;
border: none;
color: black;
width: 100px;
height: 50px;
border-radius: 5px;
transition: 0.25s;
}
center {
margin-bottom: 30px;
}
textarea {
height: 20px;
width: 100%;
border: none;
border-bottom: 2px solid #aaa;
background-color: transparent;
margin-bottom: 10px;
resize: none;
outline: none;
transition: .5s;
}
i {
padding-right: 5px;
}
.items {
margin-bottom: 30px;
}
.profile-pic-1 {
width: 100px;
border-radius: 100px;
}
.profile-pic-1:hover {
opacity: 0.75;
transition: 0.25s;
}
.hamza {
margin-bottom: 30px;
margin-top: 0;
text-align: center;
}
.hamza:hover {
opacity: 0.75;
transition: 0.25s;
}
.container {
position: relative;
min-height: 100vh;
}
.container .video-container {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
padding: 10px;
}
.container .video-container .video {
height: 250px;
width: 437px;
border: 5px solid white;
border-radius: 5px;
box-shadow: 0 5px 15px rgba(0, 0, 0, .7);
cursor: pointer;
overflow: hidden;
}
.container .video-container .video video {
height: 100%;
width: 100%;
object-fit: cover;
transition: .2s linear;
}
.container .video-container .video:hover video {
transform: scale(1.1);
}
.container .popup-video {
position: fixed;
top: 0;
left: 0;
z-index: 100;
background: rgba(0, 0, 0, 0.8);
height: 100%;
width: 100%;
display: none;
}
.container .popup-video video {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 750px;
border-radius: 5px;
border: 3px solid white;
object-fit: cover;
}
.container .popup-video span {
position: absolute;
top: 5px;
right: 20px;
font-size: 50px;
color: white;
font-weight: bold;
z-index: 100;
cursor: pointer;
}
#media (max-width: 768px){
.container .popup-video video {
width: 95%;
}
}
I have tried to change the width of the videos but it does not work. And i have no idea what to do. I am new to programing.
I have a two-columned div element that I need to have at the bottom of the page to act as a footer. The problem is I have tried using position:fixed and bottom:0 to make the element appear at the bottom. This works but only brings one of the #column divs down to the bottom, the other disappears. I would appreciate any assistance.
Code:
/* ~ Copyright (c) Macleay Netball Association (made by Tom Carpenter for Year 11 IPT Assessment Task #2.) 2019. */
html>body {
background: none;
padding: 0;
margin: 0;
height: 100%;
overflow: hidden;
font-family: 'Trebuchet MS', sans-serif;
/* Trebuchet MS as main font throughout website, sans-serif acting as a backup */
}
#wrapper {
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
position: absolute;
background: #1B315E;
}
::-webkit-scrollbar {
display: none;
}
* {
box-sizing: border-box;
/* Alignment of DropDown Navigation Menu and Slideshow */
}
.navigation {
background: #444;
overflow: hidden;
top: 0;
}
.menuDropDown {
overflow: hidden;
float: left;
}
.menuDropDown>#menuButton {
font-size: 12px;
padding: 16px 16px;
/* Will result in final height of navigation */
margin: 0;
outline: none;
border: none;
font: inherit;
background: inherit;
color: #FFF;
}
#menuButton:hover,
.navigation>.menuDropDown:hover>#menuButton {
border: none;
outline: none;
background: #666;
color: #1B315E;
}
.menuDropDown:hover>.menuContent {
display: block;
}
.menuContent {
display: none;
position: absolute;
background: none;
width: 100%;
left: 0;
max-height: 85vh;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.menuRow:after {
display: table;
clear: both;
content: "";
}
.menuColumn {
width: 25%;
height: 100px;
overflow-y: auto;
padding: 5px;
float: left;
background: #666;
}
.menuColumn>a {
float: none;
display: block;
text-align: left;
text-decoration: none;
font-size: 14px;
padding: 8px;
color: #1B315E;
}
.menuColumn>a.current {
background: #777;
}
.menuColumn>a:hover {
background: #888;
}
.logo {
float: right;
padding-right: 10px;
width: 60px;
height: 50px;
}
.main {
width: 100%;
height: calc(100vh - 43px);
float: left;
background: none;
position: absolute;
overflow: auto;
padding: 8px;
}
.mainHeader {
color: #FFF;
text-align: center;
}
.mainImg {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.mainBody {
color: #FFF;
padding: 8px;
}
.row:after {
content: "";
clear: both;
display: table;
}
.column {
float: left;
width: 33.33%;
padding: 8px;
}
#column {
float: left;
width: 50%;
padding: 8px;
background: #888;
bottom: 0;
}
.sponsers {
float: left;
width: 20%;
padding: 8px;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.sponsers:hover {
-webkit-filter: grayscale(80%);
filter: grayscale(80%);
}
.slideshow {
/* Slideshow Container containing Images, Sliders and Captions */
position: relative;
margin: auto;
max-width: 1000px;
}
.slides {
display: none;
}
.slideshowImages {
width: 100%;
}
.slideButton {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background: #888;
color: #FFF;
border: none;
cursor: pointer;
padding: 16px 32px;
font-size: 18px;
text-align: center;
border-radius: 10px;
font-weight: bold;
}
.mnaHeader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.slideButton:hover {
background: #666;
}
.previous,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: #FFF;
font-weight: bold;
font-size: 18px;
transition: 0.3s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.previous:hover,
.next:hover {
background: rgba(0, 0, 0, 0.8);
}
table {
width: 100%;
font-size: 16px;
color: #FFF;
}
.tableCaption {
font-weight: bold;
font-size: 18px;
color: #33CC33;
}
table,
th,
td {
border-collapse: collapse;
border: 2px solid #888;
}
th,
td {
padding: 8px;
text-align: left;
}
#headerTable {
width: 33.33%;
background: #888;
font-size: 18px;
color: #33CC33;
}
.linkProp {
color: #FFF;
text-decoration: underline;
}
.newsPanel {
width: 100%;
background: #888;
height: 135px;
}
.imgNewsPreview {
width: 215px;
height: 135px;
padding: 4px;
float: left;
}
.newsHeaderPreview {
color: #FFF;
margin-top: 0px;
}
.newsBodyPreview {
color: #FFF;
margin-top: -12px;
}
.caption {
color: #33CC33;
text-align: center;
position: absolute;
font-size: 20px;
width: 100%;
padding: 8px 12px;
bottom: 16px;
}
.collapsible {
background: #888;
color: #FFF;
font-weight: bold;
width: 100%;
padding: 18px;
cursor: pointer;
font-size: 16px;
outline: none;
border: none;
text-align: left;
}
.active,
.collapsible:hover {
background: #666;
}
.collapsible:after {
content: '\002B';
color: #FFF;
font-weight: bold;
float: right;
margin-left: 4px;
}
.active:after {
content: '\2212';
}
.contentCollapsible {
padding: 0px 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background: #F8F8F8;
}
.fade {
-webkit-animation-name: fade;
/* To work on Safari (Apple) */
-webkit-animation-duration: 1s;
/* To work on Safari (Apple) */
animation-name: fade;
animation-duration: 1s;
}
.buttonReturn {
position: absolute;
margin-left: 20px;
margin-top: 20px;
background: #888;
color: #FFF;
border: none;
cursor: pointer;
font-size: 36px;
text-align: center;
border-radius: 50%;
font-weight: bold;
}
.videoProp {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
height: 400px;
}
#-webkit-keyframes fade {
from {
opacity: 0.4
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: 0.4
}
to {
opacity: 1
}
}
#media screen and (max-width: 600px) {
/* Stacks navigation menu acting for the site to be responsive */
.menuColumn {
width: 100%;
height: auto;
}
}
#media screen and (max-width: 800px) {
/* Stacks Image Header on Top - acting as responsive */
.column,
#column {
width: 100%;
}
}
#media screen and (max-width: 600px) {
/* Responsive Sponser Images */
.sponsers {
width: 33.33%;
}
}
#media screen and (max-width: 800px) {
/* Increases video resolution as screen reduces */
.videoProp {
width: 100%;
}
}
#media screen and (max-width: 600px) {
/* Reduces font-size as screen resolution lowers */
.newsBodyPreview {
font-size: 14px;
}
}
#media screen and (max-width: 300px) {
/* Reduces font-sizes within the slideshow <div> */
.previous,
.next,
.caption {
font-size: 14px;
}
}
<!DOCTYPE HTML>
<!--
~ Copyright (c) Macleay Netball Association (made by Tom Carpenter for Year 11 IPT Assessment Task #2.) 2019.
-->
<html lang="en-AU">
<head>
<title>Contact Us — Macleay Netball Association</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="../style.css" type="text/css">
<!-- Internal Stylesheet -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<!-- External Font Stylesheet -->
<link rel="shortcut icon" href="../Assets/Img/mnaHeader.png">
<!-- Tab Browser Icon (Favicon) -->
</head>
<body>
<div id="wrapper">
<div class="navigation">
<div class="menuDropDown">
<button id="menuButton" title="Navigation Menu"><i class="fas fa-bars"></i> Menu</button>
<div class="menuContent">
<div class="menuRow">
<div class="menuColumn">
<a title="Home" href="../index.html"><i class="fas fa-home"></i> Home</a>
<a title="Association Contacts" href="contacts.html"><i class="fas fa-address-book"></i> Association Contacts</a>
</div>
<div class="menuColumn">
<a title="Weekly Draw" href="weekly-draw.html"><i class="fas fa-user-friends"></i> Weekly Draw</a>
<a title="News" href="#"><i class="far fa-newspaper"></i> News</a>
</div>
<div class="menuColumn">
<a title="Quick Links" href="links.html"><i class="fas fa-bookmark"></i> Quick Links</a>
<a title="Representative Teams" href="representative-teams.html"><i class="fas fa-certificate"></i> Representative Teams</a>
</div>
<div class="menuColumn">
<a title="Documentation" href="documentation.html"><i class="fas fa-file"></i> Documentation</a>
<a class="current" title="Contact Us" href="contact-us.html"><i class="fas fa-phone"></i> Contact Us</a>
</div>
</div>
</div>
</div>
<img src="../Assets/Img/mnaHeader.png" alt="Macleay Netball Association" title="Macleay Netball Association" class="logo">
<!-- Macleay Netball Association Main Logo -->
</div>
<!-- End of Navigation -->
<div class="main">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3417.0548484369647!2d152.83521681537312!3d-31.080401281517187!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6b9ddf84d6da904b%3A0xfc941d1ded8f7a25!2sPam+Guyer+Netball+Centre!5e0!3m2!1sen!2sau!4v1559129788713!5m2!1sen!2sau"
width="100%" height="400px" frameborder="0" style="border:0" allowfullscreen></iframe>
<!-- Google Maps Embed -->
<br>
<div class="row">
<div id="column">1</div>
<div id="column">2</div>
</div>
<!-- End of Footer -->
</div>
<!-- End of Main -->
</div>
<!-- End of Wrapper -->
</body>
</html>
Attached are some images if I put position:fixed bottom:0 in the #column CSS Code. Only Column 2 goes down, 1 is hidden.
The best way to achieve this having responsiveness in mind and easier manipulation on different screen sizes is wrapping the two div elements in another div that you will position fixed on the bottom and then adjusting the two divs to take 50% of its parent. You've done half of this job by putting the divs into a .row wrapper.
The best solution would probably be using flex to adjust the divs in their parent wrapper like this:
Plus, you can not use the same id twice as it is in your example.
<div class="row">
<div>1</div>
<div>2</div>
</div>
<style>
.row {
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
}
.row > div {
flex: 1;
}
</style>
Then on mobile devices you can just change the flex direction and the footer will become one-columned instead of two-columned. Like this:
<style>
#media only screen and (max-width: 768px) {
.row {
flex-direction: column;
}
}
</style>
Add an id to the element you want as a footer, remove the class and use the css below to style the element.
#footer {
clear: both;
}
<div id="footer">
<div id="column">1</div>
<div id="column">2</div>
</div> <!-- End of Footer -->
Both 1 and 2 are fixed to the bottom. Only the float: left has no effect here and they are at the exactly same position. The 2 is in front of 1 and latter is not visible behind 2
Do this instead.
<div class="row footer">
<div id="column">1</div>
<div id="column">2</div>
</div>
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
/* ~ Copyright (c) Macleay Netball Association (made by Tom Carpenter for Year 11 IPT Assessment Task #2.) 2019. */
html>body {
background: none;
padding: 0;
margin: 0;
height: 100%;
overflow: hidden;
font-family: 'Trebuchet MS', sans-serif;
/* Trebuchet MS as main font throughout website, sans-serif acting as a backup */
}
#wrapper {
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
position: absolute;
background: #1B315E;
}
::-webkit-scrollbar {
display: none;
}
* {
box-sizing: border-box;
/* Alignment of DropDown Navigation Menu and Slideshow */
}
.navigation {
background: #444;
overflow: hidden;
top: 0;
}
.menuDropDown {
overflow: hidden;
float: left;
}
.menuDropDown>#menuButton {
font-size: 12px;
padding: 16px 16px;
/* Will result in final height of navigation */
margin: 0;
outline: none;
border: none;
font: inherit;
background: inherit;
color: #FFF;
}
#menuButton:hover,
.navigation>.menuDropDown:hover>#menuButton {
border: none;
outline: none;
background: #666;
color: #1B315E;
}
.menuDropDown:hover>.menuContent {
display: block;
}
.menuContent {
display: none;
position: absolute;
background: none;
width: 100%;
left: 0;
max-height: 85vh;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.menuRow:after {
display: table;
clear: both;
content: "";
}
.menuColumn {
width: 25%;
height: 100px;
overflow-y: auto;
padding: 5px;
float: left;
background: #666;
}
.menuColumn>a {
float: none;
display: block;
text-align: left;
text-decoration: none;
font-size: 14px;
padding: 8px;
color: #1B315E;
}
.menuColumn>a.current {
background: #777;
}
.menuColumn>a:hover {
background: #888;
}
.logo {
float: right;
padding-right: 10px;
width: 60px;
height: 50px;
}
.main {
width: 100%;
height: calc(100vh - 43px);
float: left;
background: none;
position: absolute;
overflow: auto;
padding: 8px;
}
.mainHeader {
color: #FFF;
text-align: center;
}
.mainImg {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.mainBody {
color: #FFF;
padding: 8px;
}
.row:after {
content: "";
clear: both;
display: table;
}
.column {
float: left;
width: 33.33%;
padding: 8px;
}
#column {
float: left;
width: 50%;
padding: 8px;
background: #888;
bottom: 0;
}
.sponsers {
float: left;
width: 20%;
padding: 8px;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.sponsers:hover {
-webkit-filter: grayscale(80%);
filter: grayscale(80%);
}
.slideshow {
/* Slideshow Container containing Images, Sliders and Captions */
position: relative;
margin: auto;
max-width: 1000px;
}
.slides {
display: none;
}
.slideshowImages {
width: 100%;
}
.slideButton {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background: #888;
color: #FFF;
border: none;
cursor: pointer;
padding: 16px 32px;
font-size: 18px;
text-align: center;
border-radius: 10px;
font-weight: bold;
}
.mnaHeader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.slideButton:hover {
background: #666;
}
.previous,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: #FFF;
font-weight: bold;
font-size: 18px;
transition: 0.3s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.previous:hover,
.next:hover {
background: rgba(0, 0, 0, 0.8);
}
table {
width: 100%;
font-size: 16px;
color: #FFF;
}
.tableCaption {
font-weight: bold;
font-size: 18px;
color: #33CC33;
}
table,
th,
td {
border-collapse: collapse;
border: 2px solid #888;
}
th,
td {
padding: 8px;
text-align: left;
}
#headerTable {
width: 33.33%;
background: #888;
font-size: 18px;
color: #33CC33;
}
.linkProp {
color: #FFF;
text-decoration: underline;
}
.newsPanel {
width: 100%;
background: #888;
height: 135px;
}
.imgNewsPreview {
width: 215px;
height: 135px;
padding: 4px;
float: left;
}
.newsHeaderPreview {
color: #FFF;
margin-top: 0px;
}
.newsBodyPreview {
color: #FFF;
margin-top: -12px;
}
.caption {
color: #33CC33;
text-align: center;
position: absolute;
font-size: 20px;
width: 100%;
padding: 8px 12px;
bottom: 16px;
}
.collapsible {
background: #888;
color: #FFF;
font-weight: bold;
width: 100%;
padding: 18px;
cursor: pointer;
font-size: 16px;
outline: none;
border: none;
text-align: left;
}
.active,
.collapsible:hover {
background: #666;
}
.collapsible:after {
content: '\002B';
color: #FFF;
font-weight: bold;
float: right;
margin-left: 4px;
}
.active:after {
content: '\2212';
}
.contentCollapsible {
padding: 0px 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background: #F8F8F8;
}
.fade {
-webkit-animation-name: fade;
/* To work on Safari (Apple) */
-webkit-animation-duration: 1s;
/* To work on Safari (Apple) */
animation-name: fade;
animation-duration: 1s;
}
.buttonReturn {
position: absolute;
margin-left: 20px;
margin-top: 20px;
background: #888;
color: #FFF;
border: none;
cursor: pointer;
font-size: 36px;
text-align: center;
border-radius: 50%;
font-weight: bold;
}
.videoProp {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
height: 400px;
}
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
#-webkit-keyframes fade {
from {
opacity: 0.4
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: 0.4
}
to {
opacity: 1
}
}
#media screen and (max-width: 600px) {
/* Stacks navigation menu acting for the site to be responsive */
.menuColumn {
width: 100%;
height: auto;
}
}
#media screen and (max-width: 800px) {
/* Stacks Image Header on Top - acting as responsive */
.column,
#column {
width: 100%;
}
}
#media screen and (max-width: 600px) {
/* Responsive Sponser Images */
.sponsers {
width: 33.33%;
}
}
#media screen and (max-width: 800px) {
/* Increases video resolution as screen reduces */
.videoProp {
width: 100%;
}
}
#media screen and (max-width: 600px) {
/* Reduces font-size as screen resolution lowers */
.newsBodyPreview {
font-size: 14px;
}
}
#media screen and (max-width: 300px) {
/* Reduces font-sizes within the slideshow <div> */
.previous,
.next,
.caption {
font-size: 14px;
}
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<div id="wrapper">
<div class="navigation">
<div class="menuDropDown">
<button id="menuButton" title="Navigation Menu"><i class="fas fa-bars"></i> Menu</button>
<div class="menuContent">
<div class="menuRow">
<div class="menuColumn">
<a title="Home" href="../index.html"><i class="fas fa-home"></i> Home</a>
<a title="Association Contacts" href="contacts.html"><i class="fas fa-address-book"></i> Association Contacts</a>
</div>
<div class="menuColumn">
<a title="Weekly Draw" href="weekly-draw.html"><i class="fas fa-user-friends"></i> Weekly Draw</a>
<a title="News" href="#"><i class="far fa-newspaper"></i> News</a>
</div>
<div class="menuColumn">
<a title="Quick Links" href="links.html"><i class="fas fa-bookmark"></i> Quick Links</a>
<a title="Representative Teams" href="representative-teams.html"><i class="fas fa-certificate"></i> Representative Teams</a>
</div>
<div class="menuColumn">
<a title="Documentation" href="documentation.html"><i class="fas fa-file"></i> Documentation</a>
<a class="current" title="Contact Us" href="contact-us.html"><i class="fas fa-phone"></i> Contact Us</a>
</div>
</div>
</div>
</div>
<img src="../Assets/Img/mnaHeader.png" alt="Macleay Netball Association" title="Macleay Netball Association" class="logo">
<!-- Macleay Netball Association Main Logo -->
</div>
<!-- End of Navigation -->
<div class="main">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3417.0548484369647!2d152.83521681537312!3d-31.080401281517187!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6b9ddf84d6da904b%3A0xfc941d1ded8f7a25!2sPam+Guyer+Netball+Centre!5e0!3m2!1sen!2sau!4v1559129788713!5m2!1sen!2sau"
width="100%" height="400px" frameborder="0" style="border:0" allowfullscreen></iframe>
<!-- Google Maps Embed -->
<br>
<div class="row footer">
<div id="column">1</div>
<div id="column">2</div>
</div>
<!-- End of Footer -->
</div>
<!-- End of Main -->
</div>
<!-- End of Wrapper -->
First of all id must be unique for an element, shouldn't set same id on two elements.
When you set position fixed on an element it is positioned relative to viewport, not relative to flow of the page.
Both of your elements have bottom: 0, which is relative to browser window, that's why your first element is covered by the second one (it's not hidden). You can group them in the same parent and position the parent, so your elements are stacked as expected. Take a look at the following code:
body {
min-height: 200vh;
}
#column {
display: block;
padding 15px;
width: 100%;
position: fixed;
bottom: 0;
background: #e5e5e5;
}
#column div {
display: block;
padding: 10px;
width: 100%;
background: #9b009b;
color: #fff;
margin-bottom: 10px;
}
<div id="column">
<div>first col</div>
<div>second col</div>
</div>
Does someone know how to fix
this issue?
There's green around, I'd like to known how to remove/let the other color go over it.
Here is the CSS file, I do have 2 css files, not sure if thats a problem.
*{
padding: 0;
margin: 0;
}
body{
width: 100%;
height: auto;
overflow: hidden;
background-color: #c4a1a2;
}
.content-wrapper{
width: 80%;
margin: 4% 10% 5% 10%;
}
.content-wrapper img{
width: 100%;
}
.text-wrapper{
width: 100%;
position: relative;
margin-top: -40%;
}
.text-wrapper h1{
text-align: center;
color: #ffffff;
font-size: 10vw;
font-family: 'lobster', cursive;
<!-- New CSS post -->
html {
height: 100%;
}
body {
margin: 0px;
height: 100%;
}
h1 { text-align: center; }
.hoofdtabel {
width: 100%;
height: 100%;
margin: 0px;
border-collapse: collapse;
} /* Vervangt cellspacing="0" */
.kop {
width: 100%;
height: 10%;
background-color: #5570aa;
text-align: center;
font-size: 72px;
}
.menu {
width: 12%;
height: 70%;
padding: 5px; /* Vervangt cellpadding="5" */
background-color: #9e6171;
vertical-align: top;
}
.inhoud {
width: 96%;
height: 85%;
padding: 5px;
text-align: left;
background-color: #b8c6c4;
vertical-align: top;
}
.onder {
width: 100%;
height: 5%;
padding: 5px;
background-color: black;
vertical-align: middle;
text-align: right;
color: white;
}
.button {
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
background-color: #e9ece5;
color: black;
border: 2px solid #b3c2bf;
width: 100px;
}
.button:hover {
background-color: #008CBA;
}
.frame {
height: 100%;
width: 100%;
border: none;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Text Over Image</title>
<link rel="stylesheet" href="text_over_image.css">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
</head>
<body>
<div class="content-wrapper">
<img src="https://i.stack.imgur.com/YE31e.png">
<div class="text-wrapper">
<h1>Welkom!</h1>
</div>
</div>
</body>
</html>
Sorry if I'm making mistakes, I'm new here and new to programming in general.
Missing Picture: enter image description here
*Second CSS file starts after
So I have this really weird problem. My media queries work very well when I test them locally, however, when I uploaded the files to my website, the server doesn't seem to notice the media queries, it notices one of them which is the first one but the ones for smartphones, it just skips and displays all the elements that I've hidden for all screen sizes. I'm certain they're correct because they work locally. Anyway, here's the html and css.
<meta name="viewport" content="width=device-width">
<header>
<div class="container">
<h1 id="logo"><img src="index/logo.png" alt="logo"/></h1>
<div class="dropdown">
<img src="index/mobilemenubutton.png" id="menubutton">
<div class="dropdown-content">
<ul id="nobullets">
<li class="center">Home</li>
<li class="center">About</li>
<li class="center">Services</li>
</ul>
</div>
</div>
#container_2, #navi, #infoi, #smartphone_main_col, .dropdown, .dropdown-
content {
display: none;
}
#media screen /*THIS ONE WORKS*/
and (max-width: 1367px) {
.slider {
display: none;
}
.fader {
display: block;
}
#navi, #infoi {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#infoi {
z-index: 1;
transition: 2s;
}
#infoi:hover {
opacity: 0;
}
#container_2 {
position: relative;
width: 100%;
height: 100%;
display: block;
}
#other_f {
position: relative;
top: 650px;
}
#newsletter {
z-index: 3;
}
.button_1 {
display: inline-block;
border-radius: 4px;
background-color: #0099ff;
border: none;
color: #FFFFFF;
line-height: 4px;
font-size: 20px;
padding: 20px;
padding-top: 18px;
padding-bottom: -2;
width: 150px;
height: 30px;
transition: all 1s;
cursor: pointer;
margin: 5px;
position: relative;
top: 3.3px;
}
footer {
z-index: 2;
position: relative;
bottom: 0;
width:100%;
height:40px;
}
}
/* Smartphones (portrait and landscape) ---------- */ /*THIS ONE DOESN'T WORK*/
#media screen and (min-width: 320px) and (max-width: 480px){
.slider, .slides, .slide, #infoi, #navi, footer {
display: none;
}
#background {
background-color: #d2d8d0;
}
.container {
width: 100%;
margin: auto;
overflow: hidden;
padding-right: 0;
}
header {
position: fixed;
top: 0;
width: 100%;
border-bottom: #0099ff 4px solid;
}
#logo {
float: left;
position: relative;
right: 25px;
bottom: 30px;
}
.dropdown {
position: absolute;
display: inline-block;
padding: 0;
margin: 0;
}
#menubutton {
position: relative;
width: 70px;
height: 70px;
left: 30px;
}
#nobullets {
list-style-type: none;
}
.center {
padding: 10px 20px 10px 0px;
}
.center:hover {
background-color: #ffffff;
}
.dropdown-content {
display: none;
position: relative;
right: 20px;
color: black;
background-color: #35424a;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
margin: 0;
bottom: 100px;
right: 80px;
padding: 0;
}
.dropdown:hover .dropdown-content {
display: block;
}
.link-1 {
display: none;
}
#smartphone_main_col {
display: block;
padding-left: 40px;
padding-right: 40px;
padding-top: 80px;
}
#newsletter {
height: 80px;
position: fixed;
bottom: 0;
padding-top: 0;
padding-right: 0;
}
#newsletterhead {
font-size: 20px;
position: relative;
top: -12px;
left: 34px;
}
#newsletter input[type="email"] {
padding: 4px;
height: 23px;
width: 185px;
transition: 1s;
position: relative;
bottom: 10px;
right: 35px;
float: left;
}
.button_1 {
display: inline-block;
border-radius: 0px;
background-color: #0099ff;
border: none;
color: #FFFFFF;
line-height: 4px;
font-size: 20px;
padding: 18px;
padding-bottom: -12px;
width: 120px;
height: 7px;
transition: all 1s;
cursor: pointer;
margin: 5px;
position: relative;
top: -16px;
right: 35px;
}
}
So I've finally figured it out guys, I had user-scalability set to no, I just set it to yes and deleted temp files in my browser and it's working just fine.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-
scalable=yes"> <!--THIS-->
<meta name="description" content="Affordable and professional web design">
<meta name="keywords" content="web design, affordable web design,
professional web design, portfolio">
<meta name="author" content="Stefan Vujic">
<title>Light Designs | Welcome</title>
<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="favicon.png">
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript">
you can try place mobile css front pc css like this:
#media screen and (min-width: 320px) and (max-width: 480px){...}
#media screen and (max-width: 1320px){...}