I'd like to center a flexibox in browser window, the code in following jsfiddle works without centering, when the browser screen changes, the image and text change in a responsive way,
Fiddle
<!DOCTYPE html><html lang="en"> <head>
<meta charset="UTF-8">
<title></title>
<style>
#container {
display: flex;
/*width: 1400px;*/
margin: auto;
}
#container .video {
border: 5px solid red;
width: 750px;
max-width: 100%;
}
#container .desc {
background-color: blue;
max-width: 100%;
}
</style> </head> <body>
<div id="container">
<div class="video">
<img src="https://futuranexa.files.wordpress.com/2012/09/funny_cow_egg-wallpaper-1920x1080.jpg"
style="max-width: 100%">
</div>
<div class="learn">
<p>
isque perfecto dissentiet cum et, sit ut quot mandamus, ut vim tibique splendide instructior.
<p>
</div>
</div> </body></html>
if I uncomment the /width: 1400px;/ line, the flexibox is centered, but the image and text will not change responsively when browser screen changes, any hint? Thanks,
I think i understand what you're asking for after a few reads so here's what I have done on your coding:
#container {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: auto;
}
#container .video {
border: 5px solid red;
flex-basis: 50%;
max-width: 100%;
}
#container .desc {
background-color: blue;
max-width: 100%;
}
<div id="container">
<div class="video">
<img src="https://futuranexa.files.wordpress.com/2012/09/funny_cow_egg-wallpaper-1920x1080.jpg"
style="max-width: 100%">
</div>
<div class="learn">
<p>
isque perfecto dissentiet cum et, sit ut quot mandamus, ut vim tibique splendide instructior.
<p>
</div>
</div>
Generally to make the text center beneath the image dependant on the size you need to use flex-wrap: wrap; Also you should always use flex-basis: xyz%; instead of width: xyz% give this a try and let me know if it is what you were after.
Related
when i try to change logo size, whole background changes size as well. How to do it correctly? i want logo to be 150px by 150px.
I want to make signup form page that looks something like this
https://cdn.statically.io/gh/TheOdinProject/curriculum/5f37d43908ef92499e95a9b90fc3cc291a95014c/html_css/project-sign-up-form/sign-up-form.png
* {
height: 100vh;
}
.main-container {
display: flex;
}
.image {
background-image: url(https://images.unsplash.com/photo-1584983333849-26ca57622ac2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=656&q=80);
background-size: contain;
background-repeat: no-repeat;
}
.logo {
display: flex;
}
/* .logo img {
height: 140px;
} */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Sign-up Form</title>
</head>
<body>
<main class="main-container">
<div class="image">
<div class="logo">
<img
src="https://logodix.com/logo/20841.png"
alt="logo"
class="flower"
/>
<h1 class="tokyo">Tokyo</h1>
</div>
</div>
<div class="form"></div>
</main>
</body>
</html>
By default, your logo size is too big, and parent div was adjusting according to logo, So if the logo size changes, you whole parent div size will also change. So give them definite value to adjust accordingly
Here some changes i made, if that's helps
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.main-container {
display: flex;
height: 100vh;
}
.logo {
display: flex;
align-items: center;
color: #fff;
}
.logo img {
width: 150px;
}
.left {
display: grid;
place-items: center;
background-image: url(https://images.unsplash.com/photo-1584983333849-26ca57622ac2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=656&q=80);
width: 40%;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.right {
width: 60%;
padding: 40px;
}
<main class="main-container">
<div class="left">
<div class="logo">
<img src="https://logodix.com/logo/20841.png" alt="logo" class="flower" />
<h1 class="tokyo">Tokyo</h1>
</div>
</div>
<div class="right">
<h4>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellendus tempore assumenda error! Laudantium non voluptates provident molestias expedita atque eaque!</h4>
<div class="form"></div>
</div>
</main>
Mockup:
The parent div's height is dynamic; it shrinks to fit the left-hand div (the one containing the text). I'd like the right-hand div (white background, with child img) to stretch vertically to fill the parent div. Unfortunately, height: 100% only works when the parent div's height is statically determined.
Here's what I've got right now:
.container {
background-color: lightgray
}
.blurb {
display: inline-block;
padding: 2em;
}
.decoration {
float: right;
background-color: white;
position: relative;
left: -10px;
height: 100% // XXX does not work
}
<div class="container">
<div class="blurb">
Lorem ipsum...
</div>
<div class="decoration">
✓
</div>
</div>
Answers to similar questions recommend using display: table-cell;, but then you have the issue of making the first (text) div stretch horizontally all the way, which is a different can of worms entirely.
Flexbox can do that.
.container {
background-color: lightgray;
display: flex;
border: 1px solid red;
width: 80%;
margin: 1em auto;
}
.blurb {
flex: 1;
padding: 2em;
}
.decoration {
display: flex;
align-items: center;
background-color: white;
margin-right: 1em;
}
<div class="container">
<div class="blurb">
Lorem ipsum...
</div>
<div class="decoration">
✓
</div>
</div>
<div class="container">
<div class="blurb">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae accusantium, magni commodi repellendus quidem facilis doloremque perspiciatis, ab odio omnis deleniti, obcaecati maiores dolores?
</div>
<div class="decoration">
✓
</div>
</div>
You can achieve it with position property. The parent container set to relative and child decoration set to absolute with top and bottom set to 0.
.container {
background-color: lightgray;
position: relative;
}
.blurb {
display: inline-block;
padding: 2em;
}
.decoration {
float: right;
background-color: white;
position: absolute;
top: 0;
bottom: 0;
right: 10px;
/* Align the content to center */
display:flex;
justify-content:center;
align-items:center;
text-align: center;
}
<div class="container">
<div class="blurb">
Lorem ipsum...
</div>
<div class="decoration">
✓
</div>
</div>
I have the card implemented using bootstrap. But my card size is varying according to the quantity of the text characters.
Details link is varying as well, and when i shrink the browser, it overlap my card text.
How to fix the size of the card text (class: card-text) to avoid the overlap and to avoid different cards size?
<div class="card">
<div class="img-dimension">
<img class="card-img-top" src="img.jpg">
</div>
<div class="card-body">
<h5 class="card-title">title</h5>
<div class="card-text">
<p>
My long card-text....Phasellus a est. Nam eget dui.
Pellentesque ut neque. Nunc sed turpis. Donec mi odio,
faucibus at, scelerisque quis, convallis in, nisi.
</p>
</div>
<div class="text-left pb-2 pt-2">
Details...
</div>
</div>
</div>
My CSS code. I didn't change this bootstrap CSS Code:
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0,0,0,.125);
border-radius: .25rem;
}
.card-body {
flex: 1 1 auto;
padding: 1.25rem;
}
.card-title {
margin-bottom: .75rem;
}
.card-img-top {
width: 100%;
border-top-left-radius: calc(.25rem - 1px);
border-top-right-radius: calc(.25rem - 1px);
}
.text-left {
text-align: left!important;
}
.pb-2, .py-2 {
padding-bottom: .5rem!important;
}
.pt-2, .py-2 {
padding-top: .5rem!important;
}
Text-Overflow
This might help you, you can use it to control the overflow of your text according to your needs.
For example:
.card-text{
font-size:19px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
If you wish to make your website responsive you should try using #media rule
in which you can specify the exact changes according to the resolution.
Have a look at this link for #media rule.
For example: -->Hide an element when the browser's width is 600px wide or less:
#media screen and (max-width: 600px) {
div.example {
display: none;
}
}
I hope this can help you.
I have a div with 2 blocks:
One with informations
Another absolute on the bottom (with variant height)
Problem: I would like to center image on the middle of the div, excluding absolute block.
What I have
What I want
My actual code:
https://jsfiddle.net/ph4kfuy9/5/
.block {
height: 400px;
background-color: #EEE;
margin: 20px 50px;
position: relative;
}
.text {
padding: 20px;
background-color: #CCC;
width: auto;
text-align: center;
width: 50%;
margin: 0 auto;
}
.absolute {
padding: 20px;
background-color: #555;
color: #FFF;
position: absolute;
bottom: 0;
width: 100%;
box-sizing: border-box;
}
<div class="block">
<div class="text">
<p>My text</p>
<div>Lorem Ipsum</div>
<p>Another text</p>
</div>
<div class="absolute">
My absolute block
<p>
Quam ob rem cave Catoni anteponas ne istum quidem ipsum, quem Apollo, ut ais, sapientissimum iudicavit; huius enim facta, illius dicta laudantur. De me autem, ut iam cum utroque vestrum loquar, sic habetote.
</p>
</div>
</div>
Thank
I would use flex for this
.block {
height: 400px;
background-color: #EEE;
margin: 20px 50px;
display:flex; /* make this flex */
flex-direction:column; /* line up chld elements in a column */
}
.text {
padding: 20px;
background-color: #CCC;
width: auto;
width: 50%;
margin: 0 auto;
flex-grow:1; /* make this take up remaining space that footer doesn't */
display:flex; /* make this flex */
flex-direction:column; /* line up chld elements in a column */
justify-content:center; /* vertical centre */
align-items:center; /* horizontal centre */
}
.footer { /* no need to be absolute */
padding: 20px;
background-color: #555;
color: #FFF;
width: 100%;
box-sizing: border-box;
}
<div class="block">
<div class="text">
<p>My text</p>
<div>Lorem Ipsum</div>
<p>Another text</p>
</div>
<div class="footer">
My footer block
<p>
Quam ob rem cave Catoni anteponas ne istum quidem ipsum, quem Apollo, ut ais, sapientissimum iudicavit; huius enim facta, illius dicta laudantur. De me autem, ut iam cum utroque vestrum loquar, sic habetote.
</p>
</div>
</div>
I have this two column layout, made with display: table and display: table-cell, and I want to put in the second column a div with horizontal scroll, but the table expands itself and the scroll goes to the entire page rather then the div.
HTML
<div class="wrapper">
<div id="one"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque convallis finibus metus. Suspendisse commodo rutrum sapien, eu faucibus metus. Nunc elementum augue eu aliquet condimentum.
</div>
<div id="two">
<div id="horizontal">
<img src="https://dl.dropbox.com/u/1218282/slideshow/1.jpg" />
<img src="https://dl.dropbox.com/u/1218282/slideshow/2.jpg" />
<img src="https://dl.dropbox.com/u/1218282/slideshow/3.jpg" />
<img src="https://dl.dropbox.com/u/1218282/slideshow/4.jpg" />
</div>
</div>
</div>
CSS
.wrapper {
display: table;
table-layout: fixed;
}
#one {
display: table-cell;
background-color: gray;
width: 200px;
}
#two {
display: table-cell;
width: 100%;
}
#horizontal {
width: 100%;
overflow-x: scroll;
white-space: nowrap;
}
#horizontal img {
max-width: 200px;
}
Here is the jsfiddle:
http://jsfiddle.net/cUCvY/2597/
In this example I'd like to have the horizontal scroll active on the div with the images inside and not on the page.
Hope i understood correctly:
.wrapper {
display: table;
table-layout: fixed;
width:100%
}
#one {
display: table-cell;
background-color: gray;
width: 200px;
}
#two {
}
#horizontal {
overflow-x: scroll;
white-space: nowrap;
}
#horizontal img {
max-width: 200px;
}
}
#media screen and (max-width: 400px) {
#one {
float: none;
margin-right:0;
width:auto;
border:0;
border-bottom:2px solid #000;
}
}
http://jsfiddle.net/cUCvY/2600/