Skip to content
OverviewSolutions
27
Comments
10
Abdulqudus Sanusi
@qudus2019

All comments

  • Abdulqudus Sanusi•500
    @qudus2019Posted over 1 year ago

    Congratulations on your solution, You've done a wonderful job. However you should work on the responsiveness. Add the following to your .container 

    ```max-width:90%;
     height:[work on the height, vh unit is 
               not advisable for the container ]```
    1
  • Zascu•140
    @ZascuOfficialSubmitted over 1 year ago

    Hello!

    I would like to know how I could have made the heading and the paragraph of the card shrink down in width without having to use margin-inline inside of the card.

    Thanks in advance!

    Qr Code Component Card with Semantic HTML

    2
    Abdulqudus Sanusi•500
    @qudus2019Posted over 1 year ago

    Congratulations on your solution, Zascu

    You do not actually need the margin-inline property. The text-align: center is enough to keep the texts at the center and they will automatically shrink as the parent element's width reduced

    1
  • Abdulqudus Sanusi•500
    @qudus2019Posted over 1 year ago

    Congratulations on your solution, Sofiane

    Just few suggestions:

    1. Increase the width of your container
    2. Increase the container text padding
    3. Use mix-blend-mode: multiply to blend the image color
    Marked as helpful
    0
  • Abdulqudus Sanusi•500
    @qudus2019Posted about 2 years ago

    Yes sure, to grab more than one elements with a class name, it's possible to use getElementsByClassName instead of querySelectorAll.

    The former returns a HTML collection and you can't use Array methods on it like forEach(), Map() etc. Unless you convert the collection to an Array first.

    The latter returns a Node list that can accept the above mentioned methods.

    Thank you

    Marked as helpful
    1
  • Abdulqudus Sanusi•500
    @qudus2019Posted over 2 years ago

    Congratulations on your solution Michael, Another way to change pictures without using media queries is by using the <picture> element.

    Read on picture element here

    Marked as helpful
    0
  • Abdulqudus Sanusi•500
    @qudus2019Posted over 2 years ago

    To reduce the accessibility issues, always use landmarks in your html

    1
  • Abdulqudus Sanusi•500
    @qudus2019Posted over 2 years ago

    Congratulations on your solution Faraz. It's a great step in the right direction. Here are few tips to make it look better:

    1. Use Grid layout with two rows and three columns
    2. The card on the left will span two rows and one column on the left.
    3. The card on right will span 2 rows and one column on the right
    4. The other two cards will span one row each and on the same column.
    5. Give your grid-container align-items property and value of center
    Marked as helpful
    1
  • Abdulqudus Sanusi•500
    @qudus2019Posted over 2 years ago

    Fantastic!! I suggest increasing the height of the card and bottom padding of the second div containing texts

    0
  • Abdulqudus Sanusi•500
    @qudus2019Posted over 2 years ago

    Great job! I have few suggestions:

    1. Reduce the left and right padding.
    2. Increase height of the button.
    3. Increase the bottom padding.
    4. Increase don't size. Nice job overall!
    0
  • Abdulqudus Sanusi•500
    @qudus2019Posted over 2 years ago

    Weldone Dimitav, i noticed there is no border radius. Also, the headers are meant to have different font from the paragraph.

    1