I badly want to create four responsive circles (two per row) in a container. All circles are supposed to contain some images and text inside - obviously responsive as well.
I've seen many different snippets for responsive circles with a single image or a block of text inside but I couldn't find a solution for my particular problem (which means: all elements combined and scalable).
My current result is a rather unfortunate bunch of eggs, so any help will be much appreciated.
HTML:
<div class="container">
<div class="upper-row">
<div class="circle">
<img src="http://megaicons.net/static/img/icons_sizes/126/1652/128/aqua-ball-icon.png">
<p>25%</p>
<img src="http://megaicons.net/static/img/icons_sizes/126/1652/128/aqua-ball-icon.png">
</div>
<div class="circle">
<img src="http://megaicons.net/static/img/icons_sizes/126/1652/128/aqua-ball-icon.png">
<p>25%</p>
<img src="http://megaicons.net/static/img/icons_sizes/126/1652/128/aqua-ball-icon.png">
</div>
</div>
<div class="lower-row">
<div class="circle">
<img src="http://megaicons.net/static/img/icons_sizes/126/1652/128/aqua-ball-icon.png">
<p>25%</p>
<img src="http://megaicons.net/static/img/icons_sizes/126/1652/128/aqua-ball-icon.png">
</div>
<div class="circle">
<img src="http://megaicons.net/static/img/icons_sizes/126/1652/128/aqua-ball-icon.png">
<p>25%</p>
<img src="http://megaicons.net/static/img/icons_sizes/126/1652/128/aqua-ball-icon.png">
</div>
</div>
</div>
CSS:
.container {
border: 2px solid black;
width: 50%;
padding: 10px;
}
.upper-row, .lower-row {
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
}
.circle {
border: 1px solid red;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 50%;
padding: 50%;
height: 50%;
width: 100%;
padding: 20px;
margin: 10px;
}
img {
width: 50%;
height: auto;
}
https://codepen.io/karuzela/pen/kXKRoK
* {
padding: 0px;
border: 0px;
margin: 0px;
}
html {
width: 100vw;
height: 100vh;
}
body {
width: 100vw;
background-color: rgb(19, 19, 19);
}
div#mainContainer {
margin: calc((100vh - ((6/7) * 100vw)) / 2) 0px;
width: 100vw;
height: calc((6/7) * 100vw);
background-color: rgb(180, 180, 180);
z-index: 1;
}
iframe {
width: 100%;
height: 100%;
}
#media only screen and (min-aspect-ratio: 7/6) {
div#mainContainer {
margin: 0px calc((100vw - ((7/6) * 100vh)) / 2);
width: calc((7/6) * 100vh);
height: 100vh;
}
}
<body>
<div id="mainContainer">
<iframe></iframe>
</div>
</body>
just do whatever you want in the iframe
Related
I have a slider that has the focus image centered but I'm having trouble centering the indicator items (dots) because each slider has a different number of images. Here is my HTML for the slider and the indicator:
<div class="main">
<section id="slider" >
<div class="container-fluid">
<div class = 'responsiveHeight'>
<div class = 'inner'>
<div class = 'iosSlider'>
<div class = 'slider'>
<img class="item selected" src="/park-terrace/00-park-terrace.jpg" alt="Park Terrace"/>
<img class="item " src="/park-terrace/01-park-terrace.jpg" alt="Park Terrace"/>
<img class="item " src="/park-terrace/02-park-terrace.jpg" alt="Park Terrace"/>
</div>
</div>
</div>
<div class="prevButton"></div>
<div class="nextButton"></div>
</div>
</div> <!-- /.container -->
<div class = 'indicators'>
<div class = 'item selected'></div>
<div class = 'item'></div>
<div class = 'item'></div>
</div>
</section>
Here is my CSS:
.main {height:432px;}
#slider {
position:absolute;
top:100px;
left:0px;
width:100%;
color:#666;
z-index:1;
}
.responsiveHeight {
height: 0;
padding: 0 0 80% 0;
position: relative;
overflow:hidden;
}
.responsiveHeight > .inner {
position: absolute;
width: 100%;
height: 100%;
}
.iosSlider {
width: 100%;
height: 100%;
}
.iosSlider .slider {
width: 100%;
height: 100%;
}
.iosSlider .slider img {
height: 100%;
padding-right:2px;
}
.indicators {
position: relative;
top: 10px;
left: 150px;
width: 400px;
height: 10px;
margin: 0 auto;
z-index: 10;
}
.indicators .item {
float: left;
width: 12px;
height: 12px;
margin: 0 5px 0 0;
border-radius: 10px;
background-color:#666;
}
An example of the problem is below:
small number of images
large number of images
I'm hoping there is a way to adjust my css rather than use javascript. I'm open to any suggestions and I appreciate your help.
If i'm understanding you correctly, we can isolate this down to just the 'indicators'. You can use flexbox to pop these in the center:
.indicators {
width: 100%;
display: flex;
justify-content: center;
padding: 40px 0;
}
.indicators .item {
width: 12px;
height: 12px;
margin: 0 5px 0 0;
border-radius: 10px;
background-color:#666;
}
<div class='indicators'>
<div class='item selected'></div>
<div class='item'></div>
<div class='item'></div>
</div>
I am trying to figure out if there's some way to accomplish a float (left or right) such that every new start from the border begins under the element above it. These are three elements:
#red-block {
background-color: red;
width: 70vw;
height: 15vh;
}
#blue-block {
background-color: blue;
width: 20vw;
height: 45vh;
}
#green-block {
background-color: green;
width: 60vw;
height: 15vh;
}
div {
float: right;
}
<div id="red-block">
red-block
</div>
<div id="blue-block">
blue-block
</div>
<div id="green-block">
green-block
</div>
In this case, the green block begins at the right end after the vertical end of the blue block. Is there some way to get it to begin at the bottom of the red block instead?
Thanks.
try flex.
HTML:
<div id="main-block">
<div id="blue-block">
</div>
<div>
<div id="red-block">
</div>
<div id="green-block">
</div>
</div>
</div>
CSS:
#main-block{
display: flex;
justify-content: flex-end;
}
#red-block {
background-color: red;
width: 70vw;
height: 15vh;
}
#second-block{
height: 30vh;
width: 70vh;
}
#blue-block {
background-color: blue;
width: 20vw;
height: 45vh;
}
#green-block {
background-color: green;
width: 60vw;
height: 15vh;
}
I can't figure out how to make an entire flexbox a link without the content messing up somehow. It gets complicated for me because I have an image at the top of each box.
My flexboxes are set up as:
.cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.card {
flex: 0 1 100%;
margin: 0 10px 10px 0;
border: 1px solid grey;
box-shadow: 1px 1px 3px #888;
}
.card-content {
padding: 10px;
}
.card-content p {
line-height: 120%;
}
.card-header {
position: relative;
height: 200px;
overflow: hidden;
background-repeat: no-repeat;
background-size: cover !important;
background-position: center;
margin: 0;
padding: 0;
background-color: #000;
}
And some media queries:
#media all and (min-width: 50em) {
.card {flex: 0 1 30%;}
.card-content p {font-size: .9em;}
.card-content a {font-size: .9em;}
}
And the HTML structure of each box/card:
<div class="cards">
<div class="card">
<div class="card-header" style="background-image: url(https://)"></div>
<div class="card-content">
<h3>Header</h3>
<p>Description.</p>
</div>
</div>
Again, no matter where I put an A tag, it'll majorly mess up the formatting.
How to make an entire flexbox a link
Don't use a div with a class of .card as a wrapper use a link instead with the same class, everything else is the same.
The whole card is now a link!
<a href="#" class="card">
<div class="card-header" style="background-image: url(https://)"></div>
<div class="card-content">
<h3>Header</h3>
<p>Description.</p>
</div>
</a>
I am looking for a pure CSS approach to hide div 3 that has partially overflown its container. See the attached image.
Here's a working solution that'll entirely hide an item that wouldn't fit in the fixed height of its parent: Codepen
It uses Multi-Column Layout in a tricky way with :pseudos and overflow: hidden as a final touch. OK on Fx, Chrome, Edge and IE11 (if you don't use Custom Properties as I did for a better understanding. Preprocessor variables will be fine)
.container has a fixed height otherwise the question makes no sense
Same .container is twice as large as expected. It has 2 columns with no gap/gutter
Its :pseudo :after exists (the translucid tomato blob) and thus is considered as a 4th item to be taken into account in this 2-columns layout. Its height is 100% => it makes the 3rd item occupy the 2nd column if it doesn't have enough room on 1st column (2nd example)
Parent .mask has the width we want (half of .container) and overflow: hidden: the 2nd column of .container is clipped. You can remove latter declaration to see what it clips
…
Profit!
:root {
--w: 40rem;
--p-horiz: 1rem;
box-sizing: border-box;
font-size: 62.5%;
}
* {
box-sizing: inherit;
}
.mask {
width: calc(var(--w));
overflow: hidden; /* REMOVE to see the trick */
/*padding: 0 1rem; NOPE */
padding: 1rem 0;
background-color: #aaa;
/*outline: 1px dashed red;*/
}
.container {
position: relative;
display: column;
column-count: 2;
column-gap: 0;
width: calc(var(--w) * 2);
/*max-*/height: 25rem; /* max-height also work, at least on Fx */
font-size: 1.6rem;
}
.container:after {
content: '';
display: block;
height: 100%;
background-color: #FF634780;
}
.container:before {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 50%;
height: 100%;
background-color: #aaa;
}
/* 1. Sufficient for Fx */
/* 2. Needed for Chrome */
[class^="item-"] {
overflow: hidden; /* 1. */
display: inline-block; /* 2. */
width: calc(100% - 2 * var(--p-horiz)); /* 2. */
margin-left: var(--p-horiz);
text-align: center;
background-color: #ddd;
/*outline: 1px dashed blue;*/
}
.item-1 {
height: 8rem;
}
.item-2 {
height: 4rem;
}
.item-3 {
height: 8rem;
background-color: lightblue;
}
.alt .item-3 {
height: 16rem;
}
.mask:first-child {
margin-bottom: 3rem;
}
[class^="item-"]:not(:first-child) {
margin-top: 1rem;
}
<div class="mask">
<div class="container">
<div class="item-1">Block 1</div>
<div class="item-2">Block 2</div>
<div class="item-3">Block 3</div>
</div>
</div>
<div class="mask">
<div class="container alt">
<div class="item-1">Block 1</div>
<div class="item-2">Block 2</div>
<div class="item-3">Block 3</div>
</div>
</div>
Our team looked for solution on hiding vertically content which overflows
But, simple overflow: hidden wouldn't work because it can hide overflowing content partially.
And we wanted to hide it fully.
So, #FelipeAls suggested to use css columns
And yes, it actually works
VIDEO DEMO: https://streamable.com/3tdc8
JSBIN: http://jsbin.com/fumiquhoxo/2/edit?html,css,output
Launchable example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
html, body {
height: 100%;
width: 100%;
}
#container {
padding: 5px;
height: 50px;
resize: both;
/*
Change this to "visible" to see how it works
*/
overflow: hidden;
}
#container-2 {
height: 100%;
width: 200%;
column-count: 2;
column-fill: auto;
}
</style>
</head>
<body>
<div id="container" style="width: 150px; outline: 1px red solid;">
<div id="container-2">
<div>ONE LINE</div>
<div>SECOND LINE</div>
<div>THIRD LINE</div>
<div>FOURTH LINE</div>
</div>
</div>
</body>
</html>
Hope this will help you. In case If you want to hide it, use property overflow: hidden
.container {
max-height: 300px;
width: 500px;
padding: 20px;
border: 1px solid #ddd;
overflow: auto;
}
.el {
padding: 10px;
margin: 10px 0;
height: 130px;
border: 1px solid #ddd;
}
<div class="container">
<div class="el">Div 1</div>
<div class="el">Div 2</div>
<div class="el">Div 3</div>
</div>
.container{
width: 500px;
height: 800px;
background-color: gray;
border:1px solid black;
text-align: center;
overflow: hidden;
}
.box{
display: inline-block;
width: 400px;
height: 300px;
background-color: lightgray;
margin: 20px 0px;
}
<div class="container">
<div class="box">div 1</div>
<div class="box">div 2</div>
<div class="box">div 3</div>
</div>
I have a vertically central adaptable scrollable flexbox element, which itself should have two columns (I solved this with two child-divs). The central flexbox should have a frame and a central divider line.
I can't get the central divider line to run all the way to the bottom of the scrollable flexbox. I tried it with a third child div element but the line only appears for the vertical extent of the flexbox.
How can I make two columns in a scrollable flexbox with a frame and central divider line running all the way to the bottom?
Thank you for your help.
Here is the example:
https://jsfiddle.net/soliman/0d0tn22x/2/
<body>
<div class="wrapper">
<div class="header">
<h1>Header</h1>
</div>
<div class="content">
<div class="leftContent"> Column 1
With a lot of lines.
</div>
<div class="divider"></div>
<div class="rightContent"> Column 2
With fewer lines
</div>
</div>
<div class="footer">
Footer
</div>
</div>
</body>
CSS:
html,
body {
height: 100%;
margin: 0;
padding: 0;
background: black;
color: red;
}
.wrapper {
display: flex;
/* use the flex model */
height: 100%;
flex-direction: column;
}
.header {
margin: 1em 1em 0 1em;
}
.content {
flex: 1 1 auto;
display: flex;
overflow-y: auto;
position: relative;
min-height: 100px;
margin: 0 1em 0 1em;
border: 6px double red;
}
.content > div {
width: 50%;
padding: 3%;
}
.content > div:first-child {
margin-right: 10px;
}
.footer {
margin: 0 1em 1em 1em;
}
.divider {
position: absolute;
left: 50%;
top: 0%;
bottom: 0%;
border-left: 6px double red;
}
Try this mixed flexbox and CSS table layout. You can set the content area as a table, and the three columns as table cells, so they always be equal height.
There is one issue with the approach is - it only works properly if the content is taller than the container, otherwise the vertical line will stop in the middle. See the other approach at the bottom.
jsFiddle
html,
body {
height: 100%;
margin: 0;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
overflow-y: auto;
min-height: 100px;
border: 1px solid;
}
.wrapContent {
display: table;
width: 100%;
}
.wrapContent > div {
display: table-cell;
}
.leftContent,
.rightContent {
width: 50%;
}
.divider {
border-left: 1px solid;
}
<div class="wrapper">
<div class="header">
<h1>Header</h1>
</div>
<div class="content">
<div class="wrapContent">
<div class="leftContent">
<div style="height:500px;">Left</div>
</div>
<div class="divider"></div>
<div class="rightContent">
<div style="height:auto;">Right</div>
</div>
</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
</div>
Another way would be using background image for the vertical line, set that to the center of the content container, with repeat-y, the image can be just a square dot. It works well even if the content is shorter than the container.
jsFiddle
html,
body {
height: 100%;
margin: 0;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
display: flex;
overflow-y: auto;
min-height: 100px;
border: 1px solid;
background: url("http://i.imgur.com/oyQ4xsL.png") center top repeat-y;
background-size: 1px;
}
.leftContent,
.rightContent {
width: 50%;
}
<div class="wrapper">
<div class="header">
<h1>Header</h1>
</div>
<div class="content">
<div class="leftContent">
<div style="height:500px;">left</div>
</div>
<div class="rightContent">
<div style="height:auto;">right</div>
</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
</div>