Skip to content
OverviewSolutions
7
Comments
6

Abdul

@abdulrahman-rwim255 points

I have a passion for building websites and I love coding and solving problems I love sharing my knowledge with others, my goal is to be a professional frontend developer and to be successful in life

I’m currently learning...

javaScript and Scss

Latest solutions

View more solutions

Latest comments

  • Abdul•255
    @abdulrahman-rwimPosted over 3 years ago

    hey @ACdev27 good job solving this challenge, I've some feedback for this solution

    • the .photo-set__images are too big and they are causing overflow issue to avoid this problem give them a max-width .photo-set__image { max-width: 45%; }
    • and for the .introduction__images reduce the margin-left to maybe 6px to make them align perfectly Example: .introduction__image-1--tablet { margin-left:6px; }
    • I suggest adding transition: background 250ms; to the buttons, this will make: hover smoother.
    • I hope this was helpful for you, other than that, nicely done, happy coding 😄
    Marked as helpful
    0
  • Abdul•255
    @abdulrahman-rwimPosted over 3 years ago

    Hey @jones9411, you can solve this problem using grid I'm not sure how to solve it with flex-box,

    • this will solve the problem without using margin .column.c { display: grid; align-content: center; } I hope this was helpful for you 😄
    Marked as helpful
    1
  • Abdul•255
    @abdulrahman-rwimPosted over 3 years ago

    Hi @Yahir-am good job solving this challenge, I've got some feedback for this solution.

    • the background image does not cover the entire page to solve it try this line of code background: var(--violet) url("./images/bg-desktop.svg") no-repeat top left / cover;
    • check out this amazing article on the background property
    • avoid using height especially on images because that makes them stretch
    • wrap the illustration image with div and give it max-width:100% to make sure not to get bigger
    • give your text content a limit width max-width:40% to make sure not to get bigger
    • avoid using width and height on buttons use padding instead ,try this button { display: block; margin-top: 1.5em; padding: 0.7rem 5rem; }
    • I suggest adding transition: color 250ms; to the button and the links, this will make: hover smoother.
    • start with the mobile design first because that makes styling elements easier
    • lastly to fix the accessibility issue remove the script tag from the body and for the icons use this instead put a CDN link inside the head tag you can find it here font awesome CDN link
    • I hope this was helpful for you, other than that, nicely done, happy coding 😄
    Marked as helpful
    0
  • Abdul•255
    @abdulrahman-rwimPosted over 3 years ago

    Hi Kasia your solution for this challenge looks really awesome well done everything looks almost perfect, just one thing I noticed on the mobile view is the illustration image causing an overflow issue, to solve the problem: you can give the image a max-width:100%; to make sure not getting bigger, try this code: img.header__main-illustration { max-width: 100%; }, the font-size for .button--pink on the mobile view really small if you make it 16px will be perfect, and that's all, happy coding 😄

    Marked as helpful
    0
  • Abdul•255
    @abdulrahman-rwimPosted over 3 years ago

    Hi @atoopdev Great solution well done!

    • there are some notes to make it even better

    • there is an overflow on the page, the scroll bar on the bottom use: body { overflow-x:hidden; } to remove it

    • clear the accessibility issues try the role attribute on HTML element to describe the purpose of them example: <div class="content-wrapper" role="textbox">,

    • and I recommend starting with the mobile design first

    0
  • Abdul•255
    @abdulrahman-rwimPosted over 3 years ago

    hi @peter-kalavritinos good work on this challenge your solution looks great on desktop, but it's not responsive, take a look again on the mobile view, and to get rid of accessibility issues,

    • here are some solutions
    • use semantic HTML tags <main class="main"> instead of <div class="main"> <footer class="attribution"></footer>
    • correct the HTML validation ont-size: 112x; you missed a Letter here should be font-size ,
    • you can check this video to learn more about accessibility
    • I hope this was helpful for you, other than that, nicely done, happy coding 😄
    0