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>
Related
I have a flex div container with three child divs. For some reason adding padding left to the first container - #testcont causes the other containers to move. Unless I'm not looking carefully, why is this happening when the box-sizing is border box?
Here is my code: https://jsfiddle.net/templar9901/2g3whovc/2/
<div id = "three">
<div id = "testcont">
blahh1
</div>
<div>
blahh2
</div>
<div>
blahh3
</div>
</div>
//CSS
*{
box-sizing: border-box;
}
#three{
border: solid;
display: flex;
justify-content: space-around;
}
#three div{
border: 2px solid red;
/* flex-grow: 1; */
}
#testcont{
padding-left: 20%;
}
Because they all share the same parent container.
You should put each group with a different style separately like this.
<div id = "main-container">
<div class="container1">
<div class="btn" id = "testcont">
blahh1
</div>
</div>
<div class="container2">
<div class="btn">
blahh2
</div>
<div class="btn">
blahh3
</div>
</div>
</div>
CSS
*{
box-sizing: border-box;
}
#main-container{
border: 1px solid;
display: flex;
justify-content: space-around;
}
.container1 {
width: 40%;
border: 1px solid blue;
}
.container2 {
width: 60%;
border: 1px solid green;
display: flex;
}
.btn{
border: 2px solid red;
padding: 0 5px;
/* flex-grow: 1; */
}
#testcont{
padding-left: 30%;
}
hope this help.
I'd like to place divs equally spaced on multiple rows. I've tried setting margins or justify-content but none of them worked so far. I want the course-lists in each row to be equally spaced but the space between the lists depends on the length of the name of the courses when I tried setting margins. I'm new to CSS so I'm sorry if the question or my codes are confusing.
HTML
<div className="course-section">
<div>
<h2 id="course-tag">Coursework</h2>
</div>
<div className="course-box">
<div className="course-list-row">
<div className="course-bullet"></div>
<div className="course-list">Data Structures</div>
<div className="course-bullet"></div>
<div className="course-list">Computer Architecture</div>
</div>
<div className="course-list-row">
<div className="course-bullet"></div>
<div className="course-list">Numerical Analysis</div>
<div className="course-bullet"></div>
<div className="course-list">Numerical Methods</div>
</div>
<div className="course-list-row">
<div className="course-bullet"></div>
<div className="course-list">Discrete Structures</div>
<div className="course-bullet"></div>
<div className="course-list">Intro to Computer Science</div>
</div>
<div className="course-list-row">
<div className="course-bullet"></div>
<div className="course-list">Applied Linear Algebra</div>
<div className="course-bullet"></div>
<div className="course-list">Physics Courses</div>
</div>
</div>
</div>
CSS
#mixin bullet {
height: 15px;
width: 15px;
background-color: blue;
display: inline-block;
}
#mixin resume-box {
background-color: white;
height: 350px;
width: 700px;
margin: auto;
overflow: hidden;
-webkit-box-shadow: 0 0 15px 3px #b0abaa;
-moz-box-shadow: 0 0 15px 3px #b0abaa;
box-shadow: 0 0 15px 3px #b0abaa;
}
.course-section {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
#course-tag {
margin-bottom: 40px;
margin-right: 530px;
font-weight: bold;
font-size: 30px;
}
.course-box {
#include resume-box;
margin-bottom: 80px;
padding: 40px 50px 40px 50px;
}
.course-bullet {
#include bullet;
}
.course-list {
display: inline-block;
margin-left: 10px;
font-size: 20px;
}
.course-list-row {
margin-bottom: 20px;
}
}
It's what I want.
Well I think it can be simplyfied like this:
HTML:
<div class="course-section">
<div>
<h2 id="course-tag">Coursework</h2>
</div>
<div class="course-box">
<div class="course-list">Data Structures</div>
<div class="course-list">Computer Architecture</div>
<div class="course-list">Numerical Analysis</div>
<div class="course-list">Numerical Methods</div>
<div class="course-list">Applied Linear Algebra and lorem ipsum dolor sit amet</div>
<div class="course-list">Discrete Structures</div>
<div class="course-list">Intro to Computer Science</div>
<div class="course-list">Physics Courses</div>
</div>
</div>
scss:
#mixin bullet {
height: 15px;
width: 15px;
background-color: blue;
display: inline-block;
}
#mixin resume-box {
background-color: white;
height: 350px;
width: 700px;
margin: auto;
overflow: hidden;
box-shadow: 0 0 15px 3px #b0abaa;
}
* {
box-sizing: border-box;
}
.course-section {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
#course-tag {
margin-bottom: 40px;
margin-right: 530px;
font-weight: bold;
font-size: 30px;
}
.course-box {
#include resume-box;
display: flex;
flex-wrap: wrap;
padding: 40px 50px 40px 50px;
.course-list {
flex: 0 0 50%;
position: relative;
font-size: 20px;
padding-left: 35px;
&:before {
content: '';
position: absolute;
left: 10px;
top: 3px;
#include bullet;
}
}
}
}
The important things here are:
* {
box-sizing: border-box;
}
Flex does not really need this, but i usually use this box-sizing so margins and paddings won't get sum to dom elements total height and/or width. I find border-box to be more precise.
.course-box {
display: flex;
flex-wrap: wrap;
}
The container is set to flex so we can use the flex property of its child elements to have them aligned and distributed. flex-wrap: wrap basically does what it says, force content inside a flex container to wrap when width is reached. (try to put it as nowrap in the snippet and see what happens)
.course-list {
flex: 0 0 50%;
}
Finally, we set the flex property of the list elements to 0 0 50%, this basically translates into 0 (this element can't be shrinked) 0 (this element can't be expanded) 50% (width of the element). So if you would like to have 3 elements per row it would be 0 0 33% and so.
You could even make it responsive. For example:
.course-list {
flex: 0 0 50%;
#media only screen and (max-width: 767px) {
flex: 0 0 100%;
}
}
this would result into two column rows in desktop and one column rows in mobile.
Also, avoid use a div to fake a bullet, better use the :after or :before pseudo elements as the snippet below, it will result in much cleaner html.
Here is a snippet:
* {
box-sizing: border-box;
}
.course-section {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.course-section #course-tag {
margin-bottom: 40px;
margin-right: 530px;
font-weight: bold;
font-size: 30px;
}
.course-section .course-box {
background-color: white;
height: 350px;
width: 700px;
margin: auto;
overflow: hidden;
box-shadow: 0 0 15px 3px #b0abaa;
display: flex;
flex-wrap: wrap;
padding: 40px 50px 40px 50px;
}
.course-section .course-box .course-list {
flex: 0 0 50%;
position: relative;
font-size: 20px;
padding-left: 35px;
}
.course-section .course-box .course-list:before {
content: "";
position: absolute;
left: 10px;
top: 3px;
height: 15px;
width: 15px;
background-color: blue;
display: inline-block;
}
<div class="course-section">
<div>
<h2 id="course-tag">Coursework</h2>
</div>
<div class="course-box">
<div class="course-list">Data Structures</div>
<div class="course-list">Computer Architecture</div>
<div class="course-list">Numerical Analysis</div>
<div class="course-list">Numerical Methods</div>
<div class="course-list">Applied Linear Algebra and lorem ipsum dolor sit amet</div>
<div class="course-list">Discrete Structures</div>
<div class="course-list">Intro to Computer Science</div>
<div class="course-list">Physics Courses</div>
</div>
</div>
I am currently trying to figure out a way to be able to have a layout that has a bottom-up, content-oriented resizing behavior.
I have the following situation: https://codepen.io/Flash1232/pen/JJYPVQ
What is wrong here is obviously that the wrapper divs do not wrap around the table divs. Now is there any solution for this involving just plain CSS and HTML or do I have to write something in JS like "set wrapper width to the width of its inner div"?
Thanks in advance for any clues!
Man i solved my problem with display:flex on parent element :)
You may want to consider using a flexbox. Please see below. If there is anything that needs to be different, just let me know.
.outer-div {
position: absolute;
background: black;
width: 800px;
left: 0;
top: 0;
bottom: 0;
overflow: auto;
padding: 10px;
}
.area {
overflow: auto;
display: flex;
border: 5px solid red;
background: white;
margin: 10px 40px 10px 10px;
}
.column {
background: green;
border: 5px solid blue;
}
.wrapper {
display: flex;
border: 5px solid yellow;
justify-content: center;
align-items: center;
}
.table {
white-space: nowrap;
}
.violet {
background: violet;
width: 120%;
height: 80px;
}
.red {
background: red;
width: 150%;
height: 80px;
margin-bottom: 20px;
}
.icons {
Background: yellow;
float: right;
height: auto;
width: auto;
}
<div class="outer-div">
<div class="area">
<div class="column">
<div class="wrapper">
<div class="table red">
<span>***Table Content***</span>
</div>
</div>
<div class="wrapper">
<div class="table violet">
<span>***Table Content***</span>
</div>
</div>
</div>
<div class="column">
<div class="wrapper">
<div class="table violet">
<span>***Table Content***</span>
</div>
</div>
</div>
</div>
<div class="icons">
<p>Icon</p>
<p>Icon</p>
<p>Icon</p>
<p>Icon</p>
<p>Icon</p>
<p>Icon</p>
</div>
</div>
You should read the definition of the width attribute.
https://developer.mozilla.org/en/docs/Web/CSS/width
Percentages: refer to the width of the containing block
If you set width to 150%, you explicitly say, that the child should be bigger than the parent. You can not expect, that the parent has the same width like the child, if you force the child to be wider.
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
Here is my problem. I have inline-block divs inside another div.
.timeEvents {
width: 100%;
overflow: hidden;
text-align: center;
}
.timeline {
border: 1px solid;
}
.events1, .events2 {
border: 1px solid;
}
.ev1, .ev3 {
border: 1px solid red;
}
.ev2 {
margin: 0 auto;
border: 1px solid red;
display: inline-block;
}
.mDiv {
display: inline-block;
padding-left: 12px;
padding-right: 12px;
border: 1px solid blue;
}
<div class="timeEvents">
<div class="events1">
<div class="ev1">Data Field 1</div>
</div>
<div class="timeline">
<div class="ev2">
<div class="mDiv">5</div>
<div class="mDiv">10</div>
<div class="mDiv">15</div>
<div class="mDiv">20</div>
<div class="mDiv">25</div>
</div>
</div>
<div class="events2">
<div class="ev3">Data Field 2</div>
</div>
</div>
I want the .ev2 to be wrapped around its children which are inline. Then, the two data fields, respectively .ev1 and .ev3 placed above and below, should have the same width as .ev2. Which means that all divs with a red border (in my JSFiddle) should have the same width (dynamic, I don't know it) and that width should not be 100% as it's in the jsFiddle example: https://jsfiddle.net/mzjqw2wx/17/.
EDIT - I updated my fiddle. I don't want to lose the outside 100% divs, I want to align the three red sections to have the same width, the page and the outside divs all remain 100%. The tip to use inline-block on the wrapper was great, it did what I wanted with the middle one. I wanted to align all red containers and I did it with jQuery.
You need to also set display: inline-block; for the common wrapper (and give text-align: center to its parent)
body { text-align: center; }
.timeEvents {
display: inline-block;
margin: 0 auto;
}
JSFiddle
Result:
That's pretty easy to implement using Flexbox.
Just assign display: flex; to .ev2 and flex-grow: 1; to the the .myDiv class.
You can see it in the following code:
.timeEvents {
width: 100%;
overflow: hidden;
text-align: center;
}
.timeline {
border: 1px solid;
}
.events1, .events2 {
border: 1px solid;
}
.ev1, .ev3 {
border: 1px solid red;
}
.ev2 {
margin: 0 auto;
border: 1px solid red;
display: flex;
}
.mDiv {
display: inline-block;
padding-left: 12px;
padding-right: 12px;
border: 1px solid blue;
flex-grow: 1;
}
<div class="timeEvents">
<div class="events1">
<div class="ev1">Data Field 1</div>
</div>
<div class="timeline">
<div class="ev2">
<div class="mDiv">5</div>
<div class="mDiv">10</div>
<div class="mDiv">15</div>
<div class="mDiv">20</div>
<div class="mDiv">25</div>
</div>
</div>
<div class="events2">
<div class="ev3">Data Field 2</div>
</div>
</div>
Check out CSS-Trick's Complete guide to Flexbox for more information.
Use display:table to timeEvents and remove width:100% will make as per your expected.
.timeEvents {
display: table;
overflow: hidden;
text-align: center;
}
Fiddle