Skip to content
OverviewSolutions
11
Comments
11

talentlessDeveloper

@talentlessDeveloper340 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • talentlessDeveloper•340
    @talentlessDeveloper

    Hi,

    Nicely done project!

    As for the white box, you can begin with adding these properties to your alert_info class. .alert_info { position: relative; background: #fff; border-bottom-right-radius: 0; }

    Then you can create a new div inside or use the ::before pseudo element let's say you created a new div inside .alert__info, add these properties to the div.

    position: absolute; width: 0; height: 0; border-top: 22px solid #fff; border-left: 22px solid transparent; right: 0px; bottom: -14px

    You can adjust the values to fit your preference.

    if you want to learn how to create shapes using css, here is a link Css shapes.

    Marked as helpful
  • talentlessDeveloper•340
    @talentlessDeveloper

    Hi @devwinner-sek,

    It's actually not necessary you use media queries as everything is centered.

    You can add margin:0 to the body to remove the default margin on it so that everything is properly centered especially on mobile view.

    Also you should add padding-bottom to your container as some of the contents are hidden.

    This is impressive work, welldone

    Marked as helpful
  • talentlessDeveloper•340
    @talentlessDeveloper

    Impressive!

  • talentlessDeveloper•340
    @talentlessDeveloper

    This is impressive! welldone

  • talentlessDeveloper•340
    @talentlessDeveloper

    hi @tayk6ix, Something is off, seems like you hosted your readme instead of the live site. Try and upload the real project itself.

    Marked as helpful
  • talentlessDeveloper•340
    @talentlessDeveloper

    Hi @SindhujaBandaru,

    Move your media query to the bottom of the page.

    then in your media query you should add

    @media screen and (min-width: 62.5rem) {  
 .sed {
    border-radius: 10px 0 0 10px;
  }
  
  .lux {
     border-radius: 0 10px 10px 0;
  }
}

    then outside of your media query your .sed and .lux class should have a border-radius of

    .sed {
 border-radius: 10px 10px 0 0;
}

.lux {
border-radius: 0 0 10px 10px;
}

    This should fix your border-radius problem. welldone!

    Marked as helpful
View more comments