I try to make 6 items in a row, and divide in pages
However, when i go to the last page, the remaining items are aligned central
i try to edit in align-content/align-itself in left
but it doesnt change
may i know is there any method?
26
Replies
Yes, i would like to show in this ratio
What ccs should write?
But there is problem on grid-template-columns: repeat(6, 1fr);
Same as the other page, there is only 3 result comes out and i want the 3 result can be aligned to the left but not in central
But there is problem on grid-template-columns: repeat(6, 1fr);
By @Hiu Ching26169588pka2
Remove justify-content: space-between and flex-wrap: wrap; and add display: grid; basically like l suggested in my first reply.
Thank you for your reply.
The alignment can be done, but after i align the content on the left
the picture has been disappeared.
May i know how to improve?
Hi Thanks for your suggestion.i have reduced to 1 div in the body.
But the display i also want to show is to flex-wrap.
since now the display is grid, can i also add flex-wrap. and it seem the problem cant be solved.
can i also add flex-wrap. and it seem the problem cant be solved.
By @Hiu Ching26169588pka2
No you cant add flex-wrap as you are using grid and grid doesnt have a wrap option.
You can re-set the number of grid columns when the browser window reaches a specific width by adding media queries to your css:
@media screen and (max-width: 768px) {
.buy {
grid-template-columns: repeat(3, 1fr);
}
}
@media screen and (max-width: 468px) {
.buy {
grid-template-columns: 1fr;
}
}
For a more automated wrapping process, rather than deploying media queries, you could also use:
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
Your code still doesnt look correct inside the php loop, you need to wrap your a, h1 and p tag in a parent div:
<div class="product">
<a href="#">Image</a>
<h1>Name</h1>
<p>Price</p>
</div>
i have updated your suggestion.
However, it goes another format
i have searched about grid-template-columns.
However, i think mine is a bit different from this
since my every div is 1 single result, padding with 20px 20px, not attached to each other.
Hi! Thanks for your suggestion.
But the word become vertical and the photo was not shown
But if i removed the last css
The photo and the description become normal (i have zoom out the screen for you to read easily)
But the result still shown in vertical
I tried to make changes on grid-template-columns, this is exactly what i want
but any way to make the word horizontal and able to show the photo?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Grid template</title>
<style>
.listing {
list-style: none;
margin: 2em;
display: grid;
gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(100px, 0.5fr));
}
.listing div {
align-items: center;
background: gray;
color: white;
overflow: hidden;
}
.listing div p {
margin: 1rem;
}
img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<main class="listing">
<div>
<img src="https://picsum.photos/200/300" alt="my image" width="200" height="300">
<p>Item 1</p>
</div>
<div>
<img src="https://picsum.photos/200/300" alt="my image" width="200" height="300">
<p>Item 2</p>
</div>
<div>
<img src="https://picsum.photos/200/300" alt="my image" width="200" height="300">
<p>Item 3</p>
</div>
<div>
<img src="https://picsum.photos/200/300" alt="my image" width="200" height="300">
<p>Item 4</p>
</div>
<div>
<img src="https://picsum.photos/200/300" alt="my image" width="200" height="300">
<p>Item 5</p>
</div>
<div>
<img src="https://picsum.photos/200/300" alt="my image" width="200" height="300">
<p>Item 6</p>
</div>
</main>
</body>
</html>
I tried to make changes on grid-template-columns, this is exactly what i want
but any way to make the word horizontal and able to show the photo?
By @Hiu Ching26169588pka2
If you're still having issues replicating the solutions provided so far then you have something wrong in your html code. If the issues persist can you post the html code in the forum, once its been compiled by php. Go to 'view source' in your browser, copy the code and paste here.
The image is 1125x1575. Is it too big?
and i tried the code you suggest.
The image is 1125x1575. Is it too big?
By @Hiu Ching26169588pka2
===========
It's too big for mobile & tablet devices.
Ideally web images should be cropped, scaled and optimized for the web layout BEFORE you insert them. Nobody appreciates consuming excessive bandwidth. See screenshot from Photoshop > File > Export > Export As > JPG.
Thanks for your suggestion. i have compressed the images smaller.
But still no photo shown
Sorry for keep repeating the question
AdChoices
