I have a flex container with a picture and text beside it. This container is centered on the page. When I shrink the page causing the text to word-wrap, the container no longer looks centered because the text div doesn't shrink down to the size of the word wrapped text.
Is it possible to shrink the text div when word wrap occurs?
See JSFiddle here.
It might be tough to see what I'm talking about with the snippet because you might not be able to shrink the page enough to see the wrap happen. Better off looking at the jsfiddle.
.container,
.content {
display: flex;
justify-content: center;
}
.picture {
height: 130px;
width: 130px;
background-color: blue;
}
.text {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 10px;
}
.name {
font-size: 22px;
}
<div class="container">
<div class="content">
<div class="picture"></div>
<div class="text">
<div class="name">John Jacobjingleheimer</div>
</div>
</div>
</div>
I'm not sure this is the answer you're looking for but from reading what you wrote I think you're looking for
margin-left: auto;
margin-right: auto;
The above margin-left: and margin-right: with the auto value will cause the browser window to automatically calculate the left and right margin of the
.text {
display: flex;
margin-left: auto;
margin-right: auto;
flex-direction: column;
justify-content: center;
}
Related
So, I was doing this Frontend Mentor challenge (at https://www.frontendmentor.io/challenges/notifications-page-DqK5QAmKbC) while I had run into this problem - I couldn't align the "Chess" image in the "Kimberly Smith" notification to the right.
Here is all the code I have written related to the notification:
The HTML:
<div class="notification">
<div class="notification__container">
<img src="assets\images\avatar-kimberly-smith.webp" class="image" />
<div class="notification-formatting">
<div class="align-right">
<div><strong>Kimberly Smith</strong> commented on your picture
<br /><time>1 week ago</time>
</div>
<div class="img-container"><img src="assets/images/image-chess.webp" alt="Chess" class="image chess"></div>
</div>
</div>
</div>
</div>
The CSS:
img,
picture,
svg,
video {
display: block;
max-width: 100%;
}
.notification {
background-color: #f6fafd;
display: flex;
align-items: center;
}
.notification__container {
display: flex;
align-items: center;
}
.image {
display: flex;
align-items: center;
width: 50px;
margin-right: 5px;
}
.notification_image--main-message-content {
display: flex;
}
.align-right {
display: flex;
}
Here is the Output
Here is the Expected Output
Here are the solutions I have tried:
display: block;
margin-left: auto;
float: right;
text-align: right;
display: flex;
justify-content: right;
Here is the live website: https://prismatic-capybara-4ba8da.netlify.app/
Here is the GitHub Repository for deeper reference: https://github.com/vishalscodes/frontendmentor-notifications-page
Thank You.
It's possible to massively simplify your markup as follows:
Class notification. This is a flex box so items will try to fit side by side on one line. As the user's image, the main text and the 'chess' image are all on one line we don't need to add any more divs to this. We can just insert them directly, especially as you've made all img elements as blocks (this is always a good move imho).
Class notification-formatting is used to isolate the text so that the text and time stack on top of each other. As this is a flex item, this will try to shrink to fit the content.
We don't need a wrapper around the image with the chess class as that's already a block level element so to get that to move to the right I've added an align-right class. That simply has an inline-margin of auto 0. This is a fairly standard way of moving elements to the right of the page.
Some good resources here:
Complete guide to flexbox on css tricks
Margin on css tricks
Useful css reset by Kevin Powell (e.g. setting img to block)
Any questions just drop me a comment and I'll try help out.
img,
picture,
svg,
video {
display: block;
max-width: 100%;
}
.notification {
background-color: #f6fafd;
display: flex;
gap: 5px; /* I've removed the margin-right from your image and set the gap on the parent element so your 'chess' image moves all the way to the right */
}
.image {
width: 50px;
border-radius: 5px;
}
.align-right {
margin-inline: auto 0; /* if we set the right margin to 0 then setting the left margin to 'auto' causes it to expand to fit the available width */
}
.round {
border-radius: 100vw; /* make the radius massive so it defaults to a circle */
}
<div class="notification">
<img src="https://picsum.photos/id/64/50/50" class="image round" />
<div class="notification-formatting">
<strong>Kimberly Smith</strong> commented on your picture
<br /><time>1 week ago</time>
</div>
<img src="https://picsum.photos/id/237/50/50" alt="Chess" class="image align-right">
</div>
Base on your code you can set to
.align-right {justify-content: space-between; width: 100%; display: flex;}
and set 100% width to all parents divs you can see code bellow
img,
picture,
svg,
video {
display: block;
max-width: 100%;
}
.notification {
width: 100%;
background-color: #f6fafd;
display: flex;
align-items: center;
}
.notification-formatting {
width: 100%;
}
.notification__container {
display: flex;
align-items: center;
width: 100%;
}
.image {
display: flex;
align-items: center;
width: 50px;
margin-right: 5px;
}
.notification_image--main-message-content {
display: flex;
}
.align-right {
display: flex;
justify-content: space-between;
width: 100%;
}
<div class="notification">
<div class="notification__container">
<img src="assets\images\avatar-kimberly-smith.webp" class="image" />
<div class="notification-formatting">
<div class="align-right">
<div><strong>Kimberly Smith</strong> commented on your picture
<br /><time>1 week ago</time></div>
<div class="img-container"><img src="assets/images/image-chess.webp" alt="Chess" class="image chess"></div>
</div>
</div>
</div>
</div>
I am looking for a way in which my title text is always centered but letting it wrap on the left instead of the center, here's my markup so far:
.title-container {
height: 100vh;
width: 100vw;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
background-image: linear-gradient(#900, #990);
}
.title-container__text {
flex: 0 1 auto;
font-size: 80px;
color: #ddf;
}
<div class="title-container">
<h1 class="title-container__text">Gran Teatro Sara</h1>
</div>
This maintains the text centered up until the point where the screen size is too small and the text has to wrap, once it wraps the whole text aligns to the left and leaves a big space on the right... I would like to maintain the text wrapping like this, but to have equal space both on the left and the right.
I hope I made myself clear.
I'll explain myself with some visuals, the current behavior of the centering and wrapping goes like so:
The above example works just fine when viewing from big screen sizes
When the screen gets smaller the text wraps as I want, but the text stop being centered. My desired outcome goes like so:
One solution could be to add gutters on either side with flex: 1 and a max-width of your choosing – pixels or percentage, as in this snippet:
.title-container {
height: 100vh;
width: 100vw;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
flex-direction: row;
background-image: linear-gradient(#900, #990);
}
.title-container__text {
flex: 1;
font-size: 80px;
color: #ddf;
}
.gutter {
flex: 1;
max-width: 10%
}
<div class="title-container">
<div class="gutter"></div>
<div class="title-container__text">Gran Teatro Sara</div>
<div class="gutter"></div>
</div>
Add "text-align: center;" to your .title-container CSS.
.title-container {
height: 100vh;
width: 100vw;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
text-align: center;
background-image: linear-gradient(#900, #990);
}
.title-container__text {
flex: 0 1 auto;
font-size: 80px;
color: #ddf;
}
<div class="title-container">
<h1 class="title-container__text">Gran Teatro Sara</h1>
</div>
In REACT, I have three divs that I would like to position side by side, separated by a small margin, and horizontally centered on the screen.
When the screen width becomes too small, I would like the right-most div to move below the first two divs, but still be horizontally centered.
When the screen becomes even smaller, I would like all three divs to be in a column in the center of the screen.
This is easy to achieve with images:
Html (the REACT flavor of html):
<div id='container'>
<img src={image}/>
<img src={image}/>
<img src={image}/>
<div/>
CSS:
#container {
text-align: center;
}
How can this be done with objects that are not imgs?
Welcome to stack overflow, I think what you're looking for is css flexbox https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox.
#container {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.childClass { // you would need to add a className to the child divs
width: // add the width of your divs here, this will force them to wrap
flex-grow: 0;
flex-shrink: 0;
}
I think that should do it, but I highly encourage you to read https://css-tricks.com/snippets/css/a-guide-to-flexbox/ - it's one of the best resources on using flexbox for layouts
//use flexbox for easy structuring html elements
.container {
display: flex;
flex-direction: row;
justify-content: center;
}
.first {
background-color: red;
height: 100px;
width: 100px;
flex-wrap: wrap;
}
.second {
background-color: blue;
height: 100px;
width: 100px;
}
.third {
background-color: yellow;
height: 100px;
width: 100px;
}
.flex-item {
padding: 10px;
margin: 1rem;
}
<div class="container">
<div class="first flex-item">First div</div>
<div class="second flex-item">Second div</div>
<div class="third flex-item">Third div</div>
</div>
for more info on flexbox visit here : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I know this sounds like it's been asked before but I've played around with a lot of techniques I've found from other questions and nothing seems to get the desired effect I need.
I'm trying to make something that will be responsive like this:
Responsive Example gif
I basically need an image to be centered, where the image is at 100% size.
Here is what I tried to get this effect:
I first made a div containing three child divs for "columns". Then inside the center column I made three child divs for "rows". Now I need the image to fill the max width it's allowed while still maintain that square aspect ratio. As well the height of the image should determine the height of the top and bottom rows.
Then it should just be a matter of having the text inside the top and bottom row align to the bottom and top of their divs respectively.
This would look something like this:
HTML Visualization of columns
HTML Visualization of center rows
The issue I'm running into is I can't seem to get the center image to determine the heights of the rows above and below it.
I've tried...
Flexbox
using vh (view height)
and a bit of using calc() but to no luck
Setting aspect ration with padding-top: 100%
What the code looks like
/* .row & .col from materialize.css */
.full {
height: 100vh;
}
.art_top {
height: 10vh;
/* I Don't actually want this fixed though */
padding-bottom: 10px;
display: flex;
}
.art_center {
height: 80vh;
/* I Don't actually want this fixed though */
}
.art_bottom {
height: 10vh;
/* I Don't actually want this fixed though */
padding-top: 10px;
display: flex;
}
#cover_art {
width: 100%;
height: 100%;
background: center / cover no-repeat;
}
#song_name {
align-self: flex-end;
}
#artist_name {
align-self: flex-start;
}
<div class="row">
<div class="col s2 m3 full"></div>
<div class="col s8 m6 full">
<div class="row art_top">
<a id="song_name" class="bold-title"></a>
</div>
<div class="row art_center">
<div id="cover_art"></div>
</div>
<div class="row art_bottom">
<a id="artist_name" class="bold-title"></a>
</div>
</div>
<div class="col s2 m3 full"></div>
</div>
Flexbox makes this kind of layout very straightforward. The trick is selectively allowing items to flex or shrink.
The flex property shorthand takes 3 values for flex-grow, flex-shrink, and flex-basis (the initial width or height depending on flex direction). Just keep clear which divs are serving as flex containers as you get into the details in the layout. It is very common to have divs that are both flex containers and flex items themselves too.
I also recommend using an img element instead of applying the image as a background so you dont have trouble with the aspect ratio in responsive window sizes.
A very nice resource: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
/* .row & .col from materialize.css */
body {
margin: 0;
}
.full {
height: 100vh;
}
.row {
display: flex;
}
.column {
flex: 1 1 auto;
}
.column2 {
background: #b4c2cf;
display: flex;
flex-direction: column;
}
.column1 {
background: #cbb3cc;
}
.column3 {
background: #cbb2b2;
display: flex;
align-items: center;
justify-content: center;
}
.art_top {
flex: 1 0 10vh;
display: flex;
justify-content: flex-start
align-self: flex-end;
}
.art_center {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
}
.art_bottom {
flex: 1 0 10vh;
text-align: right;
}
#cover_art {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
#song_name {
align-self: flex-end;
}
#artist_name {
align-self: flex-start;
}
.bold-title {
display: block;
font-weight: bold;
padding: 10px;
}
.small-box {
background: #8f588c;
height: 100%;
max-height: 70px;
width: 100%;
max-width: 70px;
}
<div class="row full">
<div class="column column1"></div>
<div class="column column2">
<div class="art_top">
<a id="song_name" class="bold-title">My Album Title</a>
</div>
<div class="art_center">
<img id="cover_art" src="https://picsum.photos/400" />
</div>
<div class="art_bottom">
<a id="artist_name" class="bold-title">Artist Name</a>
</div>
</div>
<div class="column column3">
<div class="small-box"></div>
</div>
</div>
I have an element I'd like to be (cross-axis) centered but also 'grow' to a nominal size even with too-little content, BUT ALSO 'shrink' when the width of the page becomes smaller than 350px wide.
HTML
<div class="parent">
<div class="child">
Some content
</div>
</div>
SCSS
.parent {
display: flex;
flex-direction: column;
align-items: center;
.child {
max-width: 350px;
align-self: stretch;
}
}
Adding align-self: stretch; to .child does the job of making it 350px wide, but it seems to negate the align-items: center; in .parent
Is there a way to do this in CSS that I'm missing? Please note that the element can't just be 350px wide all the time - it must also respond to horizontal page resizing as it does in the example fiddle.
Fiddle: https://jsfiddle.net/1uqpxn8L/1/
UPDATED
I think you should use justify-content to h-align child to center.
Please note, when you apply display: flex property to parent, you should apply flex property to child.
.parent {
background: yellow;
display: flex;
flex-direction: column;
align-items: center;
}
.parent .child {
background: black;
color: white;
text-align: center;
flex: 1 1 auto;
width: 100%;
max-width: 350px;
}
<div class="parent">
<div class="child">
I should be 350px wide
<br> and centered in the yellow
<br> unless the page gets smaller,
<br> in which case I should have
<br> 10px padding on either side.
</div>
</div>
Please see the result here, hope this is what you mean: https://jsfiddle.net/1uqpxn8L/11/
You can do something like this.
HTML
<div class="parent">
<div class="child">
Some content
</div>
</div>
SCSS
.parent {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
.child {
width: 350px;
#media(max-width: 350px) {
width: 100%;
}
}
}
.parent {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
background-color: red;
}
.child {
width: 350px;
background-color: yellow;
}
#media(max-width: 350px) {
.child { width: 100%; }
}
<div class="parent">
<div class="child">
Some content
</div>
</div>
So whats happening is I'm using a media query to change the width of the child depending on the width of the browser.
You just need to remove the flex-direction property. Then it's working as you expected. But there will be a problem if you want to display children elements as column manner. The shrinking problem occurs with the flex-direction property or flex-flow:column values as I checked.