Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
63
Comments
16
P

Sergei Borja

@wonderlust1011,130 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

  • Product list with cart

    #react#redux-toolkit#sass/scss#typescript#react-router

    P
    Sergei Borja•1,130
    Submitted 3 months ago

    0 comments
  • Mortgage repayment calculator

    #react#react-hook-form#typescript#zod#sass/scss

    P
    Sergei Borja•1,130
    Submitted 3 months ago

    0 comments
  • Tech book club landing page

    #motion#react#sass/scss#typescript#vite

    P
    Sergei Borja•1,130
    Submitted 3 months ago

    0 comments
  • Contact form

    #motion#react#react-hook-form#typescript#zod

    P
    Sergei Borja•1,130
    Submitted 3 months ago

    0 comments
  • Crowdfunding Product Page

    #motion#react#typescript#vite#sass/scss

    P
    Sergei Borja•1,130
    Submitted 3 months ago

    0 comments
  • OfficeLite Coming Soon Site

    #accessibility#motion#react#typescript#vite

    P
    Sergei Borja•1,130
    Submitted 4 months ago

    0 comments
View more solutions

Latest comments

  • ElsaD- Ahmed•560
    @InKABuser
    Submitted 10 months ago
    What challenges did you encounter, and how did you overcome them?

    i had problems with sizing espicially on large screen and i also could not crop some of the images as it is in the design

    What specific areas of your project would you like help with?

    how to crop the "schedule to social media" image in the right?

    bento-grid-main-FEMChallenge

    1
    P
    Sergei Borja•1,130
    @wonderlust101
    Posted 10 months ago

    Before using a reset CSS, you have to know what each style does. I learned this the hard way. This is the issue for your image not cropping:

      /*
        5. Improve media defaults
      */
      img, picture, video, canvas, svg {
        display: block;
        max-width: 100%;
      }
      
    

    The max-width: 100%; is preventing your image being larger than the container. I made this mistake as well a few weeks ago for another project. You can either unset it or change the value if you need a max-width.

    Example:

    .overflow-image {
    max-width: unset;
    }
    

    or

    .overflow-image {
    max-width: 30rem; // or whatever value you want
    }
    

    As for the image that need to crop past the bottom. Since you already have the overflow on the containers, we won't talk about that. Make the image position relative and add a top: [value] and a negative top-margin: [same value] to offset the difference. I'll take your code as an example:

    .posting-img {
        width: 75%;
        align-self: baseline;
        position: relative;
        top: 2rem;
        margin-top: -2rem;
    }
    

    This is specific to your code but you can unset margin-top at either tablet or desktop breakpoint using the same method to unset max-width and just set the value of top to what you need since your grid set the row height to the tallest container.

    Marked as helpful
  • P
    vcollins1•430
    @vcollins1
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    Creating the pop up to share the social links

    What challenges did you encounter, and how did you overcome them?

    when to use overflow hidden vs when not to use it.

    What specific areas of your project would you like help with?

    tips on using the CSS overflow property

    Article Preview Component (HTML, CSS, JS)

    #bem
    1
    P
    Sergei Borja•1,130
    @wonderlust101
    Posted 10 months ago

    Looks accurate to the design.

    As for overflow hidden, this is just a beginner's opinion but if you intent on having content going outside of the container other than the body, I wouldn't use overflow hidden. Otherwise, I would use it to make thing like components like these easier to code. However, in this component, using content overflow depends on where you put the popup in the html whether its in the container with the rest of the content or not.

  • Eric Aguayo•1,055
    @EAguayodev
    Submitted almost 4 years ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of the fact that I was able to correct the code in the footer and create a new section for the circles in the design after reviewing the code I wrote years ago when I first took on this challenge.

    What challenges did you encounter, and how did you overcome them?

    I've encountered some bugs on the mobile design where the screen allows for horizontal scrolls. Still in the works of figuring out the issue.

    What specific areas of your project would you like help with?

    I would definitely like help figuring out within my code where my issue to fix the horizontal scroll on the mobile design is explicitly happening.

    Meet landing page using flex box and css grid

    1
    P
    Sergei Borja•1,130
    @wonderlust101
    Posted 10 months ago

    I assume the horizontal scroll is because an element is wider than the viewport width. Instead of give fixed width to things, make the width responsive to the viewport width by using unit such as vw which corresponds to the viewport width or % which corresponds to the parent width.

  • HagarRagab•270
    @HagarRagab
    Submitted 10 months ago

    Testimonial gird section

    #sass/scss
    1
    P
    Sergei Borja•1,130
    @wonderlust101
    Posted 10 months ago

    based on the screenshot, it looks good but I can't get a closer look since the site is not found.

  • P
    Carlos Santana•260
    @cacesasa
    Submitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of the way I was able to incorporate the .svg file in my solution because this was the firts time using it as a background image, something that I thought was not posible. Next time I will try to not use absolute values to create the design.

    What challenges did you encounter, and how did you overcome them?

    Trying to incorparate the .svg file in the solution was a challenge for me, first I try to use it as an inline component in my HTML but when I tried to round the borders with css I realized it was not posible, and I started to look for a different solution to my problem, until I found out that I could use the image as a backgound image.

    What specific areas of your project would you like help with?

    I will love for some imput on how to make my code more compact. I think that I'm using too many lines of code to get to a solution.

    Blog preview card challenge.

    1
    P
    Sergei Borja•1,130
    @wonderlust101
    Posted 11 months ago

    What I notice is that you have some code that is either redundant or unnecessary. Fixing or removing those parts of your css will shorten your code significantly.

    For example, in this section , you don't need to put both max and min width/height when simply putting height and width will do. In addition, you grid will naturally fill the available horizontal space so you won't need width.

    Before:

    .card_wrapper{
        min-width: 100vw; // From this
        max-width: 100vw; // From this
        min-height: 100vh; // From this
        max-height: 100vh; // From this
        display: grid;
        justify-content: center;
        align-items: center;
    }
    

    After:

    .card_wrapper{
        height: 100vh;  // To this
        display: grid;
        justify-content: center;
        align-items: center;
    }
    

    Here you can just keep the width, the container will hug the height of the contents in the container.

    Before:

    .card {
        background: var(--primary-color-white);
        display: grid;
        min-width: 327px; //  From this
        max-width: 327px; //  From this
        min-height: 501px; //  From this
        max-height: 501px; //  From this
        border-radius: 20px;
        border: 1px solid black;
        box-shadow: 8px 8px 0px 0px rgba(0,0,0,1);
        padding: 24px;
    }
    

    After:

    .card {
        background: var(--primary-color-white);
        display: grid;
        width: 327px; //  To this
        border-radius: 20px;
        border: 1px solid black;
        box-shadow: 8px 8px 0px 0px rgba(0,0,0,1);
        padding: 24px;
    }
    

    Once you clean this up, the four lines of code setting height and width will turn to one or two lines of code. This is not every but hopefully this gives you a clear idea on what you need to fix.

    Have fun coding 😊.

    Marked as helpful
  • P
    Ivaylo Ivanov•260
    @ValsCodes
    Submitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    I got somewhat of a better idea on how to size things properly

    What challenges did you encounter, and how did you overcome them?

    Sizing the design with units like rem, em, svh and github pages wasn't in the mood to work that day :)

    What specific areas of your project would you like help with?

    I would love to get some straight guidelines on how to size things, since the Figma Design says one thing and I hear all kinds of other suggestions.

    How much should I trust Figma with the parameters it suggests?

    Social Links - Dynamic Resizing

    #tailwind-css
    1
    P
    Sergei Borja•1,130
    @wonderlust101
    Posted 11 months ago

    This is not much a guideline but a personal opinion from a person who regularly uses Figma. You can trust the parameters IF the website design is static and will never change.

    However, as you know, as coders, we must make the design responsive and accessible, so that many people from all over the world with unique devices whether its a phone or a computer can access the site/design/game or whatever.

    So when looking at Figma and its parameters, you can use the values but maybe when you look at it, instead of using width: 40rem from Figma for example, you can use max-width: 40rem or width: (95%, 40rem) to make it more responsive. Also, Figma tends to make everything display: flex when the solution could be better solved as a display: gird.

    There are several YouTuber the I recommend on improving CSS but the one that I always recommend is Kevin Powell. He also has videos where he codes designs from this site so I can recommend him if you want so tips on CSS.

    TL;DR: You can reference the values but don't copy everything that Figma puts for better responsiveness and accessibility.

View more comments
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub