Develop Reference

How to display responsive 5 poker card images with correct aspect ratio?

I want to display 5 poker cards laid side by side with horizontal margin just like on a poker table. I tried this but I can't make it display:
I also want this to be responsive that is it preserves aspect ratio when resized.
.card {
width: 100%;
height: 100%;
background-size: cover;
}
.is2d .two.hearts {background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgY2xhc3M9ImNhcmQiIGZhY2U9IjJIIiBoZWlnaHQ9IjMuNWluIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB2aWV3Qm94PSItMTIwIC0xNjggMjQwIDMzNiIgd2lkdGg9IjIuNWluIj48c3ltYm9sIGlkPSJTSDIiIHZpZXdCb3g9Ii02MDAgLTYwMCAxMjAwIDEyMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5ZTWlkIj48cGF0aCBkPSJNMCAtMzAwQzAgLTQwMCAxMDAgLTUwMCAyMDAgLTUwMEMzMDAgLTUwMCA0MDAgLTQwMCA0MDAgLTI1MEM0MDAgMCAwIDQwMCAwIDUwMEMwIDQwMCAtNDAwIDAgLTQwMCAtMjUwQy00MDAgLTQwMCAtMzAwIC01MDAgLTIwMCAtNTAwQy0xMDAgLTUwMCAwIC00MDAgLTAgLTMwMFoiIGZpbGw9InJlZCI+PC9wYXRoPjwvc3ltYm9sPjxzeW1ib2wgaWQ9IlZIMiIgdmlld0JveD0iLTUwMCAtNTAwIDEwMDAgMTAwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pbllNaWQiPjxwYXRoIGQ9Ik0tMjI1IC0yMjVDLTI0NSAtMjY1IC0yMDAgLTQ2MCAwIC00NjBDIDIwMCAtNDYwIDIyNSAtMzI1IDIyNSAtMjI1QzIyNSAtMjUgLTIyNSAxNjAgLTIyNSA0NjBMMjI1IDQ2MEwyMjUgMzAwIiBzdHJva2U9InJlZCIgc3Ryb2tlLXdpZHRoPSI4MCIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEuNSIgZmlsbD0ibm9uZSI+PC9wYXRoPjwvc3ltYm9sPjxkZWZzPjxyZWN0IGlkPSJYSDIiIHdpZHRoPSIxNjQuOCIgaGVpZ2h0PSIyNjAuOCIgeD0iLTgyLjQiIHk9Ii0xMzAuNCI+PC9yZWN0PjwvZGVmcz48cmVjdCB3aWR0aD0iMjM5IiBoZWlnaHQ9IjMzNSIgeD0iLTExOS41IiB5PSItMTY3LjUiIHJ4PSIxMiIgcnk9IjEyIiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSJibGFjayI+PC9yZWN0Pjx1c2UgeGxpbms6aHJlZj0iI1hIMiIgc3Ryb2tlPSIjODhmIiBmaWxsPSIjRkZDIj48L3VzZT48dXNlIHhsaW5rOmhyZWY9IiNWSDIiIGhlaWdodD0iMzIiIHg9Ii0xMTQuNCIgeT0iLTE1NiI+PC91c2U+PHVzZSB4bGluazpocmVmPSIjU0gyIiBoZWlnaHQ9IjI2Ljc2OSIgeD0iLTExMS43ODQiIHk9Ii0xMTkiPjwvdXNlPjx1c2UgeGxpbms6aHJlZj0iI1NIMiIgaGVpZ2h0PSI3MCIgeD0iLTM1IiB5PSItMTMxLjIzNCI+PC91c2U+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTgwKSI+PHVzZSB4bGluazpocmVmPSIjVkgyIiBoZWlnaHQ9IjMyIiB4PSItMTE0LjQiIHk9Ii0xNTYiPjwvdXNlPjx1c2UgeGxpbms6aHJlZj0iI1NIMiIgaGVpZ2h0PSIyNi43NjkiIHg9Ii0xMTEuNzg0IiB5PSItMTE5Ij48L3VzZT48dXNlIHhsaW5rOmhyZWY9IiNTSDIiIGhlaWdodD0iNzAiIHg9Ii0zNSIgeT0iLTEzMS4yMzQiPjwvdXNlPjwvZz48L3N2Zz4=')}
<div class="poker is2d">
<div class="middle">
<div class="card two hearts"></div>
<div class="card two hearts"></div>
<div class="card two hearts"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>

As Armedin said, you do not have any content inside your div. Width and height 100% won't do anything.
I suggest you to put the image not as background, as it won't change the dimensions of the div. Use img tag and display: inline; for the card div.
.card {
width: 100%;
height: 100%;
background-size: cover;
display:inline;
}
<div class="poker is2d">
<div class="middle">
<div class="card two hearts"> <img src='data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgY2xhc3M9ImNhcmQiIGZhY2U9IjJIIiBoZWlnaHQ9IjMuNWluIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB2aWV3Qm94PSItMTIwIC0xNjggMjQwIDMzNiIgd2lkdGg9IjIuNWluIj48c3ltYm9sIGlkPSJTSDIiIHZpZXdCb3g9Ii02MDAgLTYwMCAxMjAwIDEyMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5ZTWlkIj48cGF0aCBkPSJNMCAtMzAwQzAgLTQwMCAxMDAgLTUwMCAyMDAgLTUwMEMzMDAgLTUwMCA0MDAgLTQwMCA0MDAgLTI1MEM0MDAgMCAwIDQwMCAwIDUwMEMwIDQwMCAtNDAwIDAgLTQwMCAtMjUwQy00MDAgLTQwMCAtMzAwIC01MDAgLTIwMCAtNTAwQy0xMDAgLTUwMCAwIC00MDAgLTAgLTMwMFoiIGZpbGw9InJlZCI+PC9wYXRoPjwvc3ltYm9sPjxzeW1ib2wgaWQ9IlZIMiIgdmlld0JveD0iLTUwMCAtNTAwIDEwMDAgMTAwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pbllNaWQiPjxwYXRoIGQ9Ik0tMjI1IC0yMjVDLTI0NSAtMjY1IC0yMDAgLTQ2MCAwIC00NjBDIDIwMCAtNDYwIDIyNSAtMzI1IDIyNSAtMjI1QzIyNSAtMjUgLTIyNSAxNjAgLTIyNSA0NjBMMjI1IDQ2MEwyMjUgMzAwIiBzdHJva2U9InJlZCIgc3Ryb2tlLXdpZHRoPSI4MCIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEuNSIgZmlsbD0ibm9uZSI+PC9wYXRoPjwvc3ltYm9sPjxkZWZzPjxyZWN0IGlkPSJYSDIiIHdpZHRoPSIxNjQuOCIgaGVpZ2h0PSIyNjAuOCIgeD0iLTgyLjQiIHk9Ii0xMzAuNCI+PC9yZWN0PjwvZGVmcz48cmVjdCB3aWR0aD0iMjM5IiBoZWlnaHQ9IjMzNSIgeD0iLTExOS41IiB5PSItMTY3LjUiIHJ4PSIxMiIgcnk9IjEyIiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSJibGFjayI+PC9yZWN0Pjx1c2UgeGxpbms6aHJlZj0iI1hIMiIgc3Ryb2tlPSIjODhmIiBmaWxsPSIjRkZDIj48L3VzZT48dXNlIHhsaW5rOmhyZWY9IiNWSDIiIGhlaWdodD0iMzIiIHg9Ii0xMTQuNCIgeT0iLTE1NiI+PC91c2U+PHVzZSB4bGluazpocmVmPSIjU0gyIiBoZWlnaHQ9IjI2Ljc2OSIgeD0iLTExMS43ODQiIHk9Ii0xMTkiPjwvdXNlPjx1c2UgeGxpbms6aHJlZj0iI1NIMiIgaGVpZ2h0PSI3MCIgeD0iLTM1IiB5PSItMTMxLjIzNCI+PC91c2U+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTgwKSI+PHVzZSB4bGluazpocmVmPSIjVkgyIiBoZWlnaHQ9IjMyIiB4PSItMTE0LjQiIHk9Ii0xNTYiPjwvdXNlPjx1c2UgeGxpbms6aHJlZj0iI1NIMiIgaGVpZ2h0PSIyNi43NjkiIHg9Ii0xMTEuNzg0IiB5PSItMTE5Ij48L3VzZT48dXNlIHhsaW5rOmhyZWY9IiNTSDIiIGhlaWdodD0iNzAiIHg9Ii0zNSIgeT0iLTEzMS4yMzQiPjwvdXNlPjwvZz48L3N2Zz4='/></div>
<div class="card two hearts"> <img src='data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgY2xhc3M9ImNhcmQiIGZhY2U9IjJIIiBoZWlnaHQ9IjMuNWluIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB2aWV3Qm94PSItMTIwIC0xNjggMjQwIDMzNiIgd2lkdGg9IjIuNWluIj48c3ltYm9sIGlkPSJTSDIiIHZpZXdCb3g9Ii02MDAgLTYwMCAxMjAwIDEyMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5ZTWlkIj48cGF0aCBkPSJNMCAtMzAwQzAgLTQwMCAxMDAgLTUwMCAyMDAgLTUwMEMzMDAgLTUwMCA0MDAgLTQwMCA0MDAgLTI1MEM0MDAgMCAwIDQwMCAwIDUwMEMwIDQwMCAtNDAwIDAgLTQwMCAtMjUwQy00MDAgLTQwMCAtMzAwIC01MDAgLTIwMCAtNTAwQy0xMDAgLTUwMCAwIC00MDAgLTAgLTMwMFoiIGZpbGw9InJlZCI+PC9wYXRoPjwvc3ltYm9sPjxzeW1ib2wgaWQ9IlZIMiIgdmlld0JveD0iLTUwMCAtNTAwIDEwMDAgMTAwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pbllNaWQiPjxwYXRoIGQ9Ik0tMjI1IC0yMjVDLTI0NSAtMjY1IC0yMDAgLTQ2MCAwIC00NjBDIDIwMCAtNDYwIDIyNSAtMzI1IDIyNSAtMjI1QzIyNSAtMjUgLTIyNSAxNjAgLTIyNSA0NjBMMjI1IDQ2MEwyMjUgMzAwIiBzdHJva2U9InJlZCIgc3Ryb2tlLXdpZHRoPSI4MCIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEuNSIgZmlsbD0ibm9uZSI+PC9wYXRoPjwvc3ltYm9sPjxkZWZzPjxyZWN0IGlkPSJYSDIiIHdpZHRoPSIxNjQuOCIgaGVpZ2h0PSIyNjAuOCIgeD0iLTgyLjQiIHk9Ii0xMzAuNCI+PC9yZWN0PjwvZGVmcz48cmVjdCB3aWR0aD0iMjM5IiBoZWlnaHQ9IjMzNSIgeD0iLTExOS41IiB5PSItMTY3LjUiIHJ4PSIxMiIgcnk9IjEyIiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSJibGFjayI+PC9yZWN0Pjx1c2UgeGxpbms6aHJlZj0iI1hIMiIgc3Ryb2tlPSIjODhmIiBmaWxsPSIjRkZDIj48L3VzZT48dXNlIHhsaW5rOmhyZWY9IiNWSDIiIGhlaWdodD0iMzIiIHg9Ii0xMTQuNCIgeT0iLTE1NiI+PC91c2U+PHVzZSB4bGluazpocmVmPSIjU0gyIiBoZWlnaHQ9IjI2Ljc2OSIgeD0iLTExMS43ODQiIHk9Ii0xMTkiPjwvdXNlPjx1c2UgeGxpbms6aHJlZj0iI1NIMiIgaGVpZ2h0PSI3MCIgeD0iLTM1IiB5PSItMTMxLjIzNCI+PC91c2U+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTgwKSI+PHVzZSB4bGluazpocmVmPSIjVkgyIiBoZWlnaHQ9IjMyIiB4PSItMTE0LjQiIHk9Ii0xNTYiPjwvdXNlPjx1c2UgeGxpbms6aHJlZj0iI1NIMiIgaGVpZ2h0PSIyNi43NjkiIHg9Ii0xMTEuNzg0IiB5PSItMTE5Ij48L3VzZT48dXNlIHhsaW5rOmhyZWY9IiNTSDIiIGhlaWdodD0iNzAiIHg9Ii0zNSIgeT0iLTEzMS4yMzQiPjwvdXNlPjwvZz48L3N2Zz4='/></div>
<div class="card two hearts"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>
Edit: If you do not want to use img you can put the img to invisible and then use the background image as the div would still have the dimensions of the img tag inside. Not a good solution, but it would work.

Learn flex or grid; both very useful for things like this.
Flex example:
html, body {
height: 100%;
margin: 0;
}
.card {
border: 1px black solid;
border-radius: 15px;
flex-grow: 1;
padding: 5px;
margin: 5px;
}
.container {
display: flex;
height: 100%;
}
<div class="container">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
</div>

scrollreveal.js and flexbox

I'm experiencing an issue with using scrollreveal.js together with flexbox.
I've created a few two-column rows along the page using display flex and when trying to reveal each column separately with the scrollreveal reference only one of them are working.
Any workaround while still being able to maintain the flex attributes?
HTML
<div class="grid">
<div class="column __50 __reveal">one</div>
<div class="column __50 __reveal">two</div>
</div>
CSS
.grid {
display: flex;
}
.column.__50 {
width: 50%;
}
JS
window.sr = ScrollReveal({
distance: '30px',
duration: 1000,
scale: 0
});
sr.reveal('.__reveal');

If I understand you clearly:
Given- the existing code
When- page is scrolled
Then- Columns should scroll into view
I've provided a snippet that shows that it does work based on your code but you have to give enough space for the scrollreveal effect to take place.
TO TEST
Add a div that takes up the space from the initial view.
Add a height to the .column.__50 class so you can see it in action.
Add a border so you can see how they are placed, you can always comment the border out after you no longer need it. Good practice for 'debugging' and visualizing your divs.
window.sr = ScrollReveal({
distance: '30px',
duration: 1000,
scale: 0
});
sr.reveal('.__reveal');
.grid {
display: flex;
}
.column.__50 {
width: 50%;
height: 800px;
border: 2px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollReveal.js/4.0.0-beta.25/scrollreveal.js"></script>
<div class="grid">
<div class="column __50 ">
No class="__reveal 1"
</div>
<div class="column __50 ">
No class="__reveal 2"
</div>
</div>
<div class="grid">
<div class="column __50 __reveal">
one
</div>
<div class="column __50 __reveal">
two
</div>
</div>

As I understand, You have to pass a sequence interval (in milliseconds) to the reveal() method, making sequenced animations a breeze.
sr.reveal('.__reveal', 300);
You can read the documentation from this reference link
Stack Snippet
window.sr = ScrollReveal({
distance: '30px',
duration: 1000,
scale: 0
});
sr.reveal('.__reveal', 300);
.grid {
display: flex;
font: 13px Verdana;
flex-wrap: wrap;
}
.column.__50 {
width: 50%;
height: 100px;
background: red;
border: 8px solid #ffffff;
border-radius: 20px;
padding: 20px;
color: #fff;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<div class="grid">
<div class="column __50 __reveal">one</div>
<div class="column __50 __reveal">two</div>
<div class="column __50 __reveal">three</div>
<div class="column __50 __reveal">four</div>
</div>

Set Columns to be Equal Height with Bootstrap.

This is how my webpage is currently looking:
And what I want is for the height of box 1 to be equal to be the height of box 3, if there was more text to be added to box 1 or 3 etc (and the same for boxes 2 and 4, at the same time).
I also want the length of which ever side is shorter, to be extended so that it is the same length of the longer side, resulting in both sides (green box and 4 boxes combined) having the same height.
More basically: Boxes 1, 2, 3 and 4 all have the same height. The 4 boxes and green box both extend downwards if necessary to the same height, so that the green box's height is roughly double the height of one smaller box.
This is my code currently:
<div class="container">
<div class="row">
<div class="col-xs-6" id="big-box">
<div class="big-box" style="/*INSERT STYLE EFFECTS HERE*/" id="big-box"> /*INSERT BIG PARAGRAPH HERE*/
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-6">
<div class="mini-box" id="firstBox">1</div>
</div>
<div class="col-xs-6">
<div class="mini-box" id="secondBox">2</div>
</div>
<div class="col-xs-6">
<div class="mini-box" id="thirdBox">3</div>
</div>
<div class="col-xs-6">
<div class="mini-box" id="fourthBox">4</div>
</div>
</div>
</div>
</div>
</div>
With some basic CSS to change the looks of the text and background colour etc.
I have tried playoing around with Javascript, Bootstrap, and CSS properties to try and make this possible, but so far nothing has worked. Any help?
Thanks in advance

I personally don't like the bootstrap class names but that is beside the point. So I think you need to change the CSS:
.row {
position: relative; // set bounds for mini-box absolute.
}
.mini-box {
position: absolute;
top: 0px;
bottom: 0px;
}

I'm not a big fan of bootstrap so i have a alternative,
flexbox. the parent has a height: 200px; were every child in that wil align too but i couldn't fix it with a second child with in the row. so i fixed it with height: 95px; because of the 10px margin
.parent {
align-items: flex;
display: flex;
height: 200px;
}
row {} .child1 {
background-color: green;
color: #fff;
width: 300px;
margin: 0 10px;
}
.child2 {
background-color: grey;
color: #fff;
margin: 0 10px 10px;
height: 95px;
}
.child3 {
background-color: red;
color: #fff;
margin: 0 10px;
height: 95px;
}
.child4 {
background-color: pink;
color: #fff;
margin: 0 10px 10px;
height: 95px;
}
.child5 {
background-color: black;
color: #fff;
margin: 0 10px;
height: 95px;
}
<div class="parent">
<div class="child1">text big</div>
<div class="row">
<div class="child2">text 1</div>
<div class="child3">text 2</div>
</div>
<div class="row">
<div class="child4">text 3</div>
<div class="child5">text 4</div>
</div>
</div>
css tricks for more info over flexbox

Center two divs, with a max-width: 1224px, within a 100% width container

Note: I am unable to edit the HTML, so I have to find a workaround.
HTML:
<div id="container">
<div id="breadcrumbAds">...</div>
<div id="breadcrumbWrapper">...</div>
<div id="containerTopParsys">...</div>
<div id="leftColWrapper" class="column663Wrapper">...</div>
<div id="rightColWrapper" class="rightColumn663Wrapper">...</div>
<div style="clear:both;"></div>
<div id="containerBottomParsys">...</div>
<div style="clear:both;"></div>
<div id="bgpromo">...</div>
<div style="clear:both;">...</div>
<div style="clear:both;"></div>
</div>
The issue is that all of the divs inside #container, EXCEPT for #leftColWrapper and #rightColWrapper, need to be 100% width of #container, but #leftColWrapper and #rightColWrapper need to be stacked next to each other and centered (together) within the 100% #container, with a max-width of 1224px.
I tried utilizing the following jQuery to add a wrapper div around #left... and #right..., but it ended up grabbing the ads in those containers and placing them in the component where the JS for the page is stored.
(function($) {
$("#leftColWrapper, #rightColWrapper").wrapAll("<div class=\"colWrapper\" />");
})(jQuery);
I either need another solution to wrap those two divs together, so that I can set a max-width of 1224px and center them, or I need to know why this jQuery is picking up those ads and duplicating them within the JS component.

#container{
text-align: center;
font-size: 0;
}
#container > div{
outline: 1px solid #333;
display: inline-block;
min-height: 10px;
text-align: left;
width: 100%;
font-size: 14px;
}
#container #leftColWrapper, #container #rightColWrapper{
width: 50%;
max-width: 612px;
}
<div id="container">
<div id="breadcrumbAds">...</div>
<div id="breadcrumbWrapper">...</div>
<div id="containerTopParsys">...</div>
<div id="leftColWrapper" class="column663Wrapper">width: 50%;<br>
max-width: 612px;</div><div id="rightColWrapper" class="rightColumn663Wrapper">width: 50%;<br>
max-width: 612px;</div>
<div style="clear:both;"></div>
<div id="containerBottomParsys">...</div>
<div style="clear:both;"></div>
<div id="bgpromo">...</div>
<div style="clear:both;">...</div>
<div style="clear:both;"></div>
</div>

Nicescroll 3 - Vertical scroll after horizontal scrolling ends

I'm trying to make a simple page where there are several rows of images, each one with a horizontal scrolling (using Nicescroll 3).
Using the mouse, when the horizontal scrolling of the row is finished, the mouse wheel has no function. What I wanted to do is that the page continued scrolling vertically after the horizontal scrolling has finished.
My code:
HTML:
<div id="main-content">
<div class="row">
<div class="square-container">
<div class="square"></div>
</div>
<!-- several other square-container divs -->
<div class="square-container">
<div class="square"></div>
</div>
</div>
<div class="row">
<!-- several other square-container divs -->
</div>
<!-- several other rows -->
</div>
</div>
CSS:
#main-content{
min-height: 100%;
height: auto;
}
#main-content > .row {
overflow-x:scroll;
overflow-y:hidden;
white-space:nowrap;
}
.square-container {
float:none;
display:inline-block;
margin: 20px 30px 5px 30px;
}
.square{
height: 100px;
width: 100px;
border: 1px solid black;
}
Here's my Fiddle

Thanks for feedback.
Added to TODO list.
Issue opened -> https://github.com/inuyaksa/jquery.nicescroll/issues/451