I have a responsive slider with full-screen images. When I resize the page images stays responsive but the problem Im running into is that the parent div stays to the original height and I get very big white space and I dont know a method to fix the issue.
Sorry but i don`t know how to explain this,maybe youy can figure out from the image i added.
<!-- !Showcase -->
<div id="showcase">
<i id="arrow-left" class="arrow far fa-arrow-alt-circle-left "></i>
<div id="slider">
<div class="slide slide1"></div>
<div class="slide slide2 "></div>
<div class="slide slide3"></div>
</div>
<i id="arrow-right" class="far arrow fa-arrow-alt-circle-right "></i>
</div>
#showcase {
height: 500px;
width: 100%;
position: relative;
}
#slider {
height: inherit;
width: 100%;
overflow-x: hidden;
}
.slide {
width: 100%;
height: inherit;
background-size: contain !important;
}
.slide1 {
background: url(/Core/img/lazar1.jpg) no-repeat center 10%/cover;
}
.slide2 {
background: url(/Core/img/lazar2.jpg) no-repeat center 10%/cover;
}
.slide3 {
background: url(/Core/img/lazar3.jpg) no-repeat center 10%/cover;
}
Showcase has a fixed height, turn it into a min-height or remove it to allow the container to fit its content's
As G-Cyr said in his comment, your container element (#showcase) has an absolute height of 500px. That is what is blocking your element from filling up whenever your content would regularly go above 500px. If you want your baseline height of this container to be at least 500px, change height: 500px to min-height: 500px. That should work.
Related
I need to close the gap following a CSS transform: translateY(-50%) so that content flows on naturally.
I have tried other methods but have been unable to move the element up by 50% of its own height. Negative margin as a percentage is based on the height of the window so this doesn't seem like an option, nor can I set a negative margin on the following element as it needs to be based on the height of the header.
HTML:
<div class="header">
<div class="featured-image">
<!-- this is in place of the featured image -->
</div>
<div class="title-container">
<h1>Title<br />goes<br />here</h1>
</div>
</div>
<div class="article-body">
<p>There is too much space above class="article-body". I want the content to flow on naturally after class="title-container", however using translateY is purely visual so an alternate method of moving the yellow block up by 50% of its own height is necessary.</p>
</div>
CSS:
.header {
width: 100%.
position: relative;
}
.featured-image {
width: 100%;
height: 200px;
background-color: blue;
}
.title-container {
width: 50%;
margin: 0 auto;
transform: translateY(-50%);
background-color: yellow;
}
JS Fiddle:
https://jsfiddle.net/robertirish/tyh18orq/16/
It may be that this is only possible using Javascript but it would be great to get it done with pure CSS as JS and media queries are a pain to implement.
Thanks in advance.
Instead of using transform: translateY(-50%), use margin-top: -25vh.This will place the .title-container in the same place, yet keep the .article-body flush below it:
.header {
width: 100%.
position: relative;
}
.featured-image {
width: 100%;
height: 200px;
background-color: blue;
}
.title-container {
width: 50%;
margin: 0 auto;
/*transform: translateY(-50%);*/
margin-top: -25vh;
background-color: yellow;
}
<div class="header">
<div class="featured-image">
<!-- this is in place of the featured image -->
</div>
<div class="title-container">
<h1>Title<br />goes<br />here</h1>
</div>
</div>
<div class="article-body">
<p>There is too much space above class="article-body". I want the content to flow on naturally after class="title-container", however using translateY is purely visual so an alternate method of moving the yellow block up by 50% of its own height is necessary.</p>
</div>
I have a small Problem. I am trying to make the structure from image. I have the CSS and HTML
.mask-skew {
transform: skewX(-10deg);
/*width: 300px;*/
height: 390px;
overflow: hidden;
margin: 5px;
/*border: 2px solid orange;*/
}
.art-skew {
transform: skewX(10deg);
position: relative;
left: -50%;
}
<div class="row flex--row advertising-row">
<div class="col-xs-12 col-sm-4 mask-skew">
<img class="art-skew" src="templates/Stordeur/themes/stordeur/images/BarbourSS18Banner_1140x392px.jpg" alt="">
</div>
<div class="col-xs-12 col-sm-4 mask-skew">
<img class="art-skew" src="templates/Stordeur/themes/stordeur/images/TeaserWellensteynKopie.jpg" alt="">
</div>
<div class="col-xs-12 col-sm-4 mask-skew">
<img class="art-skew" src="templates/Stordeur/themes/stordeur/images/template_teaser_images_fjallraven.jpg" alt="">
</div>
</div>
But the result is from this Image
How can I obtain the result from first image. The left and right image has straight edge.
You could basicly, skew links and then unskew img.
overflow:hidden will need to be used to cover the whole screen/link.
example
body {margin:0;}
div {
overflow:hidden;
}
nav {
display:flex;
height:100vh;
margin:0 -10vw
}
nav a {
flex:1;
height:100%;
transform:skew(-15deg);
overflow:hidden;
}
nav a + a {
margin-left:3vh;
}
nav a img {
width:140%;
height:100%;
display:block;
/* optionnal */
/*object-fit: cover;
object-position:center center;*/
transform:skew(15deg);
margin:0 -20%; /* in relation with width */
}
<div>
<nav>
<img src="http://www.intrawallpaper.com/static/images/desktop-backgrounds-8656-8993-hd-wallpapers_js7gwWA.jpg">
<img src="https://images.wallpaperscraft.com/image/pool_skyscraper_hotel_124522_1600x1200.jpg">
<img src="https://wallpaperscraft.com/image/dark_background_colorful_paint_47176_300x188.jpg">
</nav>
</div>
object-fit can also help to make sure image fills entire link. it will be clipped.
For the text, it can be added aside img. and centered via flex. pen to play with : https://codepen.io/gc-nomade/pen/vaJzaM
if you want to use background-image and a link on top of it, you may inspire yourself from https://codepen.io/gc-nomade/pen/vGvRPZ/ (turn titles into links)
Both example skew the container, then apply the opposite skew value to unskew content.
Straight edges are made from letting content overflowing but hidden outside edges.
On load I'd like to load the topsection div with a bg image and have it take up the entire screen, but then I have content below it which you can scroll down to. The div should size itself to the window screen only on load and not remain like that on scrolldown. I cannot give the div a position:absolute; either.
I'm banging my head on this one. I've tried a ton of different things
Here is my html:
<div id="topsection" class="row bgimage ">
<div id="logomain" class="mainlogo ">
<div class=" floorplanbuttoncontainer helvetical">
<ul>
<li>Residence A - Duplex</li>
<li>
Residence D - Simplex</li>
</ul>
</div><!-- end floorplanbuttoncontainer -->
</div><!-- end logomain -->
Here is my css for the background image:
.bgimage {
background: url(images/image.jpg) no-repeat center center fixed;
background-size: cover;
.mainlogo {
margin:0 auto;text-align:center;width:100%;height:488px; /*I think this height is messing things up */
background-image:url(images/picture.png);background-repeat:no-repeat;
background-position: center;
}
In order to set a div to take up the entire screen you need to set the height of the body and html element to 100%. You also have to remove the padding and margin from them. Then you create a wrapper class to encase your content and assign it your background-image. Then all ya' gotta do is create the content below your full screen image to scroll into!
Fiddle
Edit
If you run the snippet below and hit full page you can see how it works.
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.wrapper {
min-height: 100%;
background: red;
}
.full {
width: 100%;
}
.footerThing {
width: 100%;
height: 200px;
background: blue;
}
<div class="wrapper">
<div class="full">
asd
</div>
</div>
<div class="footerThing">
</div>
Modern browsers: a simple way is to use vh units to get the Viewport Height
Just to simplify: jsBin demo
<div id="home" class="container full">
<h1>HOME</h1>
</div>
<div id="about" class="container">
<h1>About us</h1>
<p>Content</p>
</div>
CSS:
.container { min-height:400px; }
.full { height:100vh; }
Crossbrowser: use % instead of vh and simply add html, body{height:100%;} jsBin demo
I have a responsive image list. Each image is inside a container.
I want the image container to be 75% of its first container (unit container in this case)
the image ration is 1:1
I played a little with the image container percentage width but it feels like this is not the solution.
<ul class="list-inline unit_list ">
<li class="unit_list_item col-xs-24 col-sm-12 col-md-8">
<a href='#' alt="unit">
<div class="unit_container">
<div class="icon_container unit_icon">
<img class="img-responsive unit_image" src="http://placehold.it/60X60" />
</div>
<div class="unit_name">FREE</div>
</div>
</a>
</li></ul>
Btw, I'm using bootstrap if that's matter.
http://jsfiddle.net/wmu3w3ej/1/
Thanks to #Mary Melody
transform: scale(0.75);
works like magic
I'm a little afraid to use it since it's so simple.
any thoughts?
Using the logic from here: https://stackoverflow.com/a/20117454/3389737
I have applied it to your situation: http://jsfiddle.net/phwaLmen/1/
#wrapper
{
position: relative;
width: 50%;
overflow: hidden;
}
#wrapper:before
{
content: "";
display: block;
padding-top: 75%;
}
#image
{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
}
<div id="wrapper">
<img src="http://placehold.it/350x350" id="image">
</div>
Add relative positioning to the parent, set its width as you'd like and make sure the overflow is hidden.
Create a :before element for the wrapper with a padding-top of 75%. Since there is no height specified for the #wrapper, this 75% is based on the width of the element :)
Then you have your image, positioned absolutely and then fitted to the container. If you want the image to be cropped instead of resized, remove the height: 100% and width: 100% style rules from it.
You can do it like this (in your html):
<img src="img.jpg" height="75%" />
Good luck!
I'm trying to find out how to define the height for this .gallery element based on the size of the img element inside it.
<div class="row">
<div class="large-10 columns">
<div class="gallery portrait">
<div class="cover">
<img src="http://placekitten.com/800/1029">
</div>
<ul class="thumbs">
<li class="thumb"></li>
<li class="thumb"></li>
<li class="thumb"></li>
</ul>
</div>
</div>
</div>
I'm using percentage-based heights and widths in my CSS to set the height and width of the elements inside my gallery. However, I'm defining the height of the .gallery element in pixels so my percentage elements work.
.gallery {
height: 680px;
}
I'm trying to get the height of the .gallery to adjust its self when the browser window is resized and my image gets smaller.
I've got a demo of the problem I'm having over here: http://codepen.io/realph/pen/kKAmx
Any help is appreciated. Thanks in advance!
If I understand what your issue correctly, then simply remove the height: entries on your gallery and cover class. The gallery element should expand contract to fit the image (as long as the image has % width).
Example Fiddle
CSS:
.gallery {
background: orange;
width: 100%;
float: left;
//height: 680px;
}
.cover {
float: right;
width: 63.8554217%;
//height: 680px;
overflow: hidden;
}
.gallery img {
width: 50%;
}