• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Align content with pagination

Explorer ,
Feb 24, 2023 Feb 24, 2023

Copy link to clipboard

Copied

I try to make 6 items in a row, and divide in pages

Screen Shot 2023-02-25 at 12.20.07.png

Screen Shot 2023-02-25 at 12.20.17.png

Screen Shot 2023-02-25 at 12.20.29.png

Screen Shot 2023-02-25 at 12.20.46.png

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?

Views

931

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 25, 2023 Feb 25, 2023

Copy link to clipboard

Copied

What css are you using for the 'container' and 'buy' divs?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 25, 2023 Feb 25, 2023

Copy link to clipboard

Copied

You provided no link and no CSS code, so I'll take a stab in the dark and speculate that this is caused by Flexbox's handling of negative space.  What appears to be aligned-center is actually just wider product containers compensating for empty space across the bottom row.   More details on that below.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_...

 

Hope that helps.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Apr 12, 2023 Apr 12, 2023

Copy link to clipboard

Copied

Screen Shot 2023-04-12 at 17.14.41.png

 Yes, i would like to show in this ratio

Screen Shot 2023-04-12 at 17.15.10.png

Screen Shot 2023-04-12 at 17.15.22.png

 What ccs should write?

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 12, 2023 Apr 12, 2023

Copy link to clipboard

Copied

Looks like you have used flex on the 'buy' div and probably space between or space around for justify content.

 

Youre better off in this situation using grid, try:

 

.buy  {

display: grid;

grid-template-columns: repeat(6, 1fr);

grid-gap: 30px;

}

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Apr 12, 2023 Apr 12, 2023

Copy link to clipboard

Copied

Screen Shot 2023-04-12 at 20.32.07.png

But there is problem on grid-template-columns: repeat(6, 1fr);

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Apr 12, 2023 Apr 12, 2023

Copy link to clipboard

Copied

Screen Shot 2023-04-12 at 20.33.11.png

Screen Shot 2023-04-12 at 20.33.23.png

Screen Shot 2023-04-12 at 20.33.34.png

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 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 12, 2023 Apr 12, 2023

Copy link to clipboard

Copied

The error on line 71 is a known problem with Dreamweaver.

The program does not recognizing the "fr" unit as valid.

It can safely be ignored.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 12, 2023 Apr 12, 2023

Copy link to clipboard

Copied

quote

Screen Shot 2023-04-12 at 20.32.07.png

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
May 24, 2023 May 24, 2023

Copy link to clipboard

Copied

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?

Screen Shot 2023-05-24 at 17.05.52.png

Screen Shot 2023-05-24 at 17.03.27.png

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
May 24, 2023 May 24, 2023

Copy link to clipboard

Copied

Screen Shot 2023-05-24 at 17.15.08.png



Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 24, 2023 May 24, 2023

Copy link to clipboard

Copied

This looks to me like it is all set up incorrectly.

 

Firstly you have a closing </div> tag right after your opening <main> tag, which could be causing layout issues.

 

Secondly you have a 'container' <div> which is not really needed as that is the parent of the 'buy' <div> which houses your 'item' <divs> so you really only need the 'buy' <div>. You don't even need that if you use the <main> tag to house your grid 'item' <divs>

 

Consider using the below code constuction: 6 columns is way to many, you probably only need max 4 columns for desktop and reduce that to 2 for tablets then 1 for smartphones.

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Grid template</title>
<style>
main {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-gap: 20px;
width: 90%;
margin: 0 auto;
}
.item {
background-color: #f2f2f2;
}
</style>
</head>
<body>

<main>

<div class="item">
Item 1
</div>

<div class="item">
Item 2
</div>

<div class="item">
Item 3
</div>

<div class="item">
Item 4
</div>

<div class="item">
Item 5
</div>


<div class="item">
Item 6
</div>

</main>
<!-- end main -->

</body>
</html>

 

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
May 29, 2023 May 29, 2023

Copy link to clipboard

Copied

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.

HiuChing26169588pka2_0-1685345954343.pngHiuChing26169588pka2_1-1685345968583.png

 

HiuChing26169588pka2_2-1685345985464.pngHiuChing26169588pka2_3-1685345997073.png

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 29, 2023 May 29, 2023

Copy link to clipboard

Copied

quote

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>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
May 29, 2023 May 29, 2023

Copy link to clipboard

Copied

螢幕截圖 2023-05-29 19.59.00.png

i have updated your suggestion.

However, it goes another format

螢幕截圖 2023-05-29 20.00.02.png
i have searched about grid-template-columns.

螢幕截圖 2023-05-29 20.01.39.png

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.

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 29, 2023 May 29, 2023

Copy link to clipboard

Copied

Try:

 

<!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(200px, 1fr));
        }

        .listing div {
            background: gray;
            color: white;
        }
    </style>
</head>

<body>
    <main class="listing">
        <div>
            Item 1
        </div>

        <div>
            Item 2
        </div>

        <div>
            Item 3
        </div>

        <div>
            Item 4
        </div>

        <div>
            Item 5
        </div>
        <div>
            Item 6
        </div>
    </main>
</body>

</html>

 

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 01, 2023 Jun 01, 2023

Copy link to clipboard

Copied

Hi! Thanks for your suggestion.

Screen Shot 2023-06-01 at 16.39.21.png

Screen Shot 2023-06-01 at 16.39.56.png

But the word become vertical and the photo was not shown

But if i removed the last css

Screen Shot 2023-06-01 at 16.40.51.png

Screen Shot 2023-06-01 at 16.41.17.png

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 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 01, 2023 Jun 01, 2023

Copy link to clipboard

Copied

Screen Shot 2023-06-01 at 16.43.13.png

Screen Shot 2023-06-01 at 16.43.34.png

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 01, 2023 Jun 01, 2023

Copy link to clipboard

Copied

 

<!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>

BenPleysier_0-1685627057907.png

 

 

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 01, 2023 Jun 01, 2023

Copy link to clipboard

Copied

quote

 

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 04, 2023 Jun 04, 2023

Copy link to clipboard

Copied

<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JapanFavorite</title> <link rel="shortcut icon" href="images/LogoDesign-1080px_B.png"> <link href="reset.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Caveat&family=Roboto+Mono:ital,wght@1,500&display=swap" rel="stylesheet"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@500&display=swap" rel="stylesheet"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Varela+Round&display=swap" rel="stylesheet"> <script src="pagination.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="slider.js"></script> <script src="main.js"></script> <link href="style.css" rel="stylesheet">         </head>     <body> <header> <div class="container"> <div class="logo"> <a href="index.php"><img src="images/LogoDesign-1080px_B.png" ></a> </div> <div class=contact1> <div>Whatsapp: 98678277</div> <div>WeChat : Japanfavorite</div> <div>Line : Japan favorite</div> <div class="email">Email: <a href = "mailto: japanfavorite.hk@gmail.com">japanfavorite.hk@gmail.com</a></div> </div> <div class="contact"> <div><a href="https://www.facebook.com/japanfavortie.hk"target="_blank"><img src="images/fb1.png"></a></div> <div><a href="https://www.instagram.com/japanfavorite.hk/"target="_blank"><img src="images/ig1.png"></a></div> </div> </div> <div class="menu"> <nav class="icon"> <img src="images/2561466_menu_icon.png" class="menu"> <img src="images/close.png" class="close"> </nav> <div><a href="index.php"><ul>All</ul></a></div> <div><a href="menu_type.php?category=A"><ul>Clothing</ul></a></div> <div><a href="menu_type.php?category=B"><ul>Sports</ul></a></div> <div><a href="menu_type.php?category=C"><ul>Disney/USJ</ul></a></div> <div><a href="menu_type.php?category=D"><ul>Toys</ul></a></div> <div><a href="menu_type.php?category=E"><ul>Music</ul></a></div> <div><a href="menu_type.php?category=F"><ul>Beauty</ul></a></div> <div><a href="menu_type.php?category=G"><ul>Home</ul></a></div> <div><a href="menu_type.php?category=H"><ul>Pet</ul></a></div> <div><a href="menu_type.php?category=S"><ul>Others</ul></a></div>   </div> </header>   <main> <div class="container"> <div class="buy"> <div class="item"> <a href="product.php?id=1"><img src="images/A010001.jpg"></a> <h1>Graniph Tee</h1> <p>$230</p> </div> <div class="item"> <a href="product.php?id=3"><img src="images/A010003-1575px.jpg"></a> <h1>n'Or Label</h1> <p>$300</p> </div> <div class="item"> <a href="product.php?id=4"><img src="images/A010004-1.JPG"></a> <h1>Graniph Tee</h1> <p>$320</p> </div> </div> </div> </main> </main> <footer> </footer>     </body>   </html>  

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 05, 2023 Jun 05, 2023

Copy link to clipboard

Copied

The screen shot suggests the code is working as it should? Is it just the images that are missing? Maybe either they are too big or the link to them is wrong.

 

Try adding to your css:

.item a img {

max-width: 100%;

height: auto;

}

 

or just test the code with the image NOT wrapped in the anchor tag.

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 06, 2023 Jun 06, 2023

Copy link to clipboard

Copied

The image is 1125x1575. Is it too big?
and i tried the code you suggest.

Screen Shot 2023-06-06 at 17.07.09.png

Screen Shot 2023-06-06 at 17.07.38.png

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 06, 2023 Jun 06, 2023

Copy link to clipboard

Copied

quote

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.

 

PS-export2x.jpg

 

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 07, 2023 Jun 07, 2023

Copy link to clipboard

Copied

Thanks for your suggestion. i have compressed the images smaller.

Screen Shot 2023-06-07 at 22.38.49.png

Screen Shot 2023-06-07 at 22.38.58.png

Screen Shot 2023-06-07 at 22.39.07.png

But still no photo shown

Sorry for keep repeating the question

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines