Skip to content
OverviewSolutions
3
Comments
3
Lia
@liampc

All comments

  • Facundo•10
    @FRmeroSubmitted almost 4 years ago

    I have an issue with the comments section. I want to use flexbox and align-self: flex-start, center and flex-end but it doesn't work. And any other recomendation will be appreciated.

    Social Proof Section using BEM and SASS

    1
    Lia•75
    @liampcPosted almost 4 years ago

    Hello!

    I also had a hard time with that part, what I did is make use of grid instead of flexbox for the reviews container, and add a max-height to the children-cards.

    Hope this helps!

    0
  • Ramon•130
    @ramonrpSubmitted almost 4 years ago

    Here we go with my second project! I did mobile first, to take advantage of block elements. I used flexbox inside each section (Karma, Team builder...) to have more about position of pictures. Probably there are better ways to achieve same.

    Regarding desktop version, I divided in two sections (header / panel-section). I used grid in the panel-section div.

    I have the feeling that my CSS is a little messy...

    any feedback is more than welcome

    Thanks!!

    Mobile first . HTML / CSS only.

    1
    Lia•75
    @liampcPosted almost 4 years ago

    Hello, nice work with this!

    • I just noticed that you used another div for the pictures in the box, I think using img tag is sufficient.
    • the grid is good but you can also use 'grid-template-areas' and assign 'grid-area' for each of the children, I think it is neater.
    • for the 'grid-template-columns/rows' you can also use 'repeat(3, 1fr)'

    Have a good day!

    0
  • Lia•75
    @liampcPosted almost 4 years ago

    Hello!

    Here are some of my suggestions:

    • add a container div that will hold all the elements and set a max-width into it so that the elements won't spill outside of that area

    • try to use :root Selector, for custom properties like colors and fonts https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

    • try to use css grid or flex, it will help for responsive design, search for CSS tricks for info

    • I just learned this recently here, you can use the background property and add multiple images plus the white background instead of adding the image itself in the html. https://www.w3schools.com/css/css3_backgrounds.asp

    Happy coding!

    2