grid item auto stretch
Hi guys, I want the height of grid item fit-content but it auto stretch. I use
align-self: start for grid item but it does not work. Can anyone help me explain why? Here is my css container
```css
.container{
display: grid;
grid-template-columns: repeat(3, 1fr);...
Div Background Images & Contain/Cover
Hi, I'm having some problems with the whitespace appearing on these Card elements I'm using. When the browser window is tall or wide, there is white space showing on either side. I attempted using 'cover' in the third image here, but it's cropping off the important information.
Trying to find a way to make the cards responsive while keeping the aspect ratio and also not showing the white space. I added a blue 2px dotted outline around the 4 section grid. The red 2px dotted outline shows the Box that contains the three cards with the image. The yellow 2px dotted outline shows the three cards within that.
The final image attached is the design file from Figma....
Advice on making this widget better
Hey guys! I'm making a book "slideshow" on Google Earth and just realized it gives me the option to customize the description widget (top right corner) with HTML and CSS.
I'm pretty good at programming but not quite good at designing. Any design ideas on how to incorporate the location, quote, and anything else that could make it look nice?
Thanks!...
struck on flex with image
I had a image and an paragraph but the paragraph is just one line and the height of the image is so long , I added a flex on it so it can come up with side by side , I am struck at how to reduce the height of the image so that it can be properly aligned with paragraph ... Exactly I want to make as the picture below here is the codepen link https://codepen.io/GOPI-CHAND-SADINENI/pen/dyxbLbb
background fontstyle black index number inside flex-col container
So what I'm trying to achieve is aligning an index number with lowered opacity into the center of a flex parent container.
This ain't working though properly.
Therefore I tried troubleshooting by adding , without any success though.
...
How to approach the text highlight with a vector.
I want it to wrap with the text.
Tried with absolute positioning but it's not working
Text: Comment fonctionne la cagnotte qui a du coeur ?...
In grid of 3 items keep middle item strictly centered
Image of desired result attached.
I have container with 3 items. I want middle item to always be centered vertically and other two items to extend outward. What are possible solutions for this?
I tried to approach it with flex and
justify-content: center, but then having more text in bottom item automatically shifts all 3 items up, so middle item is no longer centered vertically....