Webaluc Posted January 22, 2018 Share Posted January 22, 2018 Hi all! I am a beginner with CSS and I am playing with this w3schools portfolio gallery with filtering:https://www.w3schools.com/code/tryit.asp?filename=FNQ6Q8IJ733Y Two questions: Q1. Row horizontal alignment In my example, the "Lorem Ipsum" text of the "White Mustang" image is longer, so that the 3rd row is not well aligned. How to make the rows always aligned, even if texts are longer in the previous rows? Q2. Number of columns depending on the device In this example, there are always three columns. I would like the number of columns to change depending on the device. For example: • 3 columns on a Desktop • 2 columns on an iPad • 1 column on a Mobile phone Thank you! Link to comment Share on other sites More sharing options...
Ingolme Posted January 22, 2018 Share Posted January 22, 2018 To fix your first issue you can either wrap each set of three items in its own row, or you can add clear:left to every first element of a row like this: .column:nth-child(3n+1) { clear: left; } To determine the number of columns based on device, you have to use media queries to change the width of the columns for each device. For 2 columns, instead of 33.33% you would use 50%; for one column, set float to "none" and set width to "auto". Link to comment Share on other sites More sharing options...
Webaluc Posted January 23, 2018 Author Share Posted January 23, 2018 I did it:https://www.w3schools.com/code/tryit.asp?filename=FNQ0UB878ZWD Thank you Ingolme for your prompt and accurate answer! Luc Link to comment Share on other sites More sharing options...
Webaluc Posted January 23, 2018 Author Share Posted January 23, 2018 23 hours ago, Ingolme said: To fix your first issue you can either wrap each set of three items in its own row, or you can add clear:left to every first element of a row like this: .column:nth-child(3n+1) { clear: left; } To determine the number of columns based on device, you have to use media queries to change the width of the columns for each device. For 2 columns, instead of 33.33% you would use 50%; for one column, set float to "none" and set width to "auto". OK, looks like the "nth-child(2n+1)" counter does not reset when we click on a filter. Example here:https://www.w3schools.com/code/tryit.asp?filename=FNRBNZD4GKHX On the initial display, we have a new line for: - Image #1: Mountains - Image #4: Retro - Image #7: Man When we click on a filter, the new line triggers are always on the same 3 initial images. Run the test and then click on the "People" filter to see what I mean. The initial image #7 "Man" is on a new line. Link to comment Share on other sites More sharing options...
Ingolme Posted January 23, 2018 Share Posted January 23, 2018 Oh, the filter is going to cause some trouble. Even though the elements aren't visible, they're still there and are counted for in the nth-child() selectors. I can't immediately think of a CSS solution for that, you probably will need to write a Javascript program to determine which elements need a break before them. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 24, 2018 Share Posted January 24, 2018 I would use flex to sort out alignment issue, and use id ref as key to sub category columns https://www.w3schools.com/code/tryit.asp?filename=FNRTVUT2JF42 Link to comment Share on other sites More sharing options...
Webaluc Posted January 24, 2018 Author Share Posted January 24, 2018 Wow, great! Thank you Ingolme and dsonesuk for you help, I appreciate very much! Questions for dsonesuk: I compared my code with yours and I noticed 3 changes using this tool:https://www.diffchecker.com/ Change #1 You have replaced .row { margin: 10px -16px; } By: .row { margin: 10px -16px; display: flex; flex-wrap:wrap; } OK, here I understand following your explanations in your post. Change #2 You put the "nth-child" selectors in comments Here, I understand that with the "flex" solution, the "nth-child" selectors are no longer required. Change #3 You add an id to each filter button: - button id="all" - button id="nature" - button id="nature" - button id="nature" May I ask you why you added these ids? Thank you again! Luc Link to comment Share on other sites More sharing options...
dsonesuk Posted January 24, 2018 Share Posted January 24, 2018 Change #3 its easier to maintain, set id and the inline function will pick this reference up with this.id without needing changing function argument, plus if you add this function call exactly as it is now to addEventListener onclick event code, this single line will do exactly what adding these inline to all the individual element buttons does. Link to comment Share on other sites More sharing options...
Webaluc Posted January 24, 2018 Author Share Posted January 24, 2018 👍 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now