Skip to content
OverviewSolutions
9
Comments
28
Saran
@Saran-73

All comments

  • Saran•460
    @Saran-73Posted over 2 years ago

    Hi 👋 congratulations.

    • To resolve those accessibility issues enclose your code with <main> tag.
    • Use <h1> tag once .
    • Provide alt attribute to the image tag.
    • It may help to avoid setting margin for the body instead give it 0.
    • Give the hero img the min and Max width values in % or pixels to make it responsive eg max-width:350px would work.
    • Keep practicing focus on Css it will be quite tricky but stay with it you will get better.

    Best of luck👍

    0
  • Minhaj•10
    @MinhajmvSubmitted almost 3 years ago

    I completed 90% what required,with the help of internet and other resources. but i stuck at the active state,i tried many methods for hovering over images in active state but none of them worked well. if you have any suggestions or recommandations to make my code work 100%,feel free to give your feedback...

    nft card page

    1
    Saran•460
    @Saran-73Posted almost 3 years ago

    Hi 👋 you did great job trying to find your way through this challenge, congratulations.

    • enclose your container in <main> tag ,use alt="" in your <img> tag to resolve accessibility issues.

    • To create that hover effect create a div with same image size using (:before) pseudo element give it backround color then centre the icon inside then make it position absolute to place it above the img and reduse the opacity and z- index property and while hovering change the opacity .Use( cursor:pointer; )property in css for the img div.

    • To understand about not affecting the opacity of the icon while reducing the background opacity ,take a look at the video by (coder coder) in youtube title "how to make background image transparent in Css" will help.

    • If u still have trouble mean feel free to take a look at my project

    • You can center the content horizontally and vertically by using min-width:100vh for the body and then usedisplay:grid; justify-items:center; align-items:center; in the body.

    Best of luck hope this helps.

    Marked as helpful
    1
  • Saran•460
    @Saran-73Posted almost 3 years ago

    Hi Use<main> tag for your container to resolve accessibility issues.

    0
  • Saran•460
    @Saran-73Posted almost 3 years ago

    Use<main> tag for your container to resolve accessibility issues.you have <div> outside <main>

    0
  • Gene•40
    @iamgenechuaSubmitted almost 3 years ago

    I would like to find out how I can structure my html and css code cleaner. It seems more verbose than it should be because of the hover states.

    Responsive NFT preview card with CSS Grid

    2
    Saran•460
    @Saran-73Posted almost 3 years ago

    Hi 👋 congratulations on finishing this challenge

    • Use<main> tag for your container to resolve accessibility issues.

    • change your h2 to <h1> don't use h tags to get desired size u can change it in css bcoz h tags should always be in order.

    • Try to avoid Id selector you should know when to use Id ,class and when not to so learn about selector specificity this is important.

    Best of luck keep learning.

    Marked as helpful
    0
  • Saran•460
    @Saran-73Posted almost 3 years ago

    Hi 👋 congratulations on finding your way to finish this project.

    • use<main>tag for u r container to resolve the accessibility issues.

    Best of luck for your future works.

    0
  • Saran•460
    @Saran-73Posted almost 3 years ago

    Hi 👋 congratulations on finishing this challenge:

    • Use <main>tag for your container this will solve accessibility issues.
    Marked as helpful
    0
  • Akash Pandya•10
    @akashpandyaSubmitted almost 3 years ago

    I couldn't get the Box shadow to work. I will take any and all criticism or advise. Thanks to any to who respond, I am eager to learn.

    NFT Card Challenge

    3
    Saran•460
    @Saran-73Posted almost 3 years ago

    Hi 👋

    • Try this box-shadow:0px 13px 3px 10px rgba(0,0,0,0.1), 0px 26px 5px 18px rgba(28, 38, 53, 0.1);

    • use <main>tag for your container

    • change <h4> to <p> tag, u should use h tags in increasing order.

    Marked as helpful
    1
  • david flo•80
    @davflocreatorSubmitted almost 3 years ago

    i can't make the background for the hover image to work any solutions are welcomed, thanks for reading :)

    Nft-card preview

    2
    Saran•460
    @Saran-73Posted almost 3 years ago

    Hi 👋

    • change your <h2>to <h1> to resolve accessibility issue.

    • To create that hover effect create a div with same image size using (:before) pseudo element give it backround color then centre the icon inside then make it position absolute to place it above the img and reduse the opacity and z- index property and while hovering change the opacity .Use( cursor:pointer; )property in css for the img div.

    • To understand about not affecting the opacity of the icon while reducing the background opacity ,take a look at the video by (coder coder) in youtube title "how to make background image transparent in Css" will help.

    Hope this helps

    0
  • Jennifer•220
    @Jennifer1919Submitted almost 3 years ago

    Hi! Can someone help with the accessibility issues? I don't know anything about ARIA so if you have any ressources please feel free to share!

    Order Summary Component Main

    2
    Saran•460
    @Saran-73Posted almost 3 years ago

    Hi 👋 Jennifer,

    • Change the container <div> i.e your "id=content-box" to <main> tag this will resolve the issue.

    • I noticed that you use id selector instead of class or tag don't just use id or class you should know when to use and when not to use them, so learn about specificity this is important.

    • One more thing you don't have to paste the entire link in HTML to access icons/images instead copy-paste the relative path this will help to understand.

    Best of luck.

    Marked as helpful
    0
  • renan•50
    @RenanGuapyassuSubmitted almost 3 years ago

    I had an issue with the background for the mobile version, i'd aprecciate if someone can help me.

    HTML and CSS

    1
    Saran•460
    @Saran-73Posted almost 3 years ago

    Hi Renan, I just want to mention a few things:

    • Change the container <div> to <main> tag to resolve the accessibility issue.

    • You don't have to set the background-size:100% or cover and use background-repeat: repeat-x; in both of your background patterns.

    • Then change your body background-color: hsl (225, 100%, 94%); to this value.

    Best of luck, hope this helps.

    Marked as helpful
    0
  • Saran•460
    @Saran-73Posted almost 3 years ago

    Hi, Mark-Congratulations on finishing this project. Just a few things to mention:

    • Change your container <div> to <main>tag this will solve accessibility issues.

    • You don't have to rewrite block declarations for each class when they have the same value instead you can just use a comma and write like size14,size6,size8{margin: 0 1.5rem;}.

    • Use more meaningful tags, change your box <div> to <section> tag for all three, inside them use <h1>and <p> tags.

    • If you use font-size:1.11vw in the top box for the desktop site and then by adjusting the padding, the font will look much better and closer to design.

    Marked as helpful
    0