Skip to content
OverviewSolutions
11
Comments
11
talentlessDeveloper
@talentlessDeveloper

All comments

  • talentlessDeveloper•340
    @talentlessDeveloperPosted over 2 years ago

    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
    0
  • sek-devops•110
    @devwinner-sekSubmitted over 2 years ago

    I'm new on Frontend Mentor. This is my first challenge.

    1. In responsive side, do i need to use media queries for this challenge ? (Because the content will be centered in all screens desktop, mobile)

    HTML, CSS

    3
    talentlessDeveloper•340
    @talentlessDeveloperPosted over 2 years ago

    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
    0
  • talentlessDeveloper•340
    @talentlessDeveloperPosted over 2 years ago

    Impressive!

    1
  • talentlessDeveloper•340
    @talentlessDeveloperPosted about 3 years ago

    This is impressive! welldone

    1
  • talentlessDeveloper•340
    @talentlessDeveloperPosted about 3 years ago

    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
    0
  • Bandaru Sindhuja•190
    @SindhujaBandaruSubmitted about 3 years ago

    This is My First Website. I would like to take any suggestions regarding my code approach to make a responsive website. Could anyone tell me how do i have to approach about border-radius for a responsive website.

    3Column-preview-card-component using Flexbox

    2
    talentlessDeveloper•340
    @talentlessDeveloperPosted about 3 years ago

    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
    0
  • Bojan•40
    @Bojan227Submitted about 3 years ago

    Hey guys, can someone give me feedback about my code and i tried to make this responsive but i cant achieve this, so please give me any hints on how to make it better? Thank you in advance!

    Signup form with HTML/CSS/JS

    3
    talentlessDeveloper•340
    @talentlessDeveloperPosted about 3 years ago

    @Bojan277 the desktop version is great! but using desktop approach first means your mobile version is going to inherit values from desktop.

    I don't know how the mobile version looks like but i believe it shouldn't be more than stacking upon each other.

    So in your media query for your mobile,

    • add padding to your container.
    • Remove the left and right margins you added to H1 and p tags.
    • text align center your code.
    • Instead of a 35vw for your right box change it to 100%.
    • Also reduce the font for your h1 tags and placeholders too.

    goodluck

    Marked as helpful
    1
  • Shuree•65
    @shuree0331Submitted about 3 years ago

    I am having a tiny problem the nav section is not showing on the Safari browser on mobile. If anyone has any suggestion or solution, please help me. Thank you.

    SunnySide Agency Landing Page

    6
    talentlessDeveloper•340
    @talentlessDeveloperPosted about 3 years ago

    @Shuree the nav on my device looks awesome, welldone.

    0
  • talentlessDeveloper•340
    @talentlessDeveloperPosted about 3 years ago

    Hi Oluwafemi,

    add a before pseudo class to your anchor tag something like this

    
 a::before {
   display: block;
  content: "";
  position: absolute;
  top: 0.6875rem;
 left: -0.25rem;
 width: 108%;
 height: 0.4375rem;
 opacity: 0.6;
 border-radius: 10px;
 z-index: -1;
background-color: yellow;
}

    you can adjust the values and background-color as you see fit.

    Welldone!

    Marked as helpful
    0
  • talentlessDeveloper•340
    @talentlessDeveloperPosted about 3 years ago

    For a first responsive site, this is great!

    1
  • Shuree•65
    @shuree0331Submitted about 3 years ago

    I am having a tiny problem the nav section is not showing on the Safari browser on mobile. If anyone has any suggestion or solution, please help me. Thank you.

    SunnySide Agency Landing Page

    6
    talentlessDeveloper•340
    @talentlessDeveloperPosted about 3 years ago

    Hello Shuree, the desktop version looks good! I'm guessing there's no mobile version. Also the width of the nav overflowed on my desktop using 100vw instead of 100% made it work fine.

    welldone!

    0