I have 3 div with height : 100vh
But with the responsive my imgs overflow. You can check that on the image.
Sorry for my poor english !
This is the html :
<section id="services" class="container content-section text-center">
<div class="col-lg-8 col-lg-offset-2">
<div class="row">
<div class="col-lg-6">
<h2>Services </h2>
<ul>
<li>Covoiturages </li>
<li>Food </li>
<li>Hébergement </li>
</ul>
</div>
<div class="col-lg-6">
<img src="img/mockup-iphone.png" alt="mockup iphone" class="img-responsive"/>
</div>
</div>
</section> <!-- close about -->
<section id="communities" class="container content-section text-center">
<div class="row">
<div class="col-lg-6">
<img src="img/mockup-iphone.png" alt="mockup iphone" class="img-responsive"/>
</div>
<div class="col-lg-6">
<h2>Communities </h2>
<ul>
<li>Texte </li>
<li>Texte </li>
<li>Texte </li>
</ul>
</div>
</div>
</section>
And the css :
#services{
width: 100%;
height:100vh;
background-color: #62b030;
}
#services img{
height:90%;
}
Try to smaller the img to height: 80vh, or calc image max-height: calc(100vh-100px); overflow:hidden for #services might work, too. YOu can also add width, adn height to your img-responsive or your img class.
Related
I have a nested list and each list item works like a table row (using flex). The nested items i.e. rows are indented from the left so the width is different at different levels. It currently has tree levels but this may change at some point.
I want to:
Align all "columns" other than first one, on a single verticle line, and
Apply % widths on the columns excepts first one.
So far, I have only been able to achieve the alignment part using fixed pixel widths. But I really need to set the column .second and .third width based on % of top-most ul, otherwise the columns would not align perfectly. Fixed pixel widths aren't good for responsiveness.
I have two options in my mind:
Removing the left margin on list items and adding left-margin on .first. But this would mean manually adding borders on each "cell" and also some other code duplication.
Maybe there is a way to use CSS calc() somehow. With recursively rendered list, this seems quite complicated though. I am using this markup in a React.js component and I need to pass the level as prop and then use calc() in inline style. Doesn't look clean.
ul {
list-style-type: none;
padding: 0;
margin-left: 2rem;
}
.row {
display: flex;
border: 1px solid gray;
}
.first {
flex-grow: 1;
}
.second,
.third {
width: 200px;
}
<ul>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
<ul>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
</li>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
<ul>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
</li>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
</li>
</ul>
</li>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
</li>
</ul>
</li>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
</li>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
</li>
</ul>
I found a simple workaround. For my use case, simply setting the width of the columns to percentage of viewport does the job. i.e. width: 25vw
Now looks nice on both narrow and wider screens. Also quite happy with the browser support: https://caniuse.com/viewport-units
Please compare with above snippet on "Full page" view to see column widths are responsive on this one and are not responsive in the question snippet.
ul {
list-style-type: none;
padding: 0;
margin-left: 2rem;
}
.row {
display: flex;
border: 1px solid gray;
}
.first {
flex-grow: 1;
}
.second,
.third {
width: 25vw;
}
<ul>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
<ul>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
</li>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
<ul>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
</li>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
</li>
</ul>
</li>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
</li>
</ul>
</li>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
</li>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
</li>
</ul>
The first image of the row doesn't have the same height as the other ones. I am using Bootstrap .img-responsive.
HTML
<div class="row">
<div class="down-content">
<div class="haber">
<!--HABER 1-->
<div class="col-sm-3">
<div id="haber1">
<div id="haberimg1">
<img class="img-responsive" src="http://www.avukatwebsite.net/public/_uploads/photos/temalar/avukat-web-site-tema-1.jpg" >
</div>
<div id="haberyazi1">
<h3>Kanser Affetmedi...</h3>
<p>Sanssiz genc Kanser yüzünden öldü...</p>
<button type="button" class="btn">Devamini Oku...</button>
</div>
</div>
</div>
<!--HABER 2-->
<div class="col-sm-3">
<div id="haber2">
<div id="haberimg2">
<img class="img-responsive" src="http://medicare.bold-themes.com/clinic/wp-content/uploads/sites/2/2015/12/shutterstock_288977717-1200x800.jpg" >
</div>
<div id="haberyazi2">
<h3>Sizofreni Salgini</h3>
<p>Türkiyede ki Sizofren sayisinda artis görüldü...</p>
<button type="button" class="btn">Devamini Oku...</button>
</div>
</div>
</div>
/* we deleted the other parts because of mostly code problem */
</div>
<!--HABER BÖLÜMÜ BITIS-->
</div>
</div>
Bootstrap CSS
.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
display: block;
max-width: 100%;
height: auto;
}
This is the issue:
There are a number of solutions. Here is a couple of similar solutions. First you would need to create a div that scales responsively. This can be achieved with:
.img-wrap {
height:0;
// adjust the padding to change the aspect ratio of the div
padding-bottom:60%;
}
you can then either add a background image to the .image-wrap element with background-size:cover. Or you could place an image inside .image-wrap and then position:absolute; it inside .image-wrap and add object-fit: cover; width: 100%; height: 100%;.
Answer 1:
You have to set a fixed height to the img parent div and then set height:100% to the img Check below Snippet:
.haberImg {
height: 75px;
}
.haberImg img {
height: 100%;
width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
<div class="down-content">
<div class="haber">
<!--HABER 1-->
<div class="col-xs-3">
<div id="haber1">
<div id="haberimg1" class="haberImg">
<img class="img-responsive" src="http://www.avukatwebsite.net/public/_uploads/photos/temalar/avukat-web-site-tema-1.jpg"></div>
<div id="haberyazi1">
<h3>Kanser Affetmedi...</h3>
<p>Sanssiz genc Kanser yüzünden öldü...</p>
<button type="button" class="btn">Devamini Oku...</button>
</div>
</div>
</div>
<!--HABER 2-->
<div class="col-xs-3">
<div id="haber2">
<div id="haberimg2" class="haberImg">
<img class="img-responsive" src="http://medicare.bold-themes.com/clinic/wp-content/uploads/sites/2/2015/12/shutterstock_288977717-1200x800.jpg"></div>
<div id="haberyazi2">
<h3>Sizofreni Salgini</h3>
<p>Türkiyede ki Sizofren sayisinda artis görüldü...</p>
<button type="button" class="btn">Devamini Oku...</button>
</div>
</div>
</div>
</div>
</div>
Answer 2:
You have to set a fixed height to the img parent div as the smallest img height and then add overflow:hidden. Check below Snippet:
.haberImg {
height: 80px;
overflow:hidden;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
<div class="down-content">
<div class="haber">
<!--HABER 1-->
<div class="col-xs-3">
<div id="haber1">
<div id="haberimg1" class="haberImg">
<img class="img-responsive" src="http://www.avukatwebsite.net/public/_uploads/photos/temalar/avukat-web-site-tema-1.jpg"></div>
<div id="haberyazi1">
<h3>Kanser Affetmedi...</h3>
<p>Sanssiz genc Kanser yüzünden öldü...</p>
<button type="button" class="btn">Devamini Oku...</button>
</div>
</div>
</div>
<!--HABER 2-->
<div class="col-xs-3">
<div id="haber2">
<div id="haberimg2" class="haberImg">
<img class="img-responsive" src="http://medicare.bold-themes.com/clinic/wp-content/uploads/sites/2/2015/12/shutterstock_288977717-1200x800.jpg"></div>
<div id="haberyazi2">
<h3>Sizofreni Salgini</h3>
<p>Türkiyede ki Sizofren sayisinda artis görüldü...</p>
<button type="button" class="btn">Devamini Oku...</button>
</div>
</div>
</div>
</div>
</div>
A simple way is to use images that have the same width and the same height! (You avoid a lot of problems and there is no need to fix something with CSS)
HTML
<div class="row">
<div class="col-sm-3">
<img src="http://placehold.it/400x300" alt="" class="img-responsive">
<h3>Heading</h3>
<p>Text</p>
<button class="btn">More</button>
</div>
<div class="col-sm-3">
<img src="http://placehold.it/400x300" alt="" class="img-responsive">
<h3>Heading</h3>
<p>Text</p>
<button class="btn">More</button>
</div>
<div class="col-sm-3">
<img src="http://placehold.it/400x300" alt="" class="img-responsive">
<h3>Heading</h3>
<p>Text</p>
<button class="btn">More</button>
</div>
<div class="col-sm-3">
<img src="http://placehold.it/400x300" alt="" class="img-responsive">
<h3>Heading</h3>
<p>Text</p>
<button class="btn">More</button>
</div>
</div>
Just give your images same class and add height.
Trick: avoid of giving height with pixels because getting issue in small screen instead give height with rem or
percentage
It's very easy actually, use display grid and grid-auto-columns: 1fr.
I have a below HTML code in which the images are purely responsive.
<div class="flexslider js-fullheight">
<ul class="slides">
<li style="background-image: url(images/slide_1.jpg); width:100%;" border="0" alt="Null">
<div class="overlay-gradient"></div>
<div class="container">
<div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
<div class="slider-text-inner">
<h2>Start Your Startup With This Template</h2>
<p>Get started</p>
</div>
</div>
</div>
</li>
<li style="background-image: url(images/slide_3.jpg);">
<div class="container">
<div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
<div class="slider-text-inner">
<h2>Take Your Business To The Next Level</h2>
<p>Get started</p>
</div>
</div>
</div>
</li>
<li style="background-image: url(images/slide_2.jpg);">
<div class="container">
<div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
<div class="slider-text-inner">
<h2>We Think Different That Others Can't</h2>
<p>Get started</p>
</div>
</div>
</div>
</li>
</ul>
</div>
In this, the slide_1.jpg image is responsive. What I want is, I want to replace this image with my actual Image.
I tried changing the image by giving width:100% but the Image was still getting stretched. Any idea, how to make that image responsive.
Update
and the css is below
#fh5co-hero .flexslider .slider-text > .slider-text-inner {
display: table-cell;
vertical-align: middle;
min-height: 700px;
}
#fh5co-hero .flexslider .slider-text > .slider-text-inner h2 {
font-size: 70px;
font-weight: 400;
color: #fff;
}
#media screen and (max-width: 768px) {
#fh5co-hero .flexslider .slider-text > .slider-text-inner h2 {
font-size: 40px;
}
}
#fh5co-hero .flexslider .slider-text > .slider-text-inner .fh5co-lead {
font-size: 20px;
color: #fff;
}
<div class="flexslider js-fullheight">
<ul class="slides">
<li style="background-image: url(/images/slide_1.jpg);">
<div class="overlay-gradient"></div>
<div class="container">
<div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
<div class="slider-text-inner">
<h2>Start Your Startup With This Template</h2>
<!--<p>Get started</p>-->
</div>
</div>
</div>
</li>
<li style="background-image: url(images/slide_3.jpg);">
<div class="container">
<div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
<div class="slider-text-inner">
<h2>Take Your Business To The Next Level</h2>
<!--<p>Get started</p>-->
</div>
</div>
</div>
</li>
<li style="background-image: url(images/slide_2.jpg);">
<div class="container">
<div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
<div class="slider-text-inner">
<h2>We Think Different That Others Can't</h2>
<!--<p>Get started</p>-->
</div>
</div>
</div>
</li>
</ul>
</div>
If you change only the width to 100% it will stretch the image inside of it. Try adding height:auto; to the inline CSS in order for the image to scale correctly.
If that doesn't work, try replacing your background-image property with:
background: url(images/slide_1.jpg) no-repeat center center;
background-size: cover;
My pen: http://codepen.io/helloworld/pen/yyoJGR
Why is the white separater and the list-grouping flowing through the divs or the parent row?
<div class="container columnStyle">
<div class="row">
<div class="row-same-height">
<div class="col-xs-3 col-xs-height">
<img class="img-responsive" src="http://s7.postimg.org/agarkavmj/whoiswho.png"></img>
</div>
<div class="col-xs-9 col-xs-height" >
<div class="container">
<div class="row">
<div class="page-header">
<h1>Who is who
<p>
<small>Organization & Processes</small>
</p>
</h1>
</div>
</div>
</div>
<div class="container">
<div class="row">
<ul class="list-group">
<li class="list-group-item">Org Charts </li>
<li class="list-group-item">GAM / KAM Charts</li>
<li class="list-group-item">Process flow</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
.columnStyle{
background: #006AB3;
}
Because you use the class .containermultiple times.
This class has a fixed width of 1170px;
.container {
width: 1170px;
}
you should have only 1 .containerfor the wrapper and then, inside of it, remove the other .container and just use .row
See it in action : http://codepen.io/anon/pen/ogeLRb
I have the following:
http://jsfiddle.net/B6dFk/embedded/result/
Excerpts:
HTML:
<div id="aboutback">
This is a background
</div>
<div id="workback">
This is another background
</div>
<div id="wrapper">
<div id="innerwrapper">
<div id="nav">
<div id="about" class="menu1">
<p>About</p>
</div>
<div id="aboutsub">
<div id="team" class="menu2">
<p>Team</p>
</div>
<div id="experience" class="menu2">
<p>Experience</p>
</div>
<div id="difference" class="menu2">
<p>Difference</p>
</div>
</div>
<div id="work" class="menu1">
<p>Work</p>
</div>
<div id="worksub">
<div id="services" class="menu2">
<p>Services</p>
</div>
<div id="ourprocess" class="menu2">
<p>Our Process</p>
</div>
</div>
<div id="portfolio" class="menu1">
<p>Portfolio</p>
</div>
<div id="contact" class="menu1">
<p>Contact</p>
</div>
</div>
<div id="outerviewer">
<div id="innerviewer">
<p>
Filler
</p>
</div>
</div>
</div>
CSS
#aboutback
{
position: absolute;
background: #11ac92;
min-height: 100%;
width: 100%;
top: 0;
z-index: -1;
}
I want the #aboutback and the #workback to take up the full background at all times. These will have images in them which i will animate using jquery.
The problem is, when the window isn't full page(so the scrollbar appears) and you scroll down, you see the white nothingness of despair.
It's worth noting I have tried setting the position of the body tag which alters the effect but does not fix it. For example, position:absolute; will push everything left and leave a white space on the right.
Any simple solutions, please?
body{
height:100%;
overflow:hidden;
}
html{height:100%;}
body{height:100%;}
divclass{height:100%;}