Skip to content
OverviewSolutions
13
Comments
2
Abieb_Guardian
@AbibGuardian50

All comments

  • Revin•280
    @revin212Submitted almost 2 years ago

    From viewport width 700px to 800px, the .articles (the bottom section) content is overflowing on the right side. I tried reasigning the right-margin to 1 rem, but it didn't fix. Any idea how to fix it?

    News Homepage using SASS, CSS Grid, and Vanilla JS

    2
    Abieb_Guardian•200
    @AbibGuardian50Posted almost 2 years ago

    Hi revin congratulations for your completions on this challenge

    For your questions,you can use padding-right : 1.25rem to fix your overflowing content on the right side.

    I hope it can help

    Have A great day!

    0
  • Aviral Sharma•220
    @aviralsharma07Submitted almost 2 years ago

    • I am facing an issue with setting up Media Queries to change the border radius of each column as screen size changes but it is not working. Please give me feedback as to how can I do that.

    • I'd love to know if I have written clean code and written which was not required.

    Responsive 3 Column Preview card using Flexbox

    4
    Abieb_Guardian•200
    @AbibGuardian50Posted almost 2 years ago

    Hi Aviral Sharma! Congrats on your achievement to complete this challenge

    Before the answer,you could read about css shorthand on border radius and @media screen rule in https://www.w3schools.com/cssref/css3_pr_border-radius.php and https://www.w3schools.com/cssref/css3_pr_mediaquery.php First,to change the border radius as screen size changes,you need to know which border you want to change. You can use this on your code @media all and (max-width: 600px) { .card1{ border-radius: 10px 10px 0px 0px; } .card2{ border-radius: 0 0 0 0; } .card3{ border-radius: 0 0 10px 10px; } }

    And then,you can delete @media all and (max-width: 1023px).

    Is there any question,please ask and correct me if im wrong Thank You!

    Marked as helpful
    0