Whenever I rescale/resize my window to smaller size (smartphone sized) all of the three inner div's (.left .center .right) red,green,blue respectively, below each other doesn't align to the center. Please see the attached screenshot to understand. I want all of these three div's to be in the center of the main .container div (pink) whenever the window is scaled down. Would appreciate your inputs.
html,body {
width: 100%;
left: 0px;
top: 0px;
margin: 0px;
height: 100%;
}
.container {
width: auto;
left: 0px;
top: 0px;
float: none;
width: auto;
max-width: auto;
position: relative;
background-color: rgba(216, 86, 112, 0.5);
height: 100%;
margin-top: auto;
margin-right: 5%;
margin-left: 5%;
display: block;
right: 0px;
}
.top {
width: 100%;
left: 0px;
top: 0px;
background-color: rgba(204, 51, 0, 1);
height: 10%;
position: relative;
margin: 0px;
text-align: center;
}
.left {
float: left;
height: auto;
width: 331px;
background-color: rgba(255, 0, 0, 1);
margin-left: auto;
margin-right: auto;
position: relative;
left: auto;
top: 0px;
}
.center {
float: left;
height: auto;
width: 331px;
background-color: rgba(0, 255, 0, 1);
margin-left: 0px;
margin-right: auto;
position: relative;
left: 0px;
}
.right {
float: left;
height: auto;
width: 331px;
background-color: rgba(0, 0, 255, 1);
margin-left: 0px;
margin-right: auto;
position: relative;
left: 0px;
top: 0px;
}
<div class="container">
<div class="top"></div>
<div class="left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
</div>
<div class="center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
</div>
<div class="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
</div>
</div>
My method is to have separate code for css that overwrites the code when the conditions are met. For this you would decide what you want to max width to be before it changes and add the code:
#media only screen and (max-width: 1187px)
{
new css here
}
For your particular project you would just have to change the floats and margins (and the width that you want (the 1187 here)) so:
#media only screen and (max-width: 1187px)
{
.left {
margin-right:auto;
margin-left:auto;
float:none;
}
.center {
margin-right:auto;
margin-left:auto;
float:none;
}
.right {
margin-right:auto;
margin-left:auto;
float:none;
}
}
UPD. Three blocks int the center of the parent
I have seen the cooment about three blocks< which are centered like - - -. This is my solution.
html, body {
margin: 0px;
height: 100%;
}
.container {
background-color: rgba(216, 86, 112, 0.5);
height: 100%;
margin: 0 5%;
text-align: center;
}
.top {
width: 100%;
background-color: rgba(204, 51, 0, 1);
height: 10%;
}
.left,
.center,
.right {
display: inline-block;
width: 331px;
}
.left { background-color: rgba(255, 0, 0, 1); }
.center { background-color: rgba(0, 255, 0, 1); }
.right { background-color: rgba(0, 0, 255, 1); }
<div class="container">
<div class="top"></div>
<div class="left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
</div>
<div class="center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
</div>
<div class="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
</div>
</div>
Media query
I prefer the mobile first design. The first step is to adjust the webpage for a smartphone. Then determine the changes that occur when the screen becomes wider. Then describe the changes for an even wider screen. And so on.
Let's calculate the width of the screen, in which the three blocks will fit in the same row. Three 331px wide blocks occupied by 993px. This is 90% of the screen width. 10% falls on the margins of the container. Therefore
993px x 100% / 90% = 1104px
So I've added a media query for this breakpoint.
Also I've commented out the parts that are not needed to solve described problem. Please check the result.
html, body {
margin: 0px;
height: 100%;
/*
width: 100%;
left: 0px;
top: 0px;
*/
}
.container {
background-color: rgba(216, 86, 112, 0.5);
height: 100%;
margin-right: 5%;
margin-left: 5%;
/*
margin-top: auto;
display: block;
right: 0px;
width: auto;
left: 0px;
top: 0px;
float: none;
width: auto;
max-width: auto;
position: relative;
*/
}
.top {
width: 100%;
background-color: rgba(204, 51, 0, 1);
height: 10%;
text-align: center;
/*
left: 0px;
top: 0px;
position: relative;
margin: 0px;
*/
}
.left,
.center,
.right {
width: 331px;
margin-left: auto;
margin-right: auto;
}
#media (min-width: 1104px) {
.left,
.center,
.right {
float: left;
height: auto;
width: 331px;
/*
position: relative;
left: auto;
top: 0px;
*/
}
}
.left { background-color: rgba(255, 0, 0, 1); }
.center { background-color: rgba(0, 255, 0, 1); }
.right { background-color: rgba(0, 0, 255, 1); }
<div class="container">
<div class="top"></div>
<div class="left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
</div>
<div class="center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
</div>
<div class="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
</div>
</div>
Is this what you want ? https://jsfiddle.net/xofoh5yp/
Just removed floats and left position styles.
<div class="container">
<div class="top"></div>
<div class="left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
</div>
<div class="center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
</div>
<div class="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
</div>
</div>
html,body {
width: 100%;
left: 0px;
top: 0px;
margin: 0px;
height: 100%;
}
.container {
width: auto;
left: 0px;
top: 0px;
float: none;
width: auto;
max-width: auto;
position: relative;
background-color: rgba(216, 86, 112, 0.5);
height: 100%;
margin-top: auto;
margin-right: 5%;
margin-left: 5%;
display: block;
right: 0px;
}
.top {
width: 100%;
left: 0px;
top: 0px;
background-color: rgba(204, 51, 0, 1);
height: 10%;
position: relative;
margin: 0px;
text-align: center;
}
.left {
height: auto;
width: 331px;
background-color: rgba(255, 0, 0, 1);
margin-left: auto;
margin-right: auto;
position: relative;
}
.center {
width: 331px;
background-color: rgba(0, 255, 0, 1);
margin-left: auto;
margin-right: auto;
position: relative;
}
.right {
height: auto;
width: 331px;
background-color: rgba(0, 0, 255, 1);
margin-left: auto;
margin-right: auto;
position: relative;
}
Here is the code if you want them to be in one line :
Fiddle: https://jsfiddle.net/xofoh5yp/1/
Basically, added container DIV and then added % widths.
<div class="container">
<div class="top"></div>
<div>
<div class="left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
</div>
<div class="center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
</div>
<div class="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
</div>
</div>
</div>
html,body {
width: 100%;
left: 0px;
top: 0px;
margin: 0px;
height: 100%;
}
.container {
width: auto;
left: 0px;
top: 0px;
float: none;
width: auto;
max-width: auto;
position: relative;
background-color: rgba(216, 86, 112, 0.5);
height: 100%;
margin-top: auto;
margin-right: 5%;
margin-left: 5%;
display: block;
right: 0px;
}
.top {
width: 100%;
left: 0px;
top: 0px;
background-color: rgba(204, 51, 0, 1);
height: 10%;
position: relative;
margin: 0px;
text-align: center;
}
.left {
height: auto;
width: 33%;
background-color: rgba(255, 0, 0, 1);
margin-left: auto;
margin-right: auto;
position: relative;
float:left;
}
.center {
width: 33%;
background-color: rgba(0, 255, 0, 1);
margin-left: auto;
margin-right: auto;
position: relative;
float:left;
}
.right {
height: auto;
width: 34%;
background-color: rgba(0, 0, 255, 1);
margin-left: auto;
margin-right: auto;
position: relative;
float:left;
}
Another fiddle with margin : https://jsfiddle.net/xofoh5yp/2/
Related
I can't work out how to make a parent div auto scrollable based on it's childs content.
I've got a menu that expands on click event and need it to scroll if the childs height exceeds the parent's.
This is my html for the menu wrapper.
<div class="menu-box">
<div class="page-links">
<div class="pl-inner">
<div class="pl-box">
<div class="pl-content">
<p>menu content goes here......Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
</div>
This is my CSS
.menu-box {
width: 100%;
min-height: 100%;
background-color: #000;
position: fixed;
z-index: 10;
transition: all 1.5s ease-in;
}
.page-links {
width: 100%;
height: 100%;
position: relative;
top: 0px;
left: 0px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.pl-inner {
position: relative;
width: 100%;
}
.pl-box {
position: relative;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
padding: 120px 50px 180px 50px;
overflow: hidden;
}
.pl-content {
width: 100%;
display: inline-block;
opacity: 1;
color: white;
}
I have a working example https://codepen.io/eddywoods/pen/bGvopmL
I thought if I added overflow-y: auto to the parent element it would auto scroll the content but even when I shrink the screen vertically is doesn't want to auto scroll. Where am I going wrong?
Here at line 12 in css.
body {
overflow-y: hidden !important; // This needs to be auto so that your body can scroll
overflow-x: hidden;
}
you have set the overflow-y of body to hidden. So, your body isn't scrollable. and that's causing the issue.
Do you mean like this?? Take a look at it in full screen and let me know.
$('.burger-wrapper').on('mousedown' , function(){
$('.content-wrapper').toggleClass('show');
});
html, body {
margin: 0;
padding: 0;
background-color: rgba(244, 244, 244, 0.9);
width: 100%;
height: 100%;
}
body {
overflow-y: scroll ;
overflow-x: hidden;
position: relative
}
div {
display: block;
}
.menu-box {
width: 100%;
min-height: 100%;
background-color: #000;
position: fixed;
z-index: 10;
transition: all 1.5s ease-in;
}
.page-links {
width: 100%;
height: 100%;
position: relative;
top: 0px;
left: 0px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.pl-inner {
position: relative;
width: 100%;
}
.pl-box {
position: relative;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
padding: 120px 50px 180px 50px;
overflow: hidden;
}
.pl-content {
width: 100%;
display: inline-block;
opacity: 1;
color: white;
}
.plink {
font-size: 100px;
font-weight: 800;
color: #f4f4f4;
text-transform: uppercase;
margin: 0 0 10px 0;
padding-bottom: 5px;
letter-spacing: -3px;
text-align: left;
text-align: -webkit-left;
display: block;
}
.pspacer {
width: 100%;
height: 10px;
}
/* ---------------------------------------------------------*/
.burger-wrapper {
position: fixed;
top: 41px;
right: 41px;
width: auto;
height: auto;
padding: 5px;
/*background-color: #333;*/
background-color: rgba(228, 228, 228, 0.9);
z-index: 99;
}
.content-wrapper {
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
transition: all 1s cubic-bezier(.36, .17, .06, 1.02);
z-index: 40;
background-color: rgba(244, 244, 244, 1.0);
}
.show {
top: 90%;
}
.logo-wrapper {
position: fixed;
top: 41px;
left: 41px;
font-size: 17px;
font-weight: 900;
letter-spacing: 0px;
text-transform: uppercase;
color: rgba(204, 204, 204, 0.9) !important;
z-index: 99;
width: 150px;
height: 12px;
/*background-color: #333;*/
background-color: rgba(228, 228, 228, 0.9);
}
.container {
position: absolute;
top: 0px;
left: 0px;
bottom: 20px;
width: 100%;
height: 100%;
}
.block {
width: 100%;
height: 80px;
background-color: rgba(244, 244, 244, 0.9);
position: absolute;
z-index: 89;
}
.grid-wrapper {
position: absolute;
width: 100%;
height: 100%;
}
.thumb-grid {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
overflow-x: scroll;
padding: 130px 5% 150px 5%;
}
.box {
width: 100%;
height: 200px;
background-color: #333; ;
}
.box:nth-child(even) {
background-color: #999;
}
#media (max-width: 650px){
.plink {
font-size: 56px;
text-align: -webkit-center;
text-align: center;
display: block;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="menu-box">
<div class="page-links">
<div class="pl-inner">
<div class="pl-box">
<div class="pl-content">
<p>MENU CONTENT goes here......Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean aliquam eget urna et consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales molestie odio a maximus. Pellentesque sit amet augue a leo sollicitudin hendrerit sit amet vel ligula. Nullam placerat dapibus rhoncus. Etiam a nulla sit amet tellus ullamcorper sagittis et pellentesque sapien. Curabitur eu purus eu massa blandit mollis. Vestibulum venenatis faucibus tempus. Curabitur finibus metus ut ipsum semper malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
</div> <!-- .menu-box end div -->
<div class="logo-wrapper"></div>
<div class="burger-wrapper">click</div>
<div class="content-wrapper">
<div class="container">
<div class="block"></div>
<div class="grid-wrapper">
<div class="thumb-grid">
<p>MAIN PAGE content goes here......Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean aliquam eget urna et consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales molestie odio a maximus. Pellentesque sit amet augue a leo sollicitudin hendrerit sit amet vel ligula. Nullam placerat dapibus rhoncus. Etiam a nulla sit amet tellus ullamcorper sagittis et pellentesque sapien. Curabitur eu purus eu massa blandit mollis. Vestibulum venenatis faucibus tempus. Curabitur finibus metus ut ipsum semper malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc orci sapien, eleifend a risus quis, accumsan aliquet quam. Cras dolor ex, fringilla quis egestas eget, finibus ut velit. Donec lacinia rutrum enim. Nunc at viverra metus, ac pharetra urna. Sed dui turpis, tincidunt quis sem mattis, consectetur sagittis augue. Aenean porttitor, eros vehicula dapibus egestas, dolor nibh venenatis libero, eu viverra arcu ipsum quis dolor. Ut enim odio, vestibulum eu elit vitae, blandit commodo risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Maecenas imperdiet ligula quis ornare ullamcorper. Fusce eu facilisis lectus. Duis ultricies rhoncus eros, eget facilisis dui pulvinar nec. Morbi posuere enim dolor, id finibus eros sagittis id. Cras accumsan lacus.</p>
</div>
</div>
</div> <!-- .container end div -->
</div> <!-- .content-wrapper end div -->
Ok so after a little trial and error I found the answer is to set the position of .page-linksto absolute
Literally no idea if this is a good way to laying stuff out but seems to work. I've updated the Code Pen here
I have the following issue where I don't really know on how to word-wrap the overlay text to my desires. I want the text to cut-off at the bottom of the overlay (or a few pixels above the bottom) and I want it to end it with a triple dot, so something like this: eu dolor sed, euismod ...
$('.container').mouseenter (function () {
//alert($(this).find('.soverlay').innerHeight()); //returns 56.8 px
var hgt = 'calc(100% - ' + parseInt($(this).find('.soverlay').innerHeight()+5) + 'px)';
$(this).find('.overlay').css({'height' : hgt});
});
$('.container').mouseleave (function () {
//alert($('.container .soverlay').innerHeight()); //returns 56.8 px
$(this).find('.overlay').css({'height' : '0px'});
});
.container {
position: relative;
width: 50%;
max-width: 250px;
}
.image {
border-radius: 10px;
display: inline-block;
width: 100%;
height: auto;
box-sizing: border-box;
}
.soverlay {
border-radius: 10px 10px 0px 0px;
box-sizing: border-box;
position: absolute;
top: 0;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5); /* Black see-through */
color: #f1f1f1;
width: 100%;
transition: .5s ease;
color: white;
font-size: 16px;
padding: 10px;
text-align: center;
overflow: hidden; /* remove on hover-in; add on hover-out*/
white-space: nowrap; /*remove on hover-in; add on hover-out */
text-overflow: ellipsis;
}
.overlay {
border-radius: 0px 0px 10px 10px;
position: absolute;
bottom: 4px;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5); /* Black see-through */
font-size: 12px;
color: white;
}
.container:hover .overlay {
/* height: calc(100% - 57px); /* change height depending on 'soverlay' height */
border-top: 3px solid yellow;
}
.container:hover .soverlay{
overflow: unset;
white-space: unset;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<h2>Image Overlay Title</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
<div class="soverlay">Some people just have very long names</div>
<div class="overlay">This is a very long job description which doesn't really fit in this div. Now the question is how do I cut of the text at the bottom of the overlay. </br></br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce hendrerit convallis ligula, eget sollicitudin dolor lobortis ut. Duis venenatis, est vel volutpat dictum, magna mi pellentesque dolor, eu suscipit ligula augue eleifend justo. Nunc eleifend diam velit, id maximus eros tristique et. Donec sagittis mattis velit. Morbi gravida tincidunt metus in suscipit. Curabitur pharetra orci nec nunc sodales cursus. Morbi hendrerit id orci non vulputate. Duis nulla turpis, bibendum eu dolor sed, euismod mollis velit. Nullam tellus enim, condimentum porta rutrum ac, feugiat in ex. Sed tristique metus nunc, ut elementum elit hendrerit et. Quisque sed interdum ipsum. Etiam posuere.
</div>
</div>
</body>
</html>
I've managed to make a work-around using PHP by just cutting the length of each string at a certain length and appending the triple dots, but I actually want to try and do it with CSS only (to further improve my front-end skills).
You should add fix width to the .soverlay Div
.soverlay{width:250px;}
and then use the following CSS property
word-wrap: break-word;
This question already has answers here:
Why is the paragraph not floating beside the profilePic?
(3 answers)
Closed 6 years ago.
Why does making span float:left or display:inline-block or both move the span class below the profilePic?
.content {
margin-top: 30px;
margin-left: 20px;
padding-bottom: 20px;
float: left;
}
.mainContent {
width: 1000px;
float: left;
}
.infoBit {
display: inline-block;
font-size: 1.1em;
padding-right: 10px;
padding-top: 10px;
}
.profilePic {
border: 1px blue solid;
height: 59px;
display: inline-block;
width: 44px;
margin: 0px;
float: left;
margin-right: 3px;
}
span {
margin-top: 0px;
float: left;
}
<div class="content">
<div class="mainContent">
<div class="infoBit">
<div class="profilePic"></div>
<span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis enim ut sapien sodales commodo. Fusce congue, elit a finibus fermentum, diam eros mollis massa, at eleifend sapien dui eget mauris. Donec nec diam enim. Vivamus commodo placerat risus vitae auctor. Cras leo elit, egestas eget dolor vitae, facilisis consequat sem. Mauris facilisis ipsum in porttitor ullamcorper. Nam vel massa sed quam venenatis facilisis. Quisque vitae mollis urna. In egestas nunc sed felis consequat, in malesuada dolor feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</span>
<div class="social">
<div class="Like"></div>
<div class="Dislike"></div>
<div class="share"></div>
</div>
</div>
</div>
</div>
you need to float only one thing
try this
CSS
.content
{
margin-top : 30px;
margin-left: 20px;
padding-bottom: 20px;
}
.mainContent
{
width: 1000px;
float: left;
}
.infoBit
{
display: inline-block;
font-size: 1.1em;
padding-right: 10px;
padding-top: 10px;
}
.profilePic
{
border:1px blue solid;
height: 59px;
display: inline-block;
width: 44px;
margin: 0px;
float: left;
margin-right: 3px;
}
span
{
margin-top: 0px;
}
This is what i want to achieve ^ (this is the view on an iphone5 320x568)
But when i resize the window (to iphone 6 375x667 ) i get this
HTML:
<div id="container">
<div class="slicedimage">
<div class="textboxtransparant">
<h2>Since 1928</h2>
<div class="divider"></div>
<br/>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna.
</p>
<i class="fa fa-angle-down fa-3x" aria-hidden="true"></i>
</div>
<div class="transparantblack"></div>
</div>
<div class="slicedimage">
<div class="textboxblack">
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non
</p>
</div>
<div class="blacktransparant"></div>
<div class ="line"></div>
</div>
CSS:
body {
margin: 0;
padding: 0;
font-size: 16px;
/*font-family: Georgia;*/
font-family: sans-serif;
max-width: 640px;
color: black;
}
#container {
display: block;
height:900px;
width: 100%;
position: relative;
top: 50px;
margin: 0;
color: white;
text-align: center;
}
.slicedimage {
background-image:url('http://i.stack.imgur.com/yEQ6k.jpg');
width:100%;
}
.textboxblack {
background-color:black;
}
.line {
position: absolute;
width:1px;
height: 50px;
bottom: 80px; /*half the height*/
left: 50%;
border-left: 1px solid white;
}
.transparantblack {
height: 100px;
width: 100%;
background: linear-gradient(to bottom right, rgba(255, 255, 255, 0) 49.9%, rgba(0, 0, 0, 1) 50.1%);
}
.blacktransparant {
height: 100px;
width: 100%;
background: linear-gradient(to top left, rgba(255, 255, 255, 0) 49.9%, rgba(0, 0, 0, 1) 50.1%);
}
.blackgray {
height:300px;
width:100%;
background:linear-gradient(341deg, #8a8a8a 0%, #8a8a8a 31.9%, #000 32.1%, #000 100%);
}
updated the post and since stack overflow is asking me to add more information since my post is mostly code. Yeah u get the point, lets see if this is enough. "information"
Your goal was to keep the white line under the text, in the middle of the blacktransparent element.
To achieve this you need to make from the line element, a child of the blacktransparant div:
<div class="blacktransparant">
<div class="line"></div>
</div>
and set the blacktransparant to be relative:
.blacktransparant {
height: 100px;
width: 100%;
background: linear-gradient(to top left, rgba(255, 255, 255, 0) 49.9%, rgba(0, 0, 0, 1) 50.1%);
/* Add this */
position: relative;
}
After this you only have to set the arrow in the right place relatively to the blacktransparant div:
.line {
position: absolute;
width: 1px;
height: 50px;
/* bottom: 80px; Change to 25px */
bottom: 25px;
left: 50%;
border-left: 1px solid white;
}
I cant solve. I have my content in a float left css with:
float: left;
height: auto;
margin: 0px 22px;
clear: none;
min-width: 66.768799%;
max-width:100%;
width:0;
overflow: auto;
and my right module css
float: right;
height: auto;
margin: 0px 15px 0px 0px;
clear: none;
width: 28.461538%;
overflow: auto;
they are inside of a wrapper
float: none;
height: auto;
margin-left: auto;
margin-top: 0px;
clear: none;
width: 100%;
max-width: 1300px;
margin-right: auto;
background-color:
the case is when I hide a module right the content cant expant 100%, still in 66%
#content {
float: left;
height: auto;
margin: 0px 22px;
clear: none;
min-width: 66.768799%;
max-width:100%;
width:0;
overflow: auto;
}
#right_module {
float: right;
height: auto;
margin: 0px 15px 0px 0px;
clear: none;
width: 28.461538%;
overflow: auto;
}
#wrapper {
float: none;
height: auto;
margin-left: auto;
margin-top: 0px;
clear: none;
width: 100%;
max-width: 1300px;
margin-right: auto;
background-color: rgb(226, 208, 168);
padding: 10px;
overflow: auto;
}
<div id="wrapper">
<div id="content">Curabitur venenatis vehicula mattis. Nunc eleifend consectetur odio sit amet viverra. Ut euismod ligula eu tellus interdum mattis ac eu nulla. Phasellus cursus, lacus quis convallis aliquet, dolor urna ullamcorper mi, eget dapibus velit est vitae nisi. Aliquam erat nulla, sodales at imperdiet vitae, convallis vel dui.</div>
<div id="right_module">Nunc eleifend consectetur odio sit amet viverra. Phasellus cursus, lacus quis convallis aliquet, dolor urna ullamcorper mi, eget dapibus velit est vitae nisi. Aliquam erat nulla, sodales at imperdiet vitae, convallis vel dui. Ut euismod ligula eu tellus interdum mattis ac eu nulla. </div>
</div>
rgb(226, 208, 168);
padding: 10px;
the case is when I hide a module right the content cant expant 100%, still in 66%. Please help my head in apoint exploit
Remove width: 0; from #content { selector.