Image's height increases when inside flex container - javascript

When I change the style of div.container to display: flex, the images height increases. How do I stop this from happening?
Before:
$('.text').prev('img').css('height',$('.text').outerHeight());
div.container {
border: 1px solid;
}
img {
float: left;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div class="container">
<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzg2Mjg1OTk0NF5BMl5BanBnXkFtZTcwMjQ4MTA3Mw##._V1_SX300.jpg" alt="RED" />
<div class="text">
<h2>Red</h2>
<p>When his peaceful life is threatened by a high-tech assassin, .</p>
</div>
</div>
After:
$('.text').prev('img').css('height',$('.text').outerHeight());
div.container {
border: 1px solid;
display: flex;
}
img {
float: left;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div class="container">
<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzg2Mjg1OTk0NF5BMl5BanBnXkFtZTcwMjQ4MTA3Mw##._V1_SX300.jpg" alt="RED" />
<div class="text">
<h2>Red</h2>
<p>When his peaceful life is threatened by a high-tech assassin, .</p>
</div>
</div>


A display: flex element will have the style align-items: stretch by default. You can change that to align-items: flex-start to avoid your child elements matching the height of their tallest sibling.

Related

Unable to make responsive aligment

Screenshot (The layout i look for) :
My codes
body {
background: #000000 50% 50%;
overflow-x: hidden;
overflow-y: hidden;
}
.video{
margin: 50px 20px;
display: grid;
place-items: center;
height: 80vh;
}
.left {
text-align: left;
}
.right {
text-align: right;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,minimal-ui">
</head>
<body>
<div class="container">
<div class="left">
<p style="color: blue;">Title</p>
<img src="https://place-hold.it/336x280" /> <br>
<p style="color: blue;">Title</p>
<img src="https://place-hold.it/280x500" />
</div>
<div class="video">
<p style="color: blue;">Title</p>
<img src="https://place-hold.it/500x500" />
</div>
<div class="right">
<p style="color: blue;">title</p>
<img src="https://place-hold.it/336x280" /> <br>
<p style="color: blue;">Title</p>
<img src="https://place-hold.it/280x500" />
</div>
</div>
</body>
My current code : Works fine with large desktop, big screen and resolution
But,
When i check it with small desktop, mobile and small resolution screen, than the layout getting missed up.
How to i make this responsive?

Removed most of the code from your CSS and used flex-wrap to wrap the divs if screen shrinks and added a justify-content:space-between for the space.
Change:added button inside video div since video itself is a div i gave it display:flex and changed the flex-direction:column align-items to center them and gap:30px between p img button
body {
background: #000000 50% 50%;
}
.container {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.video {
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
}
.vid-btn {
padding: 20px 150px;
}
<div class="container">
<div class="left">
<p style="color: blue;">Title</p>
<img src="https://place-hold.it/336x280" /> <br>
<p style="color: blue;">Title</p>
<img src="https://place-hold.it/280x500" />
</div>
<div class="video">
<p style="color: blue;">Title</p>
<img src="https://place-hold.it/500x500" />
<button class="vid-btn">Button</button>
</div>
<div class="right">
<p style="color: blue;">Title</p>
<img src="https://place-hold.it/336x280" />
<p style="color: blue;">Title</p>
<img src="https://place-hold.it/280x500" />
</div>
</div>

How to align images and text together in a grid format

I have a profile image with a text next to it. I'm trying to format it in such a way, that there is a profile image with a text next to it which follows that in a grid format.
I'm not really handy in CSS, so aligning items is not really my thing XD. Any help would be appreciated.
Here's the html code.
<div class="col-sm-3">
<div class="cardearnings" style="height:89%;">
<div class="card-body">
<h2 class="card-title">Activity</h2>
<div class="contents">
<img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg" style="width:70px; height:70px;" class="image--cover"><i>Someone followed you</i>
<img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg" style="width:70px; height:70px;" class="image--cover"><i>Me followed you</i>
</div>
</div>
</div>
</div>
Heres the CSS
.image--cover {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
object-position: center right;
}
This is how it currently looks

Adding to above answer. We can also use flexbox property of CSS in order to achieve such layout.
Please follow below code snippets for reference:
<!DOCTYPE html>
<html>
<head>
<!-- CSS style -->
<style>
.container1 {
display: flex;
}
.container2 {
display: flex;
}
p {
margin-left: 10px;
}
img {
margin-top: 5px;
}
</style>
</head>
<body>
<div class="container1">
<img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg"
style="width:70px;
height:70px;" class="image--cover">
<p> Someone followed you </p>
</div>
<div class="container2">
<img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg"
style="width:70px;
height:70px;" class="image--cover">
<p> Me followed you </p>
</div>
</body>
</html>
References:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/#background
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

If i undesrtand you correctly:
.card-body {
display: grid;
justify-items: center;
}
.contents {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 1em;
}
.image--cover {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
object-position: center right;
}
<div class="col-sm-3">
<div class="cardearnings" style="height:89%;">
<div class="card-body">
<h2 class="card-title">Activity</h2>
<div class="contents">
<img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg" style="width:70px; height:70px;" class="image--cover">
<i>Someone followed you</i>
<img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg" style="width:70px; height:70px;" class="image--cover">
<i>Me followed you</i>
</div>
</div>
</div>
</div>

Boxes animate to the bottom left when browser shrinks while maintaining a consistent size?

I want to make a row of 4 boxes animate to the bottom left of the web page when the browser shrinks while maintaining a consistent size relative to the browser's size. Please observe this example from a website's homepage: (scroll down to the "Say Hello To Your New Tribe" section just below the hero image).
In my code, the boxes become skinnier and remain inline without moving to the bottom left before eventually stacking at a browser screen width of < 600px. I applied a curve bezier CSS animation to the boxes earlier and it did not achieve the effect I was looking for.
I'm looking for that bootstrap quality of "stacking the boxes" with the added effect of gliding them to the bottom left when the browser shrinks. Of course, when the browser grows to fill the screen, the boxes glide to the upper right and display inline again. Will somebody please tell me what I'm doing wrong and what I need to achieve this effect?
Thank you.
Criteria:
1) All 4 boxes must begin inline and on the same row.
2) When the browser shrinks, the boxes must glide to the bottom left.
3) All boxes must maintain a consistent size relative to the browser's size without spilling its content.
4) Please follow this example here.
/* Float four columns side by side */
.column {
float: left;
width: 25%;
padding: 20px;
}
/* Remove extra left and right margins, due to padding */
.row {margin: 0 -5px;}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive columns */
#media screen and (max-width: 600px) {
.column {
width: 100%;
display: block;
margin-bottom: 20px;
}
}
/* Style the counter cards */
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
padding: 16px;
text-align: center;
border: 1px solid #97c3d4;
background-color: #fff;
}
<div class="row allyu-support-groups">
<div class="column support-group">
<div class="card">
<img src="https://dev.allyu.org/wp-content/themes/thrive-nouveau-child/img/avatar.svg" class="support-group-avatar" />
<h3>Card 5</h3>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
<div class="column">
<div class="card">
<img src="https://dev.allyu.org/wp-content/themes/thrive-nouveau-child/img/avatar.svg" class="support-group-avatar" />
<h3>Card 6</h3>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
<div class="column">
<div class="card">
<img src="https://dev.allyu.org/wp-content/themes/thrive-nouveau-child/img/avatar.svg" class="support-group-avatar" />
<h3>Card 7</h3>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
<div class="column">
<div class="card">
<img src="https://dev.allyu.org/wp-content/themes/thrive-nouveau-child/img/avatar.svg" class="support-group-avatar" />
<h3>Card 8</h3>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
</div>
</div>

See this snippet, Right now I implement animate(bottom to upper) on pageload. You can change the event as per your requirement. Let me know if you have any query.
<!DOCTYPE html>
<html>
<head>
<title>clientell</title>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div class="row allyu-support-groups">
<div class="column support-group">
<div class="card">
<img src="https://dev.allyu.org/wp-content/themes/thrive-nouveau-child/img/avatar.svg" class="support-group-avatar" />
<h3>Card 5</h3>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
<div class="column">
<div class="card">
<img src="https://dev.allyu.org/wp-content/themes/thrive-nouveau-child/img/avatar.svg" class="support-group-avatar" />
<h3>Card 6</h3>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
<div class="column">
<div class="card">
<img src="https://dev.allyu.org/wp-content/themes/thrive-nouveau-child/img/avatar.svg" class="support-group-avatar" />
<h3>Card 7</h3>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
<div class="column">
<div class="card">
<img src="https://dev.allyu.org/wp-content/themes/thrive-nouveau-child/img/avatar.svg" class="support-group-avatar" />
<h3>Card 8</h3>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
</div>
</div>
<style>
/* Float four columns side by side */
.column {
float: left;
width: 25%;
padding: 20px;
}
/* Remove extra left and right margins, due to padding */
.row {margin: 0 -5px;}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive columns */
#media screen and (max-width: 600px) {
.column {
width: 100%;
display: block;
margin-bottom: 20px;
}
}
/* Style the counter cards */
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
padding: 16px;
text-align: center;
border: 1px solid #97c3d4;
background-color: #fff;
}
.row.allyu-support-groups .column {
display: inline-block;
text-align: center;
margin: 1%;
padding: 0;
width: calc(25% - 2%);
}
.row.allyu-support-groups .column img {
width: 100%;
height: auto;
max-width: 100px;
}
.row.allyu-support-groups{position: relative;top:300px;}
</style>
<script>
$(document).ready(function(){
$(".row.allyu-support-groups").animate({top: "0px"});
});
</script>
</body>
</html>

How to push all lower elements down when expanding a div?

I have a video iframe that expands when clicking a button. This is contained inside of a header for the page which has 100vh height (full screen). When the video expands, it pushes the rest of the content in the header up in order to have everything vertically centred within the header. Instead, I would like to increase the height of the header div beyond 100vh to 100vh plus the video height. However, the code I have so far isn't working.
LINK TO PAGE
$(document).ready(function(){
$(".video" ).click(function() {
$(".header").height("+=315");
document.getElementById("video__player").style.maxHeight = "50vw";
document.getElementById("video-btn").style.display = "none";
});
});
.header {height: 100vh; width: 100vw;}
.header__content {height: calc(100vh); width: 100%; display: flex; display: -webkit-flex;}
.header__content--container {margin: auto; display: flex; display: -webkit-flex; flex-direction: column; -webkit-flex-direction: column;}
.video__container {text-align: center;}
.video {color: gray; width: 100%; height: auto;}
.play-btn {width: 20px; height: 20px; vertical-align: middle;}
.video__player {overflow: hidden; width: 300px; max-height: 0px; transition: max-height 0.5s ease-in-out; -webkit-transition: max-height 0.5s ease-in-out; margin: auto;}
<div class="header" id="header">
<div class="header__menu">
<div class="header__menu--left">
<div class="logo">
<img class="logo__full img__full" src="assets/kbd-logo-english.svg">
<img class="logo__mobile img__full" src="assets/kbd-logo-mobile.svg">
</div>
</div>
<div class="header__menu--right">
<div class="phone">
<h9 class="strong" style="color: #5CBDE1;">1-855-636-0002</h9>
</div>
<a class="quote menu__quote clickable" href="https://pt.atrium-uw.com/Quote?Id=81" style="margin: 0;">
<h8 class="strong" style="margin: auto;">Get your quote</h6>
</a>
<div class="language">
<h9 class="clickable strong" style="color: #5CBDE1;">FR</h9>
</div>
</div>
</div>
<div class="header__content">
<div class="header__content--container animatedParent animateOnce">
<h1>Hi, we're KBD Insurance.</h1>
<br>
<h2 class="text__center">Life is chaotic. Insurance doesn't have to be.</h2>
<br><br>
<div class="quote__wrapper header__quote--wrapper">
<a class="quote menu__quote clickable animated fadeInDownShort slow" href="https://pt.atrium-uw.com/Quote?Id=81" style="margin: 0; height: 60px;">
<h8 class="strong" style="margin: auto;">Get your quote</h6>
</a>
</div>
<br><br>
<div class="video__container animated fadeInDownShort slow">
<a class="h6 video clickable" id="video-btn">Watch the video <img class="play-btn" src="assets/kbd-icon-play.svg"></a>
</div>
<div class="video__player" id="video__player">
<iframe src="https://www.youtube.com/embed/SIaFtAKnqBU" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>

The margin of .header__content--container is currently set to auto. Change the margin to some hard-coded value like, for example, 300px, and it works like you want it to.
EDIT: the requested function
function setMarginTop() {
const $header = $(".header__content--container");
const marginTop = $header.css("margin-top");
$header.css("margin-top", marginTop);
}

How can I break down table's cells on small screens?

Here is my code:
.wrapper {
border: 1px solid red;
padding-left: 20px;
}
.table {
display: table;
width: 100%;
}
.table > div {
display: table-cell;
border: 1px solid green;
min-width: 190px;
}
<div class="wrapper">
<div class="table">
<div class="share_edit_flag">
<span>share</span>
<span>edit</span>
<span>close</span>
</div>
<div class="editor">
edited May 21 16 at 11:58
<div class="profile">
<img src="#" />
Rory O'Kane
<b>12.6k</b>
<!-- I don't have any badge in my website -->
</div>
</div>
<div class="author">
asked May 21 16 at 11:51
<div class="profile">
<img src="#" />
vasanthkumarmani
<b>1</b>
<!-- I don't have any badge in my website -->
</div>
</div>
</div>
</div>
Please resize the page. As you see, green box comes out of the red box on a small screen.
Anyway I want to break down both div.author and div.editor together when the parent's width is smaller than childs' width. Is doing that possible?

You can use display: flex instead of display: table.
To wrap editor and author divs together you can use the script below. It will be working even if you put your table into a div with restricted width.
JSFiddle
$(window).resize(function() {
setTableDirection();
});
setTableDirection();
function setTableDirection() {
var $table = $('.table');
if ($table.width() <= 580) {
$table.css('flex-direction', 'column');
} else {
$table.css('flex-direction', 'row');
}
}
.wrapper {
border: 1px solid red;
padding-left: 20px;
}
.table {
display: flex;
flex-wrap: wrap;
}
.table>div {
border: 1px solid green;
min-width: 190px;
flex-grow: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="table">
<div class="share_edit_flag">
<span>share</span>
<span>edit</span>
<span>close</span>
</div>
<div class="editor">
edited May 21 16 at 11:58
<div class="profile">
<img src="#" />
Rory O'Kane
<b>12.6k</b>
<!-- I don't have any badge in my website -->
</div>
</div>
<div class="author">
asked May 21 16 at 11:51
<div class="profile">
<img src="#" />
vasanthkumarmani
<b>1</b>
<!-- I don't have any badge in my website -->
</div>
</div>
</div>
</div>

What about this?
.wrapper {
border: 1px solid red;
padding-left: 20px;
}
.table {
display: table;
width: 100%;
}
.table > div {
display: table-cell;
border: 1px solid green;
min-width: 190px;
}
#media screen and (max-width: 480px) {
.table > div {
display: table-cell;
border: 1px solid green;
min-width: 190px;
float:left;
}
.table > div:nth-child(1){
clear: both;
}
}
<div class="wrapper">
<div class="table">
<div class="share_edit_flag">
<span>share</span>
<span>edit</span>
<span>close</span>
</div>
<div class="editor">
edited May 21 16 at 11:58
<div class="profile">
<img src="#" />
Rory O'Kane
<b>12.6k</b>
<!-- I don't have any badge in my website -->
</div>
</div>
<div class="author">
asked May 21 16 at 11:51
<div class="profile">
<img src="#" />
vasanthkumarmani
<b>1</b>
<!-- I don't have any badge in my website -->
</div>
</div>
</div>
</div>
I used media queries and also nth-child of your table > div, I supposed it go overflow under 480px. I think is better for you to use display flex or bootstrap grid system . For evry question I'm here.I hope you understand and also sorry for my english :)
Here a fiddle you can resize and see the difference : here

Categories