I tried making a responsive split screen on codepen. When the size of the screen is small, it gives columns otherwise you get two rows. Everything works fine on codepen. But when I try to implement this code into the code of my website, the grey area diminishes. What could possibly be the reason?
http://codepen.io/bellarose/pen/YqGZLL
HTML:
<section class="first-section">
<body>
<div class="container-info">
<h1>first screen</h1>
</div>
<div class="container-main">
<h1>second screen</h1>
</div>
</body>
</section>
<section class="second-section">
<body>
<div class="container-info1">
<h1>first screen</h1>
</div>
<div class="container-main1">
<h1>second screen</h1>
</div>
</body>
</section>
CSS:
.first-section {
height: 100%;
text-align: center;
}
.second-section {
height: 100%;
text-align: center;
}
.container-info {
display: inline-block;
position: relative;
width: 100%;
min-height: 490px;
background-color: red; }
#media (min-width: 768px) {
.container-info {
float: left;
left: 0;
top: 0;
height: 100%;
width: 50%; } }
.container-main {
display: inline-block;
position: relative;
width: 100%;
min-height: 490px;
background-color: grey; }
#media (min-width: 768px) {
.container-main {
float: right;
right: 0;
top: 0;
height: 100%;
width: 50%; } }
.container-info1 {
display: inline-block;
position: relative;
width: 100%;
min-height: 490px;
background-color: pink; }
#media (min-width: 768px) {
.container-info1 {
float: left;
left: 0;
top: 0;
height: 100%;
width: 50%; } }
.container-main1 {
display: inline-block;
position: relative;
width: 100%;
min-height: 490px;
background-color: white; }
#media (min-width: 768px) {
.container-main1 {
float: right;
right: 0;
top: 0;
height: 100%;
width: 50%; } }
Incorrect HTML syntax. First, the body tag is created one time and you cannot put it inside other elements. <body> is the main "wrapper".
Correct HTML:
<html>
<head>
... metadata
</head>
<body>
<section class="first-section">
<div class="container-info">
<h1>first screen</h1>
</div>
<div class="container-main">
<h1>second screen</h1>
</div>
</section>
<section class="second-section">
<div class="container-info1">
<h1>first screen</h1>
</div>
<div class="container-main1">
<h1>second screen</h1>
</div>
</section>
</body>
</html>
As for the gray box not appearing, it could be because you are using height: 100% without making sure that HTML/body also have height:100%. If you do not add the height to body, calculation will not work properly.
Gray box did not appear because parent (section) has a fixed height of 100% while the children overflow that height. To solve this you could change height:100% of section to min-height: 100%
P.S your CSS could be simplified to this:
* {margin: 0; padding: 0;}
html, body {height:100%;}
section {
min-height: 100%;
text-align: center;
}
section > div {
display: block;
position: relative;
width: 100%;
min-height: 490px;
}
#media (min-width: 768px) {
section div {
height: 100%;
float: left;
width: 50%;
}
}
/* coloring */
.container-info {background: red;}
.container-main {background-color: grey;}
.container-info1 {background-color: pink;}
.container-main1 {background-color: white;}
<section class="first-section">
<div class="container-info">
<h1>first screen</h1>
</div>
<div class="container-main">
<h1>second screen</h1>
</div>
</section>
<section class="second-section">
<div class="container-info1">
<h1>first screen</h1>
</div>
<div class="container-main1">
<h1>second screen</h1>
</div>
</section>
.first-section {
height: 100%;
text-align: center;
}
.second-section {
height: 100%;
text-align: center;
}
.container-info {
display: inline-block;
position: relative;
min-height: 490px;
background-color: red; }
#media (min-width: 768px) {
.container-info {
float: left;
left: 0;
top: 0;
height: 100%;
width: 50%; } }
.container-main {
display: inline-block;
position: relative;
min-height: 490px;
background-color: grey; }
#media (min-width: 768px) {
.container-main {
float: right;
right: 0;
top: 0;
height: 100%;
width: 50%; } }
#media and(max-width:767px){
.container-info1{
width:100%;
}
.container-main1{
width:100%;
}
}
.container-info1 {
display: inline-block;
position: relative;
min-height: 490px;
background-color: pink; }
#media (min-width: 768px) {
.container-info1 {
float: left;
left: 0;
top: 0;
height: 100%;
width: 50%; } }
.container-main1 {
display: inline-block;
position: relative;
min-height: 490px;
background-color: white; }
#media (min-width: 768px) {
.container-main1 {
float: right;
right: 0;
top: 0;
height: 100%;
width: 50%; } }
i just remove the width from the classes .container-info1 and .container-main1
and defined the width in the another media query which says #media and (max-width:767px)
ok try this now
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.first-section {
height: 100%;
text-align: center;
}
.second-section {
height: 100%;
text-align: center;
}
.container-info {
display: inline-block;
position: relative;
min-height: 490px;
background-color: red; }
.container-main {
display: inline-block;
position: relative;
min-height: 490px;
background-color: grey; }
.container-info1 {
display: inline-block;
position: relative;
min-height: 490px;
background-color: pink; }
.container-main1 {
display: inline-block;
position: relative;
min-height: 490px;
background-color: white; }
#media screen and (min-width: 768px) {
.container-info {
float: left;
left: 0;
top: 0;
height: 100%;
width: 50%; }
.container-main {
float: right;
right: 0;
top: 0;
height: 100%;
width: 50%; } }
#media screen and (min-width: 768px) {
.container-info1 {
float: left;
left: 0;
top: 0;
height: 100%;
width: 50%; }
.container-main1 {
float: right;
right: 0;
top: 0;
height: 100%;
width: 50%; } }
#media screen and (max-width:767px){
.container-info1{
width:100%;
}
.container-main1{
width:100%;
}
.container-info{
width:100%;
}
.container-main{
width:100%;
}
}
</style>
</head>
<body>
<section class="first-section">
<body>
<div class="container-info">
<h1>first screen</h1>
</div>
<div class="container-main">
<h1>second screen</h1>
</div>
</body>
</section>
<section class="second-section">
<body>
<div class="container-info1">
<h1>first screen</h1>
</div>
<div class="container-main1">
<h1>second screen</h1>
</div>
</body>
</section>
</body>
</html>
Related
Basically I'm trying to make a topbar with information on it, I was just about to change my stuff to a list till I noticed "The pink bar" going over the discord icon, how do I go about fixing this problem; the position is set to absolute.
* {
margin: 0;
}
body {
background: #a89ed2
}
.TopBar {
overflow: hidden;
position: relative;
background: #483467;
box-sizing: border-box;
}
#bottom {
position: absolute;
background: #ea5773;
width: 100%;
height: 10%;
left: 0;
top: 90%;
}
#media {
position: absolute;
display: inline-block;
left: 0%;
top: 0%;
}
#media img {
width: 15%;
height: 10%;
}
.wrapper1 {
padding: 2%
}
<body>
<div class=TopBar>
<div class=wrapper1>
<div id=bottom></div>
<div id=media>
<img src="https://cdn1.iconfinder.com/data/icons/logos-and-brands-3/512/91_Discord_logo_logos-512.png">
</div>
</div>
</div>
<div class=content></div>
</body>
Use id or class with double quotes(" classname | id ")
<!doctype HTML>
<html>
<body>
<div class="TopBar">
<div class="wrapper1">
<div id="bottom"></div>
<div id="media">
<img src="https://cdn1.iconfinder.com/data/icons/logos-and-brands-3/512/91_Discord_logo_logos-512.png">
</div>
</div>
</div>
<div class="content"></div>
</body>
</html>
Add a specific height to topbar and remove overflow:hidden
.TopBar {
height: 85px;
}
* {
margin: 0;
}
body {
background: #a89ed2
}
.TopBar {
overflow: hidden;
position: relative;
background: #483467;
box-sizing: border-box;
}
#media {
width: 100px;
height: 100px;
}
#media img {
max-width: 100%;
position: relative;
height: auto;
}
#media::before{
background: #ea5773;
width: 100%;
height: 10px;
position: absolute;
content: '';
bottom: 0;
left: 0;
right: 0;
}
.wrapper1 {
padding-bottom: 10px;
}
<body>
<div class="TopBar">
<div class="wrapper1">
<div id="media">
<img src="https://cdn1.iconfinder.com/data/icons/logos-and-brands-3/512/91_Discord_logo_logos-512.png">
</div>
</div>
</div>
<div class="content"></div>
</body>
In our ecommerce project all photos are squares. So some products have a lot of whitespace on top and bottom. I wan't to 'cut' that space without editing the photos (thousands). I almost achieved my goal. But parent DIV stretches to basic 100% of the IMG.
.container {
box-sizing: border-box;
width: 100%;
padding: 0 40px;
}
.main-header {
height: 80px;
width: 100%;
background-color: grey;
}
.product {
display: flex;
flex-flow: row nowrap;
margin-top: 20px;
}
.media {
flex: 1;
background-color: grey;
margin-right: 20px;
}
.landscape {
object-fit: cover;
width: 100%;
height: 60%;
}
.purchase {
width: 160px;
background-color: grey;
}
<div class="container">
<header class="main-header">
</header>
<content class="product">
<div class="media">
<img class="landscape" src="https://cdn.shopify.com/s/files/1/0286/1214/products/Trance-3-Color-B-Neon-Green.jpg">
</div>
<div class="purchase">
</div>
</content>
</div>
You could remove height: 60% from your image (which doesn't affect your image, but the .media's div height, since that div has no height set to it.). Now the container div resizes depending on the image's size (or the content of the other '.purchase' div in the flex-container, if that has more height).
Hope it helps, since I am really just guessing what you are trying to do here.
.container {
box-sizing: border-box;
width: 100%;
padding: 0 40px;
}
.main-header {
height: 80px;
width: 100%;
background-color: grey;
}
.product {
display: flex;
flex-flow: row nowrap;
margin-top: 20px;
}
.media {
flex: 1;
background-color: grey;
margin-right: 20px;
}
.landscape {
object-fit: cover;
width: 100%;
}
.purchase {
width: 160px;
background-color: grey;
}
<div class="container">
<header class="main-header">
</header>
<content class="product">
<div class="media">
<img class="landscape" src="https://cdn.shopify.com/s/files/1/0286/1214/products/Trance-3-Color-B-Neon-Green.jpg">
</div>
<div class="purchase">
</div>
</content>
</div>
Try removing the height:60%; from .landscape and instead set a fixed height for both .media and .landscape in pixels.
.container {
box-sizing: border-box;
width: 100%;
padding: 0 40px;
}
.main-header {
height: 80px;
width: 100%;
background-color: grey;
}
.product {
display: flex;
flex-flow: row nowrap;
margin-top: 20px;
}
.media {
flex: 1;
background-color: grey;
margin-right: 20px;
height: 600px;
width: 100%;
}
.landscape {
object-fit: cover;
width: 100%;
height: 600px;
}
.purchase {
width: 160px;
background-color: grey;
}
<div class="container">
<header class="main-header">
</header>
<content class="product">
<div class="media">
<img class="landscape" src="https://cdn.shopify.com/s/files/1/0286/1214/products/Trance-3-Color-B-Neon-Green.jpg">
</div>
<div class="purchase">
</div>
</content>
</div>
Ok,I've found a solution by using the Javascript. Hope I will find some day pure CSS/HTML solution.
window.onload = resizer;
window.onresize = resizer;
function resizer() {
var div = document.getElementById('media');
div.style.height = (div.offsetWidth / 1.5) + 'px';
};
div {
box-sizing: border-box;
}
.container {
width: 100%;
padding: 0 40px;
}
.main-header {
height: 80px;
width: 100%;
background-color: grey;
}
.product {
display: flex;
flex-flow: row nowrap;
margin-top: 20px;
}
#media {
flex: 1;
overflow: hidden;
margin-right: 20px;
background-color: grey;
}
#media > img {
object-fit: cover;
width: 100%;
height: 100%;
}
.purchase {
width: 360px;
background-color: grey;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Hello world!</title>
</head>
<body>
<div class="container">
<header class="main-header">
</header>
<content class="product">
<div id="media">
<img src="https://cdn.shopify.com/s/files/1/0286/1214/products/Trance-3-Color-B-Neon-Green.jpg">
</div>
<div class="purchase">
</div>
</content>
</div>
</body>
</html>
So my problem is that the parent has some width and if the screen cant fit everything the children (floated left) go one under the other (looks awesome as well) so I want them when they go one under the other to be centered in the parent.
Here is my code. I tried inline-block and it didn't help and so on
.mainpage-articles {
float:left;
width: 60%;
}
.mainpage-article {
width: calc(800px + 8%);
margin-left: auto;
margin-right: auto;
}
.mainpage-article .thumbnail {
position: relative;
height: 200px;
width: 400px;
margin-left: auto;
margin-right: auto;
padding: 2%;
float: left;
}
.mainpage-article .thumbnail img {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.mainpage-article .article {
height: 200px;
width: 400px;
margin-left: auto;
margin-right: auto;
padding: 2%;
float: left;
}
.mainpage-article .article h1 {
height: 60px;
}
.mainpage-article .article p {
height: 120px;
}
You're probably wanting to learn media queries, to respond to the user's screen. Am I right? If it's that, take a look here: https://codepen.io/giovannipds/pen/BwqyLW
This is what you want to learn:
#media (max-width: 1500px) {
.mainpage-articles {
text-align: center;
}
}
This code align text things to the center when the user window's is at max 1500px, above that it doesn't. There are many ways to apply media queries. I recommend you to watch this to learn it a little better.
Full code of the example above:
<style>
.mainpage-articles {
background-color: #eee;
float: left;
width: 60%;
}
.mainpage-article {
background-color: cyan;
width: calc(800px + 8%);
margin-left: auto;
margin-right: auto;
}
.mainpage-article .thumbnail {
background-color: yellow;
position: relative;
height: 200px;
width: 400px;
margin-left: auto;
margin-right: auto;
padding: 2%;
float: left;
}
.mainpage-article .thumbnail img {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.mainpage-article .article {
background-color: #ccc;
height: 200px;
width: 400px;
margin-left: auto;
margin-right: auto;
padding: 2%;
float: left;
}
.mainpage-article .article h1 {
height: 60px;
}
.mainpage-article .article p {
height: 120px;
}
#media (max-width: 1500px) {
.mainpage-articles {
text-align: center;
}
}
</style>
<div class="mainpage-articles">
<div class="mainpage-article">
<div class="thumbnail">
<img src="//lorempixel.com/400/200" alt="">
</div>
<div class="article">
<h1>Lorem ipsum</h1>
<p>Dolor sit amet.</p>
</div>
</div>
</div>
There's an example here with Bootstrap 4 too:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<style>
.parent {
background-color: yellow;
}
.smth-else {
background-color: cyan;
}
.children {
margin: 75px !important;
}
.children [class^=col-] {
border: 1px solid red;
}
</style>
<div class="container-fluid">
<div class="row">
<div class="parent col">
<div class="children row">
<div class="col-lg-6">
Children col 1
</div>
<div class="col-lg-6">
Children col 2
</div>
</div>
</div>
<div class="smth-else col">
Smth else
</div>
</div>
</div>
Your code is not so pretty, you should adapt them to use media queries better.
I want to create a page like this:
and here is my HTML:
<div class="container">
<div class="article">
<div class="main-content">
Main content goes here...
</div>
<div class="content-meta">
<div class="content-title">
the title of content goes here...
</div>
<div class="content-info">
some information about content....
</div>
</div>
</div>
</div>
and CSS:
.container {
overflow:hidden;
position:relative;
width: 100%;
height: 350px;
}
.container .article {
width:100%;
position:absolute;
left:0;
top:0;
background-color: red;
}
.container .article .main-content {
width:50%;
float: right;
}
.container .article .content-meta {
width:50%;
float: right;
position: relative;
height: 350px;
}
.container .content-title , .container .content-info {
width: 100%;
position: absolute;
left: 0;
height: 50%;
}
.container .content-title {
background-color: green;
top: 0;
}
.container .content-info {
background-color: blue;
top: 50%;
}
it's working but when I use % instead of px for height of green and blue area, it just doesn't work. Why?
I mean, I set for both green and blue area height:50% but it didn't work. How can I solve this problem?
Note: I have 6 div.article elements and I want all of them to be stacked on top of each other and that's why I'm using position property.
In order to have percentage height to work you need to set both the parent elements .container .article .content-meta and .container .article to height:100%.
.container {
overflow: hidden;
position: relative;
width: 100%;
height: 350px;
}
.container .article {
width: 100%;
position: absolute;
left: 0;
top: 0;
background-color: red;
height: 100%;
}
.container .article .main-content {
width: 50%;
float: right;
}
.container .article .content-meta {
width: 50%;
float: right;
position: relative;
height: 100%;
}
.container .content-title,
.container .content-info {
width: 100%;
position: absolute;
left: 0;
height: 50%;
}
.container .content-title {
background-color: green;
top: 0;
}
.container .content-info {
background-color: blue;
top: 50%;
}
<div class="container">
<div class="article">
<div class="main-content">
Main content goes here...
</div>
<div class="content-meta">
<div class="content-title">
the title of content goes here...
</div>
<div class="content-info">
some information about content....
</div>
</div>
</div>
</div>
In fact, when you use absolute position, float won't be necessary.
.article {
position: relative;
height: 350px;
}
.main-content {
position: absolute;
left: 50%;
top: 0;
width: 50%;
height: 100%;
background: red;
}
.content-meta {
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 100%;
}
.content-title,
.content-info {
position: absolute;
left: 0;
width: 100%;
height: 50%;
}
.content-title {
background: green;
top: 0;
}
.content-info {
background: blue;
top: 50%;
}
<div class="article">
<div class="main-content">
Main content goes here...
</div>
<div class="content-meta">
<div class="content-title">
the title of content goes here...
</div>
<div class="content-info">
some information about content....
</div>
</div>
</div>
Or, just use float without absolute position.
.article {
height: 350px;
}
.main-content {
float: right;
width: 50%;
height: 100%;
background: red;
}
.content-meta {
float: left;
width: 50%;
height: 100%;
}
.content-title,
.content-info {
float: left;
width: 100%;
height: 50%;
}
.content-title {
background: green;
}
.content-info {
background: blue;
}
<div class="article">
<div class="main-content">
Main content goes here...
</div>
<div class="content-meta">
<div class="content-title">
the title of content goes here...
</div>
<div class="content-info">
some information about content....
</div>
</div>
</div>
Alternatively, you can use flexbox if you don't need to support old browsers.
.article {
height: 350px;
display: flex;
flex-direction: row-reverse;
}
.main-content {
background: red;
flex: 1;
}
.content-meta {
flex: 1;
display: flex;
flex-direction: column;
}
.content-title,
.content-info {
flex: 1;
}
.content-title {
background: green;
}
.content-info {
background: blue;
}
<div class="article">
<div class="main-content">
Main content goes here...
</div>
<div class="content-meta">
<div class="content-title">
the title of content goes here...
</div>
<div class="content-info">
some information about content....
</div>
</div>
</div>
I need to hide the .content-section when going out the limit of #page.
I need to use overflow:hidden; but I cannot get the desired result applying on #page.
Any idea how to fix it?
http://jsfiddle.net/Pet8X/1/
<div id="btn-up" onclick="moveUp();">UP</div>
<div id="btn-down" onclick="moveDown();">DOWN</div>
<div id="page">
<div id="bar-header">Header</div>
<div id="content">
<div class="content-section item1 ">
<a name="anchor-1"></a>
<h2>Content 1</h2>
</div>
<div class="content-section item2">
<a name="anchor-2"></a>
<h2>Content 2</h2>
</div>
<div class="content-section item3">
<a name="anchor-3"></a>
<h2>Content 3</h2>
</div>
<div class="content-section item4">
<a name="anchor-4"></a>
<h2>Content 4</h2>
</div>
</div>
<div id="bar-footer">Footer</div>
</div>
/*resetter */
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
background: transparent;
width: 500px;
height: 200px;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#bar-header, #bar-footer {
position: fixed;
left: 0px;
width: 500px;
height: 30px;
z-index: 100;
background-color: rgba(50,50,50,0.5);
text-align: center;
}
#bar-header {
top: 0px;
}
#bar-footer {
top: 690px;
}
#btn-up, #btn-down {
position: fixed;
left: 1230px;
width: 50px;
height: 50px;
background-color: yellow;
outline: 1px solid black;
z-index: 200;
}
#btn-up {
top: 0px;
}
#btn-down {
top: 50px;
}
#content {
position: fixed;
}
#content-inner {
overflow: hidden;
}
.content-section {
background-color: lightgray;
outline: 1px solid black;
width: 50px;
}
/* content sizes */
.item1 { /* top is 0 */
height: 200px;
}
.item2 { /* top is 200 */
height: 400px;
}
.item3 { /* top is 600 */
height: 600px;
}
.item4 {
height: 800px;
}
.content-section h2 {
position: relative;
top: 30px; /**avoid to go under the header bar*/
}
.active {
background-color: violet !important;
}
You are referencing the ID of the sidebar container incorrectly.
Your rule states
#content {
position: fixed;
}
#content-inner {
overflow: hidden;
}
But there is no element #content-inner.
Use this instead:
#content{
position: fixed;
overflow: hidden;
}
This results in:
Fiddle
Just apply overflow-hidden to #content
#content{
position: fixed;
overflow: hidden;
}