Skip to content
OverviewSolutions
19
Comments
9
Matthias Wagner
@MatzeW95

All comments

  • Will•210
    @wkan17012021Submitted almost 3 years ago

    Hi, I have been practicing html/css/js since early 2021. Recently though, i have been adding to my skills by learning backend tech. So, i was surprised how long this challenge took me (on and off for about 3 hours). I guess it shows if you don't practice you get rusty. If anyone has any feedback on tips or tricks to help with responsive design- ideally i would like the qr card to gradually reduce in size as opposed to snapping to a particular size which can create a jarring effect as the screen-size is achieved set by the media query. I suppose you could set multiple media query ranges- this is the only way i am aware of. Any suggestions welcome. Thanks

    Frontend Mentor - QR code component solution

    1
    Matthias Wagner•330
    @MatzeW95Posted almost 3 years ago

    Hi I personally would try to set as less stuff as possible in your "main". After that you can use the section for just like a structure thing.(personally wouldn't set to much stuff in there as well) But inside the the "section" I would put a "div" that i would style. (This makes it easier to change stuff for your responsibility, because you have to only change it at one place) That "div" would only need something like "border-radius, background-color, width, margin: 5rem auto"

    It's kinda hard to tell you that stuff in text if you want you can have a look at my solution: https://www.frontendmentor.io/challenges/qr-code-component-iux_sIO_H/hub/qr-code-component-cHniroyj2

    0
  • Isabelle•30
    @isabellegeofSubmitted almost 3 years ago

    Hey! I was curious if any of you used Bootstrap for this challenge? That's what I tried doing at first but had such a hard time! Do you find that CSS grid is better for this type of layout? Happy coding!

    Testimonials page using CSS grid

    1
    Matthias Wagner•330
    @MatzeW95Posted almost 3 years ago

    To be honest i dont know to much about bootstrap, but grid was kinda the way to go for this challenge😅 Btw your result looks very good 👍🏼

    0
  • Khaled Almansour•30
    @MUGK1Submitted almost 3 years ago

    By seeing my code how can I improve in your opinion?

    What are the most mistakes that I am making in my code? so I do not make it in the future.

    In general, give me a piece of advice that can help me.

    Thank you :)

    Order Summary Card using SCSS and HTML

    1
    Matthias Wagner•330
    @MatzeW95Posted almost 3 years ago

    Hi On mobile it would be nice to have a small margin on the sides (left and right). Maybe go for like 90% width on your main container and use "margin: auto" to center it.

    Marked as helpful
    1
  • Matthias Wagner•330
    @MatzeW95Posted almost 3 years ago

    you could add a box-shadow for your "main" container.

    0
  • Matthias Wagner•330
    @MatzeW95Posted almost 3 years ago

    I have a small thing you could change. Since the whole text align is center in your qr-card class, you can define "text-align: center" in .qr-card . So you can delete it in your "p" and "h2".

    I hope it helps you 👍🏼

    Marked as helpful
    0
  • Sagi•10
    @SagiMaimoniSubmitted almost 3 years ago

    Hey. This is my first project. I would like to hear from you any comments - about the length, the language, and anything else.

    1. How do i make the bottom link to be under the card? when im watching my site it's perfect, but the screenshot showing another picture.

    2. there is Translator add-on on my chrome, which making my content looks wrong, and the challnge fixed only when I disabled the add-on. Is there any solution?

    Im hungry to learn, so thank u!

    First challenge solution using HTML, CSS & Flexbox

    1
    Matthias Wagner•330
    @MatzeW95Posted almost 3 years ago

    To the first point. You have to place the whole "​<​div​ ​class​="​link​"​>"(Line 50-52) behind the "div" in line 54, But before the </body> in line 55.

    Sry but i cant help you with your second problem.

    0
  • Matthias Wagner•330
    @MatzeW95Posted almost 3 years ago

    If you make the 3 columns a bit thinner, you should get pretty close to the original. 👍🏼

    0
  • Matthias Wagner•330
    @MatzeW95Posted almost 3 years ago

    In my opinion its easier to use 3 flex column and just vertical center the first and third column.

    Marked as helpful
    0
  • Cody•170
    @Cod-BiggSubmitted almost 3 years ago

    I know this is not completed, but I asked questions about this on a few forums and have not heard back yet. I will update solution when I get it completed.

    1. What is the custom button? Is that an input?

    2. I could not get the white background behind both sections. I tried adding another div that included both of the sections, but it caused issues

    3. the red text on the active state section. Is that made by creating an element? I know you would have to check the input value and if it is zero would I create a span or something?

    Tip Calculator (Not Completed)

    3
    Matthias Wagner•330
    @MatzeW95Posted almost 3 years ago

    To your first point. The custom "button" Is not a button. It is an input field for a custom value.

    Marked as helpful
    0