I am beginner in CSS, I don't understand why my second text isn't at the bottom of the first block?
Why my 2 blocks are horizontally? Normally, the second text must be towards the bottom?!
My structure in HTML seems to be correct?
<div class="container">
<div class="col">
<img class="img-icon" src="https://zupimages.net/up/20/13/937l.png" />
<div class="t-title-first">my first text </div>
<div class="t-title-second">my second text</div>
</div>
...
</div>
Thank you in advance for your help and your time.
body{
padding: 0;
margin: 0;
}
.container{
display: flex;
padding-top: 35px;
width: 90%;
margin: 0 auto;
background-color: #f5f5f5;;
justify-content: space-evenly;
align-items: center;
}
.img-icon{
width: 15%;
border-radius: 50%;
background-color: black;
padding: 15px;
}
.col{
display: flex;
width: 25%;
}
.t-title-first{
padding: 15px 10px;
font-size: 25px;
color: blue;
}
.t-title-second{
padding: 15px 10px;
}
<div class="container">
<div class="col">
<img class="img-icon" src="https://zupimages.net/up/20/13/937l.png" />
<div class="t-title-first">my first text </div>
<div class="t-title-second">my second text</div>
</div>
<div class="col">
<img class="img-icon" src="https://zupimages.net/up/20/13/937l.png" />
<div class="t-title-first">my first text </div>
<div class="t-title-second">my second text</div>
</div>
<div class="col">
<img class="img-icon" src="https://zupimages.net/up/20/13/937l.png" />
<div class="t-title-first">my first text </div>
<div class="t-title-second">my second text</div>
</div>
</div>
You can achieve that by wrapping the text in a simple div.
body{
padding: 0;
margin: 0;
}
.container{
display: flex;
padding-top: 35px;
width: 90%;
margin: 0 auto;
background-color: #f5f5f5;;
justify-content: space-evenly;
align-items: center;
}
.img-icon{
width: 15%;
border-radius: 50%;
background-color: black;
padding: 15px;
}
.col{
display: flex;
width: 25%;
}
.t-title-first{
padding: 15px 10px;
font-size: 25px;
color: blue;
}
.t-title-second{
padding: 15px 10px;
}
<div class="container">
<div class="col">
<img class="img-icon" src="https://zupimages.net/up/20/13/937l.png" />
<div>
<div class="t-title-first">my first text </div>
<div class="t-title-second">my second text</div>
</div>
</div>
<div class="col">
<img class="img-icon" src="https://zupimages.net/up/20/13/937l.png" />
<div>
<div class="t-title-first">my first text </div>
<div class="t-title-second">my second text</div>
</div>
</div>
<div class="col">
<img class="img-icon" src="https://zupimages.net/up/20/13/937l.png" />
<div>
<div class="t-title-first">my first text </div>
<div class="t-title-second">my second text</div>
</div>
</div>
</div>
Related
the problem that I'm having is that when I resize the browser the left margins of both the and my card divs aren't aligning. Is there some sort of css property or maybe some JS that will make them stay aligned when resizing?
here's my sandbox
https://codesandbox.io/s/stupefied-christian-tosys?file=/src/styles.css:0-
Add the .filter margin margin: 0 80px; to your .row. and then remove justify-content: center;. It will loose the centered. But will be align on the left. To aviod the overflow from the body, you can set width: calc(100% - 160px);to your .row:
/* ADDED BELOW */
margin: 0 80px;
justify-content: unset;
width: calc(100% - 160px);
After if you want to keep your card more center, either you use justify-content: space-between; on row, either you use margin: 10px auto; on your card.
DEMO:
body {
margin: 0 auto;
max-width: 1200px;
}
.row {
display: flex;
justify-content: center;
width: 100%;
flex-wrap: wrap;
/*ADDED BELOW */
margin: 0 80px;
justify-content: unset;
width: calc(100% - 160px);
}
.filter {
display: flex;
margin: 0 80px;
}
.filter select {
display: inline;
width: 15rem;
margin: 10px;
border-radius: 5px;
}
.card {
width: 15rem;
margin: 10px;
border-radius: 5px;
border: 1px solid rgba(0, 0, 0, 0.125);
}
.info {
padding: 15px;
}
.img-container {
padding-top: 0;
position: relative;
}
.card img {
width: 100%;
object-fit: cover;
}
.price {
font-weight: bold;
}
<div id="root">
<div class="App">
<div class="filter-container">
<div class="product-listing-wrap">
<div class="filter">
<select class="custom-select" id="priceGroup">
<option value="1">Under $50</option>
<option value="2">$50 to $100</option>
<option value="3">$100 to $250</option>
<option value="4">Over $250</option>
</select>
</div>
<div class="row" style="
margin: 0 80px;
padding: 10px 0;
width: calc(100% - 160px);
">
<div class="card">
<div class="img-container"><img src="https://images.pexels.com/photos/593171/pexels-photo-593171.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="1"></div>
<div class="info">
<p class="info-title"><span><a>placeholder...</a></span></p>
</div>
</div>
<div class="card">
<div class="img-container"><img src="https://images.pexels.com/photos/593171/pexels-photo-593171.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="2"></div>
<div class="info">
<p class="info-title"><span><a>placeholder...</a></span></p>
</div>
</div>
<div class="card">
<div class="img-container"><img src="https://images.pexels.com/photos/593171/pexels-photo-593171.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="3"></div>
<div class="info">
<p class="info-title"><span><a>placeholder...</a></span></p>
</div>
</div>
<div class="card">
<div class="img-container"><img src="https://images.pexels.com/photos/593171/pexels-photo-593171.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="4"></div>
<div class="info">
<p class="info-title"><span><a>placeholder...</a></span></p>
</div>
</div>
<div class="card">
<div class="img-container"><img src="https://images.pexels.com/photos/593171/pexels-photo-593171.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="5"></div>
<div class="info">
<p class="info-title"><span><a>placeholder...</a></span></p>
</div>
</div>
<div class="card">
<div class="img-container"><img src="https://images.pexels.com/photos/593171/pexels-photo-593171.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="6"></div>
<div class="info">
<p class="info-title"><span><a>placeholder...</a></span></p>
</div>
</div>
<div class="card">
<div class="img-container"><img src="https://images.pexels.com/photos/593171/pexels-photo-593171.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="7"></div>
<div class="info">
<p class="info-title"><span><a>placeholder...</a></span></p>
</div>
</div>
<div class="card">
<div class="img-container"><img src="https://images.pexels.com/photos/593171/pexels-photo-593171.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="8"></div>
<div class="info">
<p class="info-title"><span><a>placeholder...</a></span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
try it:
.row {
display: flex;
justify-content: space-between;
margin: 0 80px;
max-width: 1040px;
flex-flow: wrap;
}
I am trying to get 3 columns in a row and be the same height.
I am using the HTML/CSS below. I can't figure out why the boxes arent the same height.
.container {
text-align: center;
display: block;
width: 100%;
}
.grid {
width: 100%;
height: 100%;
}
.row {
display: flex;
height: 100%;
flex-direction: row;
}
.col {
background: #444;
padding: 2em;
flex: 1;
height: 100%;
border: 1px solid blue;
}
<div class="container">
<div class="data">
<div class="grid">
<div class="row">
<div class="col">
<p>col 1</p>
</div>
<div class="col">
<p>col </br>2</p>
</div>
<div class="col">
<p>col 3</p>
</div>
</div>
</div>
</div>
</div>
How can I make the boxes all the same height. thanks
Simply, remove the height: 100% from .col.
flex: 1; will do the job.
.row {
display: flex;
}
.col {
flex: 1;
background: #444;
padding: 2em;
border: 1px solid blue;
text-align: center;
}
<div class="container">
<div class="data">
<div class="grid">
<div class="row">
<div class="col">
<p>col 1</p>
</div>
<div class="col">
<p>col </br>2</p>
</div>
<div class="col">
<p>col 3</p>
</div>
</div>
</div>
</div>
</div>
In fact, I would like to put my elements towards the left as below:
On my second_text class, I added text-align: left; but I always have the same problem.
.second_text{
padding-top: 10px;
text-align: left;
}
It is possible to force the block to left?
body{
padding-top:200px;
}
.container{
width: 95%;
margin: 0 auto;
}
.row{
display: flex;
padding-left: 20px;
padding-bottom:50px;
padding-top: 50px;
margin-left: 10%;
}
.img-block{
width: 4%;
}
.wrapper{
display: flex;
flex-direction: column;
padding-left: 15px;
}
.title{
padding-bottom: 10px;
}
.vertical{
border-left: 1px solid black;
height: 60px;
margin-left: 20px;
}
.img-block {
height: 28px;
padding-left: 15px;
width: 50px;
display: inline-block;
}
.img-pic{
display: inline-block;
height: 20px;
}
.second_text{
padding-top: 10px;
text-align: left;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<body>
<div class="container">
<div class="row">
<img class="img-block" src="https://zupimages.net/up/20/21/mz4v.png" alt="image"/>
<div class="wrapper">
<div class="title">Phone</div>
<div class="second_text">Just For VIP Member</div>
</div>
<div class="vertical"></div>
<img class="img-block" src="https://zupimages.net/up/20/21/wgl0.png" alt="image"/>
<div class="wrapper">
<div class="title">Email Us</div>
<div class="second_text">admin#superbtc.biz</div>
</div>
<div class="vertical"></div>
<img class="img-block" src="https://zupimages.net/up/20/34/epbs.png" alt="image"/>
<div class="wrapper">
<div class="title">Follow us</div>
<div class="second_text">
<img class="img-pic" src="https://zupimages.net/up/20/34/pnpm.png" alt="image"/>
<img class="img-pic" src="https://zupimages.net/up/20/34/qgz1.png" alt="image"/>
<img class="img-pic" src="https://zupimages.net/up/20/34/gdph.png" alt="image"/>
<img class="img-pic" src="https://zupimages.net/up/20/34/alck.png" alt="image"/>
<img class="img-pic" src="https://zupimages.net/up/20/34/evtq.png" alt="image"/>
</div>
</div>
<div class="vertical"></div>
<img class="img-block" src="https://zupimages.net/up/20/34/txjb.png" alt="image"/>
<div class="wrapper">
<div class="title">Address</div>
<div class="second_text">2699 BORAMBOLA, New South Wales,Australia.</div>
</div>
</div>
</div>
</body>
</html>
Try using Negative Values to .second_text i.e Margin-left: -40px
Though this is not a best fix but can be a quick fix.
A simplified version. Restructure like this
.row {
display: flex;
}
.row .wrapper {
flex-grow: 1;
position: relative;
}
.row .wrapper .first-text {
display: flex;
align-items: center;
padding: 5px 15px;
}
.row .wrapper .second-text {
padding: 5px 15px;
}
.row .wrapper .first-text img {
margin-right: 15px;
}
.verticle {
background: black;
width: 1px;
height: 100%;
position: absolute;
right: 0;
top: 0;
}
<div class="row">
<div class="wrapper">
<div class="first-text">
<img src="https://via.placeholder.com/30" /> Some text here
</div>
<div class="second-text">
Some text
</div>
<div class="verticle"></div>
</div>
<div class="wrapper">
<div class="first-text">
<img src="https://via.placeholder.com/30" /> Some text here
</div>
<div class="second-text">
Some text
</div>
<div class="verticle"></div>
</div>
<div class="wrapper">
<div class="first-text">
<img src="https://via.placeholder.com/30" /> Some text here
</div>
<div class="second-text">
Some text
</div>
<div class="verticle"></div>
</div>
<div class="wrapper">
<div class="first-text">
<img src="https://via.placeholder.com/30" /> Some text here
</div>
<div class="second-text">
Some text
</div>
<div class="verticle"></div>
</div>
</div>
A better solution would be to use position: relative and left: -40px on your .second_text.
I am trying to display images in a single line horizontal with scroll but I can't figure how to I would appreciate it if anyone could help me.
CSS
.img {
max-width: 400px;
position: relative;
}
.animal {
float: left;
background-color: #fff;
}
.image-grid{
flex-wrap: wrap;
width: 1400px;
margin: 0 auto;
}
.pet-photo {
padding: 10px;
display: block;
box-sizing: border-box;
flex-basis: 100%;
float: left;
padding: 20px;
width: 200px;
height: 300px;
display: block;
}
js
<div class ="image-grid">
<div class="animal">
<img class="pet-photo " src="${pet.photo}" >
<div class="olay" onclick="location.href='${pet.href}';" style="cursor: pointer;">
<div id="mydiv">
<h2 class="pet-name">${pet.name}
<h1 class="species">${pet.species}
</div>
<div></div></div>
</div>
</div>
That's all thank you for reading :) really appreciate it.
solution is display: flex; with flex-wrap: nowrap;
.container-items {
overflow: auto;
width: 100%;
}
.items {
display: flex;
flex-wrap: nowrap;
}
.items .item {
min-width: 150px;
text-align: center;
padding: 5px;
}
.items .item h2,
.items .item h3 {
margin: 0;
}
.items .item img {
width: 100%;
}
<div class ="container-items">
<div class ="items">
<div class="item">
<img src="https://cdn.mos.cms.futurecdn.net/otjbibjaAbiifyN9uVaZyL-320-80.jpg">
<h2>here title</h2>
<h3 class="species">here text</h3>
</div>
<div class="item">
<img src="https://cdn.mos.cms.futurecdn.net/otjbibjaAbiifyN9uVaZyL-320-80.jpg">
<h2>here title</h2>
<h3>here text</h3>
</div>
<div class="item">
<img src="https://cdn.mos.cms.futurecdn.net/otjbibjaAbiifyN9uVaZyL-320-80.jpg">
<h2>here title</h2>
<h3 class="species">here text</h3>
</div>
<div class="item">
<img src="https://cdn.mos.cms.futurecdn.net/otjbibjaAbiifyN9uVaZyL-320-80.jpg">
<h2>here title</h2>
<h3 class="species">here text</h3>
</div>
<div class="item">
<img src="https://cdn.mos.cms.futurecdn.net/otjbibjaAbiifyN9uVaZyL-320-80.jpg">
<h2>here title</h2>
<h3 class="species">here text</h3>
</div>
<div class="item">
<img src="https://cdn.mos.cms.futurecdn.net/otjbibjaAbiifyN9uVaZyL-320-80.jpg">
<h2>here title</h2>
<h3 class="species">here text</h3>
</div>
<div class="item">
<img src="https://cdn.mos.cms.futurecdn.net/otjbibjaAbiifyN9uVaZyL-320-80.jpg">
<h2>here title</h2>
<h3 class="species">here text</h3>
</div>
</div>
</div>
I'm trying to fill an area of web page of a certain, fixed size with an unknown number of images (max 10), maximising the size of the images without overflowing the area. To be mobile friendly, I want it to work both in landscape and portrait mode without needing scrolling.
I've been trying to use flexboxes to have the images wrap, but then they don't scale down and end up overflowing the area. If I use non-wrapping flexboxes, the images scale in landscape mode, but not in portrait. I feel there should be a nice, simple solution to this. Any ideas?
Update:
Here's the essence of the code I've got so far. I've been trying a lot of different things, but this is the cleanest.
html {
height: 100%;
}
body {
padding-top: 0;
padding-bottom: 0;
height: 100%;
}
.container {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
text-align: center;
}
.above {
margin-bottom: 20px;
font-size: larger;
background-color: lightgrey;
}
.middle {
flex-grow: 1;
max-height: 100%;
}
.below {
margin-top: 20px;
background-color: lightgrey;
}
img {
border: 5px solid transparent;
height: 100%;
}
.images {
flex-direction: row;
justify-content: center;
display: flex;
flex-wrap: wrap;
height: 100%;
}
.image {
margin: 5px;
}
<html>
<body>
<div class="container">
<div class="above">
Some text about the images
</div>
<div class="middle">
<div class="images">
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
</div>
</div>
<div class="below">
<button>Ok</button>
<button>Cancel</button>
</div>
</div>
</body>
</html>
The point is to try to get the images to stay completely within the div called "middle", but scaled as large as possible. Here are a few wireframes.
Landscape, 10 images:
Portrait, 10 images:
Portrait, 4 images
I Think you need to consider flex property here, it's the short hand version of flex-grow, flex-shrink, and flex-basis properties. See if this is what you're looking for.
html,body{
padding: 0;
margin: 0;
width: 100vw;
box-sizing: border-box;
}
.container{
width: 100%;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-direction: column;
}
.row{
display: flex;
width: 100%;
flex-direction: row;
}
.col{
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: center;
align-items: center;
text-align: center;
}
.item{
display: flex;
max-width: 100%;
height: 150px;
background-color: #222;
margin: 1%;
flex: 1 1 15%;
}
#media only screen and (max-width: 600px) {
.item {
height: 100px;
flex: 1 1 45%;
max-width: 100%;
}
}
<div class="container">
<div class="row ">
<div class="col">
<h1>some text about images</h1>
</div>
</div>
<div class="row">
<div class="col">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
<div class="row">
<div class="col">
<p>Some other elements</p>
</div>
</div>
</div>