Skip to content
OverviewSolutions
27
Comments
6

Sander Buist

@SanderBuist2groningen, groningen Netherlands430 points

Currently working on my skills to improve by conquering the challenges offered by frontendmentor.io

Latest solutions

View more solutions

Latest comments

  • ErrorCode710•150
    @ErrorCode710
    What are you most proud of, and what would you do differently next time?

    This is my first project that i cant figure out the solution.

    What challenges did you encounter, and how did you overcome them?

    I have A Lot of problem facing on this project but i cant fix,these are Problem 1: The Accurate Line Break

    Problem 2: The responsive of the image when i resize and middle screen size the image doesn't follow

    Problem 3: The Filter effect or The violet in the Image also how to change the img from mobile to desktop

    Problem 4: How to select the Company, template and Queries using Pseudo Elements'

    If you have any suggestions on how I can improve this project, feel free to leave me a comment!

    What specific areas of your project would you like help with?

    I have A Lot of problem facing on this project but i cant fix,these are Problem 1: The Accurate Line Break

    Problem 2: The responsive of the image when i resize and middle screen size the image doesn't follow

    Problem 3: The Filter effect or The violet in the Image also how to change the img from mobile to desktop

    Problem 4: How to select the Company, template and Queries using Pseudo Elements'

    If you have any suggestions on how I can improve this project, feel free to leave me a comment!

    Stats Preview Card

    1
    Sander Buist•430
    @SanderBuist2

    Nice efford. As for your points:

    1. make sure you set all your fonts size and weight according to the style-guide

    2. I don't really get what you mean here. If you want to not have the empty space underneath your image you can allways set the height to 100% and leave the width on auto. That way your image won't deform. Switch for the mobile version to 100% width and height on auto in this case.

    3. By adding "mix-blend-mode: multiply;" to your card__header-img class and setting the backgroundcolor to the right color you will get the result you want. There are other option for the mix-blend-mode, just play with them to see the result.

    4. You solved it the same way I did, nothing to add here

  • yas-avocad•360
    @yas-avocad
    What are you most proud of, and what would you do differently next time?

    Getting better with responsive design.

    What challenges did you encounter, and how did you overcome them?

    N/A

    What specific areas of your project would you like help with?

    Corner is not taking the border-radius. Tried overflow: hidden and seeing if certain elements were preventing it from curving.

    Responsive Product Card with HTML/CSS

    1
    Sander Buist•430
    @SanderBuist2

    nicely done.

    In this part:

    .image-desktop {
  display: block;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 0px;
  border-top-right-radius: 0px;
  width: 300px;
}

    remove both top right parts and set the bottom left part to 10 px. That will solve it.

    Marked as helpful
  • Ajibona•210
    @ajibona
    What are you most proud of, and what would you do differently next time?

    I'm proud to work on these projects. It takes me a lot of time as I have to try many things and figure out which styling works best. I think my learning and problem-solving skills have improved a bit. It feels good to create something that others can see.

    What challenges did you encounter, and how did you overcome them?

    Each time I adjust styles for the mobile version, I find it affecting the desktop view. I try to solve it and ensure compatibility for both.

    What specific areas of your project would you like help with?

    Any feedbacks and tips is ok.

    Stats Preview Card Pages

    1
    Sander Buist•430
    @SanderBuist2

    Nicely done. Before you start working on the desktop version, make sure your mobile version is 100% done. If you need extra divs or other components for the desktop, make them first, check if your mobile version is still 100%. This way you will probably notice you only have to do a few changes to complete the desktop version.

    Marked as helpful
  • Alberto José•630
    @alberto-rj
    What specific areas of your project would you like help with?

    👍 Hi, if you have any ideas on how I can improve the background on the image to match the design, please let me know.

    Stats preview card using Flexbox and CSS Grid

    #lighthouse#bem
    1
    Sander Buist•430
    @SanderBuist2

    if you add:

    • mix-blend-mode: multiply;

    to your img in your css, the image will blend with the background and will keep the darker colors. (there are more modes with differend effects, you can play with them)

    Marked as helpful
  • Sander Buist•430
    @SanderBuist2

    add this:

    height: 100vh;

    to your main and your card will be vetically centered.

    Marked as helpful
  • Nikhilsuthar09•70
    @Nikhilsuthar09
    What are you most proud of, and what would you do differently next time?

    I'm really proud of completing this 2nd project on my own.

    What challenges did you encounter, and how did you overcome them?

    Javascript is really not what it seems like in tutorial videos I really need lot of more practice to work fluently in dom manipulation.

    What specific areas of your project would you like help with?

    However im still not able to change the icon-plus and minus size in mobile sizes screen, if anybody knows how to achieve that using CSS, since width and height properties are not working for me. Your suggestions are most welcomed.

    Responsive accordian page using Flexbox and javascript

    1
    Sander Buist•430
    @SanderBuist2

    you can easily change to the minus symbol if you toggle a class of the image like you did with the answers.

    example: css: .minus { content: url("../assets/images/icon-minus.svg"); } html : <img src="./assets/images/icon-plus.svg" />

    Marked as helpful