In my app I have image and text under the pic - in media queries. I want to display the text after the pic, but somehow it overlaps:
jsFiddle: https://jsfiddle.net/orbwthma/
#media only screen and (max-width: 614px) {
#page-content {
position: absolute;
top: 0;
right: 0;
margin-top: 0 !important;
padding: 0 !important;
}
#main-pic {
position: absolute;
top: 0;
background-size: contain;
background-image: url('../assets/feev-cropped.png');
background-repeat: no-repeat;
margin-bottom: 0 !important;
}
#info {
position: relative;
font-weight: 500;
line-height: 1.29;
}
#lower-text {
font-size: 21px;
width: 305px;
height: 178px;
margin-top: 0 !important;
line-height: 1.29;
margin-bottom: 10px;
}
#page-start {
height: 60vh;
}
}
body {
background-color: #ff0000 !important;
padding: 0px;
margin: 0px;
overflow-x: hidden;
}
#page-start {
height: 100vh;
}
#page-content {
padding-top: 68px !important;
}
#lower-text {
color: #fff;
font-size: 68px;
font-weight: 500;
float: right;
margin: 20px 0px 120px 0;
}
#main-pic {
background-image: url('https://images.pexels.com/photos/736230/pexels-photo-736230.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');
width: 100%;
height: 920px;
background-size: cover;
background-repeat: no-repeat;
margin-right: auto;
margin-bottom: 50px;
float: right;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<title>FEEV</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/queries.css">
</head>
<body>
<div class="container-fluid" style="margin: 0">
<div id="lower-text">
<div class="row" style='float:right;'>
<div class="col-xs-2 col-md-2"></div>
<div class="col-xs-10 col-md-10" id="page-content" style="margin: 0px; padding: 0px">
<span id="info">
some text1 some text2 some text3 some text4 some text5 some tex6 some text7 some text8 some text9 some text10 some text11 some text12 some text13
</span>
<div id="main-pic"></div>
</div>
</div>
</div>
</div>
</body>
</html>
I tried many things but nothing helped. I think this might have some connections to the position: abolute of the image, but after a while I can't see anything that could help this and prevent overlaping.
EDIT: Try to resize window of the snipped to see overlapping
Please do not use float for layout purposes. There are other solutions for that ( grid or flexbox )
Use flexbox by adding display:flex on #page-content and make use of the flex-direction property. On > 414px use flex-direction: column and then in the media query reverse the order of the text/image by adding flex-direction: column-reverse .
Check below or jsFiddle
body {
background-color: #ff0000 !important;
padding: 0px;
margin: 0px;
overflow-x: hidden;
}
#page-start {
height: 100vh;
}
#page-content {
padding-top: 68px !important;
}
#lower-text {
color: #fff;
font-size: 68px;
font-weight: 500;
margin: 20px 0px 120px 0;
}
#page-content {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
#main-pic {
background-image: url('https://images.pexels.com/photos/736230/pexels-photo-736230.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');
width: 100%;
height: 920px;
background-size: cover;
background-repeat: no-repeat;
margin-right: auto;
margin-bottom: 50px;
}
#media only screen and (max-width: 414px) {
#info {
position: relative;
font-weight: 500;
line-height: 1.29;
}
#lower-text {
font-size: 21px;
width: 305px;
height: 178px;
margin-top: 0 !important;
line-height: 1.29;
margin-bottom: 10px;
}
#page-start {
height: 60vh;
}
#page-content {
flex-direction: column-reverse;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<title>FEEV</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/queries.css">
</head>
<body>
<div class="container-fluid" style="margin: 0">
<div id="lower-text">
<div class="row">
<div class="col-xs-2 col-md-2"></div>
<div class="col-xs-10 col-md-10" id="page-content" style="margin: 0px; padding: 0px">
<span id="info">
some text1 some text2 some text3 some text4 some text5 some tex6 some text7 some text8 some text9 some text10 some text11 some text12 some text13
</span>
<div id="main-pic"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Related
There is link outside Image, want to make whole div area (image) clickable
<div class="desty_block">
<figure><img src="image"></figure>
<div class="detail">
<h3>India</h3>
</div>
</div>
Tricked some css, but not covering whole area clickable.
.desty_block {position: relative;}
.detail {
position: absolute;
top: 95px;
left: 0;
width: 100%;
height: 100%;
text-align: center;
}
Note: After this post, did some dig and here is css
working example
.desty_block h3 {margin: 0 0 0px 0;}
.desty_block h3 a {
color: #ffffff;
display: block;
position: absolute;
top: 0;
left: 0;
text-align: center;
width: 100%;
height: 100%;
z-index: 100;
padding-top: 7rem;
}
.desty_block{position: relative;}
Still doubt if it will work on all device ?
Any idea
Thanks
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 40%;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.container {
padding: 2px 16px;
}
* {
margin: 0;
}
html {
padding: 20px;
font: 12px/20px Arial, sans-serif;
}
div {
}
h1 {
font: inherit;
font-weight: bold;
}
#div6 {
z-index: 3;
position: absolute;
top: 30%;
left: 15%;
width: 150px;
border: 1px dashed #009;
background-color: #ddf;
text-align: center;
}
</style>
</head>
<body>
<h2>Card</h2>
<div class="card">
<a href="http://google.com">
<img src="https://icon-library.com/images/avatar-icon-images/avatar-icon-images-4.jpg" alt="Avatar" style="width:100%">
<div id="div3">
<div id="div6">
<h1>Division Element #6</h1>
<code>position: absolute;<br/>
z-index: 3;</code>
</div>
</a>
</div>
</div>
</body>
</html>
Wrap the entire div with an anchor tag. Try the following (assuming the desty_block div contains image + text):
<a href="#">
<div class="desty_block">
<figure><img src="image"></figure>
<div class="detail">
<h3>India</h3>
</div>
</div>
</a>
I am trying to place a Divider with some skies at the bottom of my background image (class="divider-clouds"). For some reason, they just won't show - Seems like the clouds are hidden behind the background-image.
I've been playing around with z-index in order to get the clouds on top of the background-image. But didn't seem to help either. What am I missing??
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TurboTobias</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section id="hero-section">
<div class="row">
<div class="column hjemmeside-til-skyerne">
<h1>Vil du have
<div class="h1-enhanced">raketfart</div>
<div class="h1-smaller">på din hjemmeside?</div>
</h1>
<span class="sub-h1">Jeg ta'r din hjemmeside til skyerne!</span>
</div>
<div class="column">
<h2>Column 2</h2>
<p>Some text..</p>
</div>
<div class="divider-clouds"></div>
</div>
</section>
</body>
</html>
CSS:
body {
background: #fff;
color: #333333;
height: 100vh;
margin: 0;
box-sizing: border-box;
font-family: open sans,Arial,sans-serif;
}
#hero-section {
background-image: url(https://turbotobias.dk/wp-content/uploads/2019/07/Light-Above-clouds-HD-TurboTobias.jpg);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
z-index: 1;
position: relative;
}
.row {
height: 100vh;
width: 80%;
max-width: 1080px;
margin: auto;
display: flex;
z-index: 1;
}
.hjemmeside-til-skyerne {
display: flex;
align-self: center;
align-items: center;
flex-direction: column;
}
.hjemmeside-til-skyerne h1 {
font-weight: 700;
font-size: 60px;
color: #303030!important;
line-height: 1em;
text-transform: uppercase;
}
.h1-enhanced {
font-weight: 900;
font-size: 120%;
}
.h1-smaller {
font-size: 70%;
}
.sub-h1 {
font-size: 24px;
color: #303030;
font-weight: 400;
}
.divider-clouds {
background-image: url(https://turbotobias.dk/wp-content/uploads/2019/07/clouds-divider.svg);
background-size: cover;
background-position: center top;
bottom: 0;
height: 100px;
position: absolute;
z-index: 10;
}
Code snippet
I would expect the clouds showing at the bottom with a height of 100px.
You should add a with of 100% on your .divider-clouds element style.
You div isn't showing because it has no width attribute, add that to your styling:
.divider-clouds {
background-image: url(https://turbotobias.dk/wp-content/uploads/2019/07/clouds-divider.svg);
background-size: cover;
background-position: center top;
bottom: 0;
height: 100px;
position: absolute;
z-index: 10;
width: 500px;
}
What Martin Choraine said.
.divider-clouds {
background-image: url(https://turbotobias.dk/wp-content/uploads/2019/07/clouds-divider.svg);
background-size: cover;
background-position: center top;
bottom: 0;
height: 100px;
width: 100%;
position: absolute;
z-index: 10;
}
updated the fiddle https://jsfiddle.net/w6g9eqo2/
If you want to learn more about SVG and scaling, I can recommend this article:
https://css-tricks.com/scale-svg/
I have code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
html, body {
height: 100%;
}
.container {
min-height: 200px;
max-height: 500px;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-sizing: border-box;
max-width: 1440px;
margin: auto;
height: 100%;
}
header, footer {
height: 150px;
background: #ccc;
}
footer {
position: absolute;
width: 100%;
height: 50px;
bottom: 0;
}
</style>
</head>
<body>
<header></header>
<div class="container">
content blah blah blah
</div>
<footer>
fsdfsdfsdfsdfsdffdsadsfasd
</footer>
</body>
</html>
How I Can vertically align center this container, considering header height and footer (position: absolute and height). I think, what this we can do with display: flex, are how?
I use Bootstrap 3 grid
Example jsbin: http://jsbin.com/timatozuco/edit?html,output
Here try.. Just configure updated code based on your adjustment..
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
html, body {
height: 100%;
}
.container {
display: -ms-flexbox;
display: flex;
top: 10%;
left: 50%;
position: absolute;
box-sizing: border-box;
}
header, footer {
height: 150px;
background: #ccc;
}
footer {
position: absolute;
width: 100%;
height: 50px;
bottom: 0;
}
</style>
</head>
<body>
<header></header>
<div class="container">
content blah blah blah
</div>
<footer>
fsdfsdfsdfsdfsdffdsadsfasd
</footer>
</body>
</html>
If I understand your question correctly, then I guess you want to make the whole container in the center of the page on the basis of header and footer size.
So below code is the solution
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
font-family: arial, sans-serif;
font-size: 14px;
color: #000;
line-height: 22px;
text-decoration: none;
}
.wrapper {
width: 100%;
background: #fff;
margin: -128px auto 0;
height: 100%;
text-align: left;
clear: both;
display: table;
position: relative;
z-index: 1;
}
header {
width: 100%;
margin: auto;
background: #ccc;
height: 66px;
position: relative;
z-index: 2;
border-bottom: 20px solid #fff;
}
footer {
background: #ccc;
width: 100%;
margin: auto;
height: 22px;
clear: both;
border-top: 20px solid #fff;
position: relative;
z-index: 2;
}
.container {
vertical-align: middle;
display: table-cell;
padding: 128px 0 0;
}
.container .content {
text-align: center;
background: yellow;
padding: 0 10px;
width: 300px;
height: 200px;
margin: 0 auto;
}
</style>
</head>
<body>
<header>
Header content
</header>
<div class="wrapper">
<div class="container">
<div class="content">
Container content
</div>
</div>
</div>
<footer>
Footer content
</footer>
</body>
</html>
or you can also visit this link : Codepen - centered container based on header & footer
Ok, so i'm working on my website, I am trying to make it responsive but without the use of any frameworks or #media queries in the css. I have used relative lengths such as %, vw, and vh on widths, heights, and fonts in the CSS. I thought this was working ok when i uploaded my website. When i re-size the browser window it does kind of work (minus the padding and margin issues). I thought my idea had worked until i checked my site on a iphone 6s and tablet. iPhone and tablet seem ok when in portrait but when in landscape its really bad! The idea i am going for, is that all content to resize/scaled down and remain within the yellow border that is attached around the body. Is it possible for me to do this without using media queries? How do i make my content properly scale down with the Viewport?
HTML & CSS
html{
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
}
body {
height: 100vh;
width: auto;
margin: 0;
padding: 0;
position: relative;
text-align: center;
font-family: 'PT Sans', sans-serif;
color: #ffff00;
}
body::before {
content: '';
position: absolute;
top: 30px;
left: 30px;
right: 30px;
bottom: 30px;
border: 3px solid yellow;
}
p a {
color: #ffff00;
letter-spacing: 5px;
}
video{
position: fixed;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
}
.screen {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
background: grey;
opacity: 0.4;
}
.container{
display: block;
text-align: center;
padding-top: 50px;
margin: 0px auto;
min-width: 60%;
}
.menu{
height: 50%;
width:50%;
left: 50%;
top: 50%;
display: inline-block;
text-align: center;
}
.logo{
display: inline-block;
max-height: 25vh;
max-width: 25vw;
text-align: center;
padding-top: 40px;
padding-bottom: 40px;
}
.logo h1{
font-size: 3vw;
letter-spacing: 4px;
}
.nav-menu{
margin: 20px auto;
font-size: 2vw;
display: inline-block;
padding: 13px 2px 1px 2px;
border: 3px solid #ffff00;
line-height: 0px;
}
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- SEO META -->
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="WEBSITE">
<meta name="author" content="SitePoint">
<title>| Louis Lombardi |</title>
<!-- Custom CSS -->
<link href="css/styles.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!-- video -->
<video id='video' preload>
<source src="vid/vt1.mp4" type="video/mp4" >
<p>Your browser does not support HTML5 video.</p>
</video>
<!-- MENU SECTION -->
<div class="container">
<div class="menu col-12">
<div class="logo"> <img src="img/louis-media-logo.png" class="img-responsive" alt="media and design logo"> <h1>MEDIA</h1> </div>
<div class="clear-fix"></div>
<div class="nav-menu"> <p> ABOUT </p> </div>
<div class="clear-fix"></div>
<div class="nav-menu"> <p> PORJECTS </p> </div>
<div class="clear-fix"></div>
<div class="nav-menu"> <p> CONTACT </p> </div>
</div>
</div> <!-- Container -->
</body>
</html>
This must be a very stupid question, but I can't get this media query to work. The page just doesn't change when I resize it.
stylesheet.css:
#font-face {
font-family: ubuntu;
src: url('Ubuntu-L.ttf');
}
#font-face {
font-family: ubuntu;
src: url("Ubuntu-B.ttf");
font-weight: bold;
}
html, body {
background-image: url('bg2.png');
background-repeat: repeat;
background-attachment: fixed;
font-family: ubuntu;
font-size: 48px;
margin: 0;
padding: 0;
text-align: center;
}
#menu {
width:900px;
height: 150px;
background: #FFF;
position: fixed;
left: 50%;
margin-left: -450px;
top: 50px;
}
#content {
width: 800px;
margin: 0px auto;
padding-top: 100px;
}
.block {
width: 100%;
height: 800px;
margin-top: 100px;
margin-bottom: 100px;
border-radius: 5px;
background: #FFF;
-moz-box-shadow: 0 0 25px 0px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 0 25px 0px rgba(0,0,0,0.5);
box-shadow: 0 0 25px 0px rgba(0,0,0,0.5);
}
//MEDIA QUERY
#media screen and (max-width: 900px) {
#content {
width: 90%;
}
#menu {
width: 100%;
left: 0%;
top: 0%;
margin-left: 0px;
}
}
index.html:
<html>
<head>
<link rel="shortcut icon" href="http://www.yellos.com/favi.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>yellos</title>
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<div id="menu">
...
</div>
<div id="content">
<div class="block" id="1">
TEST
</div>
</div>
</body>
</html>
What am I doing wrong?
The error is that // comments aren't allowed in CSS.
Change
//MEDIA QUERY
to
/* MEDIA QUERY */