Skip to content
OverviewSolutions
9
Comments
6
Divadovitch
@Divadovitch

All solutions

  • Submitted 6 months ago

    Fylo data storage component with flex and grid

    • HTML
    • CSS
    0

    I wasn't able to use grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); on the .card. The grid didn't "expand" from 1 column to 2 column without a media query.

    To make it work I had to disable the display: flex; that I used on the body to center the .container vertically and horizontally. But then the .container was not centered. I also tried margin: auto; on the .card but it didn't work either.

    So I used grid-template-columns: minmax(250px, 700px); instead.

    Is there a way to center the .container without disrupting the way grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); must work on the .card?

  • Submitted 6 months ago

    Stats preview card component with flexbox

    • HTML
    • CSS
    0

    To be more precise on the methods to use to better control the dimensions of flexbox elements.

  • Submitted 7 months ago

    Testimonial grid section with CSS Grid

    • HTML
    • CSS
    1

    A better understanding of the BEM methodology and a better structure of the CSS.

  • Submitted 7 months ago

    Four card feature section with css Grid

    • HTML
    • CSS
    1

    Knowing the right way of using data attributes for css purpose and if creating a made up data attribute is considered bad practice.

  • Submitted 7 months ago

    Product preview card with flexbox and grid

    • HTML
    • CSS
    1

    For that project it's ok but if you know a good article talking about flexbox, more precisely how to control exactly (with size or other) the point where the wrap option occur on flexbox.

  • Submitted 7 months ago

    Recipe page with clamp and container queries

    • HTML
    • CSS
    1

    A better way to adapt the image of the recipe in a fluid manner between the desktop and the mobile version.

  • Submitted 7 months ago

    Social links profile with flexbox

    • HTML
    • CSS
    1

    In the example given, the height of the card decreases for the mobile version. In my case I haven't touched the height, but being able to modify the different spaces fluidly and manage everything with variables interests me.

  • Submitted 7 months ago

    Blog preview card with flexbox

    • HTML
    • CSS
    1

    With only the images as a model I wasn't sure whether the hover/focus should be applied only to the title of the card or also to the card itself. The same goes for changing the appearance of the cursor. I decided not to place a link on the title but to just change the appearance of it. A comment on these points would be welcome.

  • Submitted 7 months ago

    QR component first solution with HTML and CSS flexbox

    • HTML
    • CSS
    1

    Understand how to optimize the CSS code and make the project as fluid/responsive as possible.