Jump to content

Webaluc

Members
  • Content count

    5
  • Joined

  • Last visited

Community Reputation

0 Neutral

About Webaluc

  • Rank
    Newbie
  1. Webaluc

    Portfolio CSS

    👍
  2. Webaluc

    Portfolio CSS

    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
  3. Webaluc

    Portfolio CSS

    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.
  4. Webaluc

    Portfolio CSS

    I did it: https://www.w3schools.com/code/tryit.asp?filename=FNQ0UB878ZWD Thank you Ingolme for your prompt and accurate answer! Luc
  5. Webaluc

    Portfolio CSS

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