I have a row with six columns of image and text here: https://i.imgur.com/UKGGCrX.png
I want to align the two-line text (e.g. Resources and Reserves) with "Exploration" and "Geological Data". https://i.imgur.com/Tplzivb.png
Adding a margin below the image doesn't do the trick, nor does adding a margin above the text... also tried setting a min-height for the icon, but that doesn't do it either.
How can I accomplish this?
Using flexbox you can easily align your text on "top".
This is default flexbox behaviour and does align your text on "baseline":
.container{
display: flex;
flex-flow: row nowarp;
}
.text{
max-width: 30px;
}
<html>
<div class="container">
<div class="imgt">
<img src="https://dummyimage.com/20x20">
<div>Some Text</div>
</div>
<div class="imgt">
<img src="https://dummyimage.com/20x20">
<div class="text">Some Long long Text</div>
</div>
</div>
</html>
I assume you have a margin-top: auto; and margin-bottom: auto;, or some flexbox properties like align-items: center; somewhere, that your text gets centered inside the div.
You can use flex styles to obtain your desired results. I created an example showing how the align-items: stretch; property will help with keeping icons/images/and content aligned with siblings.
Live example: https://codepen.io/SROwl/pen/xNrRmw
HTML:
<h3> align content top </h3>
<div class="bucket-row">
<div class="bucket">
<img src="https://dummyimage.com/85x85">
<span>Single Line</span>
</div>
<div class="bucket">
<img src="https://dummyimage.com/85x85">
<span>Double Line Title</span>
</div>
<div class="bucket">
<img src="https://dummyimage.com/85x85">
<span>Double Line Title</span>
</div>
<div class="bucket">
<img src="https://dummyimage.com/85x85">
<span>Single Line</span>
</div>
<div class="bucket">
<img src="https://dummyimage.com/85x85">
<span>Triplen Extra Line Title</span>
</div>
<div class="bucket">
<img src="https://dummyimage.com/85x85">
<span>Double Line Title</span>
</div>
</div>
<h3> align content bottom </h3>
<div class="bucket-row content-end">
<div class="bucket">
<img src="https://dummyimage.com/85x85">
<span>Single Line</span>
</div>
<div class="bucket">
<img src="https://dummyimage.com/85x85">
<span>Double Line Title</span>
</div>
<div class="bucket">
<img src="https://dummyimage.com/85x85">
<span>Double Line Title</span>
</div>
<div class="bucket">
<img src="https://dummyimage.com/85x85">
<span>Single Line</span>
</div>
<div class="bucket">
<img src="https://dummyimage.com/85x85">
<span>Triplen Extra Line Title</span>
</div>
<div class="bucket">
<img src="https://dummyimage.com/85x85">
<span>Double Line Title</span>
</div>
</div>
SCSS:
body {
font-family: sans-serif;
}
.bucket-row {
display: flex;
flex-direction: row;
align-items: stretch;
justify-content: space-between;
width: 600px;
margin-bottom: 40px;
.bucket {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 85px;
background-color: #eee;
padding-bottom: 20px;
img {
margin-bottom: 15px;
}
}
&.content-end {
.bucket {
span {
margin-top: auto;
}
}
}
}
Related
My flex row won't work and I don't know why. I've tried everything. I need the images to be three in a row then break and start a new row. How can I overcome this issue?
.flex-div > div {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: space-between;
}
/*kitchen hacks*/
#kitchen-hacks {
padding-top: 80px;
}
.row-one {
width: 100%;
}
#kitchen-hacks h2 {
text-align: center;
margin-bottom: 15px;
border: solid black;
border-radius: 10px;
}
#kitchen-hacks p {
height: auto;
width: 54%;
margin-top: 5px;
margin-bottom: 50px;
border: solid black;
}
<div class="flex-div">
<div id="kitchen-hacks">
<h2 id="hacks"> Kitchen Hacks</h2>
<div class="row-one" style="order: 4"> <img src="/assets/images/kitchen-hack.one.png" alt="Chalk board on the inside of a shelf with mesuring cups hanong from it"> <p> Place a chalkboard and hangers on the inside of your kitchen shelf to store measuring cups the fashion way. </p> </div>
<div class="row-one" style="order: 2"><img src="/assets/images/kitchen-hack-two.png" alt="A shelf inside a shelf with plates on it"> <p> Store shelves in your shelves to optimize spacce and to better take advantage of the empty space not used. </p> </div>
<div class="row-one" style="order: 3"><img src="/assets/images/kitchen-hack-three.png" alt="Coffe pouring into an ice tray">
<p>Fill an ice tray with coffee so that you can enjoy your coffee without watering it down. </p> </div>
<div class="row-one" style="order: 1"> <img src="/assets/images/kitchen-hack-four.png" alt="Spices attached to the fridge with magnets"> <p> Put magnets under your spices to make them stick to the fridge. That way you can multitask</p>
</div>
<div class="row-one" style="order: 5"><img src="/assets/images/kitchen-hack-five.png" alt="Kitchen sink area"> <p> Using your sink as a temporary chopping surface frees the rest of your counter for other cooking steps. </p> </div>
<div class="row-one" style="order: 6"><img src="/assets/images/kitchen-hack-six.png" alt="An egg in a glass of water and two eggs beside the glass">
<p> Fill a tall glass of water and lower an egg in it. If it sinks to the bottom, the egg is fresh. If it floats to the top, it’s time to toss it </p> </div>
</div>
</div>
Make a parent container that will contain all the images you want in a row and use flex properties.
e.g:
.row-one, .row-two{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
<div class="row-one">
<span>Image 1</span>
<span>Image 2</span>
<span>Image 3</span>
</div>
<br>
<br>
<div class="row-two">
<span>Image 4</span>
<span>Image 5</span>
<span>Image 6</span>
</div>
Try Grids; it is much better to display galleries.
But in this scenario with flex elements, I would use the following approach:
.flex-div{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.flex-div > .image{
width: 30%;
display: flex;
align-items: center;
flex-direction: column;
justify-content: space-around;
background-color: magenta;
}
<div class="flex-div">
<div class="image">
<img src="custom image" alt="custom image" loading="lazy">
<p>Some text</p>
</div>
<div class="image">
<img src="custom image" alt="custom image" loading="lazy">
<p>Some text</p>
</div>
<div class="image">
<img src="custom image" alt="custom image" loading="lazy">
<p>Some text</p>
</div>
</div>
Codepen: https://codepen.io/rohhthone/pen/wvjVBWy
This video shows how to create a grid media scroller, which might be useful to you.
I have a problem with flexbox. The last box in a row has more height than others. I see that if I give specific height to the boxes I will achieve the same height on the boxes but since I am trying to make responsive site I wondering it is better way to define height and not using px sizing. The boxes including images and text inside. I have tried to put % on the height but it doesn't change anything. What is the best way to use in this case to avoid many jobs in media query later? is the px the only solution?
Thank you in advance
the boxes look like this:
Code:
.footer-box {
display: flex;
justify-content: center;
width: 100%;
flex-wrap:wrap; // using wrap for wraping on smaller devices
}
.box {
text-align: center;
width:20%;
height: auto;
margin: 10px;
}
<div class="footer-box">
<div class="box box1">
<img src="./images/other/pic1.jpg" alt="">
<p>lorem text</p>
</div>
<div class="box box2">
<img src="./images/other/pic1.jpg" alt="">
<p>lorem text</p>
</div>
<div class="box box3">
<img src="./images/other/pic1.jpg" alt="">
<p>lorem text</p>
</div>
<div class="box box4">
<img src="./images/other/pic1.jpg" alt="">
<p>lorem text</p>
</div>
Thank you in advance
You can use flexbox and flex-direction:column for .box.
Also you should use align-items: stretch for .footer-box. Because all child items will have same heights with this code.
Lastly, through flex: 1 1 auto; we can fill with img.
And bonus: object-fit: cover is for your img sizes.
.footer-box {
display: flex;
justify-content: center;
width: 100%;
flex-wrap: wrap; // using wrap for wraping on smaller devices
align-items: stretch;
}
.box {
text-align: center;
width: 20%;
height: auto;
margin: 10px;
display: flex;
flex-direction: column;
}
.box img {
flex: 1 1 auto;
object-fit: cover;
}
<div class="footer-box">
<div class="box box1">
<img src="https://dummyimage.com/50x50/000/fff" alt="">
<p>lorem text</p>
</div>
<div class="box box2">
<img src="https://dummyimage.com/50x50/000/fff" alt="">
<p>lorem text</p>
</div>
<div class="box box3">
<img src="https://dummyimage.com/50x50/000/fff" alt="">
<p>lorem text</p>
</div>
<div class="box box4">
<img src="https://dummyimage.com/50x70/000/fff" alt="">
<p>lorem text</p>
</div>
</div>
I defined flexbox properties of container display: flex; flex-wrap: wrap; justify-content: center; but there are always 3 divs on the first row and 2 divs on the second. How to make it wrap divs when the browser resizes?
I tried almost everything (changed the width and height of parent container, changed width to min-width/max-width, set margin of parent container margin: 0 auto;).
<!-- HTML -->
<div class="parent">
<div class="headline">
<h2>Tea of the Month</h2>
<h4>What's Stepping at The Tea Cozy?</h4>
</div>
<div class="container">
<img src="..." class="image">
<p>Fall Berry Blitz Tea</p>
</div>
</div>
<div class="container">
<img src="..." class="image">
<p>Spiced Rum Tea</p>
</div>
</div>
<div class="container">
<img src="..." class="image">
<p>Seasonal Donuts</p>
</div>
</div>
<div class="container">
<img src="..." class="image">
<p>Myrtle Ave Tea</p>
</div>
</div>
<div class="container">
<img src="..." class="image">
<p>Bedford Bizarre Tea</p>
</div>
</div>
<!-- URL of images is correct -->
/* CSS */
.parent {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 1000px;
margin: 0 auto;
}
.headline {
display: block;
width: 100%;
}
.container {
margin: 0px 10px;
}
.image {
width: 300px;
height: 200px;
}
I expect the divs would wrap on next line. But there always are 3 divs on first and 2 divs on second line.
Your HTML contained some invalid closure tags, please validate your HTML you can check out: https://validator.w3.org/
Also removed the fixed width of 1000px, you want to have a fluid parent so it sizes acording to the device or browser width.
/* CSS */
.parent {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0 auto;
/* changed */
width: 100%;
}
.headline {
display: block;
width: 100%;
}
.container {
margin: 0px 10px;
}
.image {
width: 300px;
height: 200px;
}
<!-- HTML -->
<div class="parent">
<div class="headline">
<h2>Tea of the Month</h2>
<h4>What's Stepping at The Tea Cozy?</h4>
</div>
<div class="container">
<img src="https://placehold.it/300x300" class="image">
<p>Fall Berry Blitz Tea</p>
</div>
<!-- </div> REMOVED -->
<div class="container">
<img src="https://placehold.it/300x300" class="image">
<p>Spiced Rum Tea</p>
</div>
<!-- </div> REMOVED -->
<div class="container">
<img src="https://placehold.it/300x300" class="image">
<p>Seasonal Donuts</p>
</div>
<!-- </div> REMOVED -->
<div class="container">
<img src="https://placehold.it/300x300" class="image">
<p>Myrtle Ave Tea</p>
</div>
<!-- </div> REMOVED -->
<div class="container">
<img src="https://placehold.it/300x300" class="image">
<p>Bedford Bizarre Tea</p>
</div>
<div class="container">
<img src="https://placehold.it/300x300" class="image">
<p>Bedford Bizarre Tea</p>
</div>
<div class="container">
<img src="https://placehold.it/300x300" class="image">
<p>Bedford Bizarre Tea</p>
</div>
</div>
It happens because you set width:1000px on your .parent. This means that no matter the device size the parent will always be 1000px and there will always be 3 elements on the first row.
To solve this, set .parent {width: 100%; max-width: 1000px;}
cheers
I am working on a project and want to have infinite horizontal scrolling for cells that each contain a thumbnail and some text. I have everything mostly working. However, I can not get text to wrap. The css and html are below. The first two items in the scroll box have text that should wrap, but overflows.
This is the style (cell 2 is only for demo to alternate background colors):
.container {
display: flex;
flex-direction: row;
padding: 10px;
height: 10%;
overflow-x: auto;
white-space: nowrap;
}
.cell {
background: #818181;
flex: fit-content;
padding: 10px;
width: 220px;
height: 8%;
display: inline-block;
}
.cell2 {
background: #f44336;
flex: fit-content;
padding: 10px;
width: 220px;
height: 8%;
display: inline-block;
}
.data {
justify-content: center;
word-wrap: break-word;
}
<div>
<h2>Scroll Test</h2>
<div class="container">
<div class="cell">
<a href= "#">
<span class="data"> <img src="http://roncabeanz.com/Roncabeanz/images/CoffeeIcon.jpg" width="200px"></span>
<span class="data"> <h3>Some text here</h3></span>
</a>
</div>
<div class="cell2">
<a href= "#">
<span class="data"> <img src="http://roncabeanz.com/Roncabeanz/images/CoffeeIcon.jpg" width="200px"></span>
<span class="data"> <h3>Some text here that will over flow</h3></span>
</a>
</div>
<div class="cell">
<a href= "#">
<span class="data"> <img src="http://roncabeanz.com/Roncabeanz/images/CoffeeIcon.jpg" width="200px"></span>
<span class="data"> <h3>Some text here</h3></span>
</a>
</div>
<div class="cell2">
<a href= "#">
<div class="data"> <img src="http://roncabeanz.com/Roncabeanz/images/CoffeeIcon.jpg" width="200px"> </div>
<div class="data"> <h3>Some text here</h3></div>
</a>
</div>
<?php } ?>
</div>
</div>
Link to fiddle: https://jsfiddle.net/jonathannah/3rxcktpm/29/
Just add
h3 { white-space: normal }. The children of .containerinherit white-space: nowrap, which causes the problem.
Another issue in your html is the h3 inside a span, which is invalid. You shouldn't use block elements inside inline elements. You can change it to a div give it the style display: inline
I am trying to create a webpage for an imaginary pizzeria as practice. I want to insert the header of the webpage in between two images(same) such that the three(image, header, image) elements are in line. But with the code below I am getting a screen like this. How do I get them all on one line?
<body>
<div style='float:left'>
<img src='body.png' style='width:100px; height:100px;'>
</div>
<div style='font-family:amita; font-size:20px;'>
<h1 align='center' style='margin-bottom:5px;'>Ralph's Pizzeria</h1>
</div>
<div style='float:right'>
<img src='body.png' style='width:100px; height:100px;'>
</div>
<hr style='clear:both;' />
</body>
This can be done using display: flex and justify-content: space-between:
.header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
<div class="header">
<div>
<img src='body.png' style='width:100px; height:100px;'>
</div>
<div style='font-family:amita; font-size:20px;'>
<h1 align='center' style='margin-bottom:5px;'>Ralph's Pizzeria</h1>
</div>
<div>
<img src='body.png' style='width:100px; height:100px;'>
</div>
</div>
I've added a container div and given it the class header and applied the flexbox to it.
You can simply do this :
header {
text-align: center;
}
h1 {
font-size: 25px;
display: inline-block;
vertical-align: top;
margin-top: 25px;
}
img {
display: inline-block;
width: 100px;
height: 100px;
margin:0 10px;
}
<header>
<img src='https://lorempixel.com/100/100/'>
<h1>Ralph's Pizzeria</h1>
<img src='https://lorempixel.com/100/100/'>
</header>
<hr>
Here's another solution if you want to continue to work with float.
Simply move the 2nd image to before the title.
<body>
<div style='float:left'>
<img src='body.png' style='width:100px; height:100px;'>
</div>
<div style='float:right'> <!-- Just moved this up here -->
<img src='body.png' style='width:100px; height:100px;'>
</div>
<div style='font-family:amita; font-size:20px;'>
<h1 align='center' style='margin-bottom:5px;'>Ralph's Pizzeria</h1>
</div>
<hr style='clear:both;'/>
</body>
However, I suggest using flex-box if you don't have to support older browsers.