Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
0
Comments
31
Fernando FeN
@Fernando0654

All comments

  • Tarık•330
    @developertarik
    Submitted over 3 years ago

    article preview component using css grid

    2
    Fernando FeN•425
    @Fernando0654
    Posted over 3 years ago

    It's alright, everyone here we are learning and improving.

    First of all, you need to improve your CSS skills. Try to not use too many pexels, instead use vw, vh, rem and em. I see in your code you use height property with pexels, this isn't a good idea. There is plenty of articles and videos explaining how to use these

    If you want that the button show the pop-up menu, use the :hover state. It's not the same but it will allow to complete this challenge without JS

    Good luck and good coding 👍

  • Camilo Gaviño•30
    @CamiloGav
    Submitted over 3 years ago

    HTML + CSS

    #accessibility
    3
    Fernando FeN•425
    @Fernando0654
    Posted over 3 years ago

    Right now, as you have your css, replace this to your .img-container::before. You can do this by inspecting elements first to see it works fine

       content: " ";
        position: absolute;
        opacity: 1;
        background-image: url(./images/icon-view.svg);
        background-position: center;
        background-size: 20%;
        height: 100%;
        width: 90%;
        background-repeat: no-repeat;
        background-color: blue;
        border-radius: 10px;
    

    Of course, on background-color add the right color, I just wrote blue because I don't remember the color.

    Good luck, though

    Update: Don't forget to add space on content: " ", otherwise it won't work

    Marked as helpful
  • Júlio César•80
    @jlcesarr
    Submitted over 3 years ago

    Response page using CSS Grid

    2
    Fernando FeN•425
    @Fernando0654
    Posted over 3 years ago

    I recommend to you using a max-width property to avoid content gets too large. It looks too large on my desktop, Regarding to set content on the center, point 2, I use position: absolute and then top: 50% & left: 50% along with transform: translate(-50%, -50%). Of course, this only will work fine on desktop sizes. On mobile use something with margin: auto and it'll get done almost like magic.

    Also, I don't recommend using px with the padding property because it will create you troubles. Instead, use em so they'll get a better response on big and small screens.

    Regarding to your 1 point, hope you find the answer. What I did with this one was to work with a filter css property when hovering along with the svg eye.

    Good luck!

    Update: If you don't want to use position: absolute and then top: 50% & left: 50% along with transform: translate(-50%, -50%), you can do this to your main tag and it will work in your code to solve your problem:

    Get rid of the min-width: 100vw property

    Then write width: 90%, max-width: 500px and margin: auto and it should be work

  • Pratyush Kumar•30
    @pratyush1100
    Submitted over 3 years ago

    Responsive layout using flexbox

    1
    Fernando FeN•425
    @Fernando0654
    Posted over 3 years ago

    The reason of your trouble is that top class is over the img, which has the hover state. So, it's not hovering because when you put the cursor over the img, actually you're hovering the top div and not the img

    Hope this can help you. Also, use a main tag to wrap the main content of the page. This will fix your accesibility issues

  • Taha Khairy•60
    @tahakhairy
    Submitted over 3 years ago

    social proof section with Flexbox

    1
    Fernando FeN•425
    @Fernando0654
    Posted over 3 years ago

    👋 It's not fitting well on my mobile device, the content is not center. I recommend to you using width: 95% along with max-width: *some value in px* and margin: auto on your main tag or wrapper

    Marked as helpful
  • Adrian Salinas•160
    @a-dri-an-S
    Submitted over 3 years ago

    Responsive Card Layout built with React and Flexbox

    #react
    1
    Fernando FeN•425
    @Fernando0654
    Posted over 3 years ago

    👋 Heyo! It's positioned to the left on mobile device, also I don't recommend to use too many px on your css. This may be the cause of your error

    Hope this can help ♣︎

  • Aniket•170
    @NinjaAniket
    Submitted over 3 years ago

    FAQ accordian built with React

    #react
    1
    Fernando FeN•425
    @Fernando0654
    Posted over 3 years ago

    Heyo! The "Can I cancel my subscription" section has a bug. The answer it's positioned to the right on mobile device

    Good luck on fixing this 👍

    Marked as helpful
  • Starlin de Jesus Medina•120
    @Starlk
    Submitted over 3 years ago

    To do app using react.js and styled-components

    1
    Fernando FeN•425
    @Fernando0654
    Posted over 3 years ago

    I think there's nothing wrong with using small modules, it sets the basis for a scalability in case you want to grow your project

    On the other hand, it's not responsive. It doesn't fit well on my mobile device.

    Hope this can help you to fix this ♣︎

    Marked as helpful
  • Vandna Sharma•280
    @vandnasharma26
    Submitted over 3 years ago

    Responsive React Tip Calculator App

    #react
    2
    Fernando FeN•425
    @Fernando0654
    Posted over 3 years ago

    On the total section it gets overflowed. I recommend to you using .toFixed(2) method to change 1.5899999999999999 for 1.58

    Hope it helps you!

    Marked as helpful
  • Mikhael Opeyemi-Olatunji•150
    @mikhael-oo
    Submitted over 3 years ago

    NFT-PREVIEW-CARD solution

    #semantic-ui#accessibility
    2
    Fernando FeN•425
    @Fernando0654
    Posted over 3 years ago

    👋 Hey! I saw you used max-width property with %. This isn't a good idea because it will get smaller on smaller screen sizes. The best way of doing this is:

    max-width: 600px and width: 95% for example. This way, it's not gonna grow more than 600px on bigger screens and it'll be 95% on any kind of mobile device

    Good luck, browww.

    Marked as helpful
  • Soumya Banerjee•425
    @soumya495
    Submitted over 3 years ago

    Job listings with filtering Using React JS

    #react
    2
    Fernando FeN•425
    @Fernando0654
    Posted over 3 years ago

    You can use this commands to deploy your React App when using webpack and babel. It's super easy and it helps to improve the performance ​  ​"scripts"​: { ​"dev"​: ​"​webpack serve --open --config webpack.config.js --mode development​"​, ​    ​"build"​: ​"​webpack --mode production --config webpack.config.js​"​, ​    ​"deploy"​: ​"​gh-pages -d dist​"​, }

    • With dev, it opens you a server similar to run when you're developing

    • With build, web webpack creates for you a folder with the name, usually, 'dist'

    • And finally, with deploy, I use a package of npm called gh-pages that publish the project website live for you in Github

    This is the way I do this. Hope it helps you ♣︎

    Marked as helpful
  • Jociel•90
    @jsmeyring
    Submitted over 3 years ago

    Social proof section

    2
    Fernando FeN•425
    @Fernando0654
    Posted over 3 years ago

    To get a good background position I'd suggest using a div with width and height along with the img tag and other properties like position fixed for example

    To avoid any accessibility issues when adding these tags that I mentioned, don't forget to add the attribute aria-hidden: true

    Something like this:

    <div class="img-right"> <img src="path"> <\div>

    I hope this can help you, man. I did this on my last upload and worked well

  • Nafsuki•245
    @Nafsuki
    Submitted over 3 years ago

    Meet landing page using Next.js

    #next#react
    2
    Fernando FeN•425
    @Fernando0654
    Posted over 3 years ago

    I usually have lots of issued with attributes and html when I use React, so I don't think it's to different with Next.js. Maybe there's someway to fix this, but honestly I haven't achieved that using React

    Good luck, though. I know this isn't helpful haha :c

  • Edgar Cortes•170
    @Ed149
    Submitted over 3 years ago

    Mobile First

    1
    Fernando FeN•425
    @Fernando0654
    Posted over 3 years ago

    Hey 👋 The design it's not fitting well in my mobile device

    On the other hand, to avoid the "one main landmark" accessibility issue, you need to wrap anything inside your body according to the three main landmarks which are:

    • header
    • main
    • footer

    Hope this is helpful. Good luck ♧

    Marked as helpful
  • Dina Rocio•50
    @DinaRocio
    Submitted over 3 years ago

    NFT preview card component using css and html

    2
    Fernando FeN•425
    @Fernando0654
    Posted over 3 years ago

    Regarding to accessibility issues, I'd recommend using header, main and footer as parent elements and only body child elements to avoid this accessibility issues ♧

    About your question, I use scss so I'm not the right person to answer that

    Good work, btw

    Marked as helpful
  • Sylla Ibrahim•90
    @sylla156
    Submitted over 3 years ago

    it's an ultra responsive page made with media query and flexbox and sc

    #react#sass/scss#parcel
    1
    Fernando FeN•425
    @Fernando0654
    Posted over 3 years ago

    On mobile device, Crew Section image doesn't fit well. The image covers the bullet element, so I can't even see the other guys

    Hope this can help. Best of luck ♧

    Marked as helpful
  • Arturo Israel•120
    @SimoniacJewel88
    Submitted over 3 years ago

    Responsive First mobile using Bootstrap5-Breakpoints and SASS

    #sass/scss#bootstrap
    2
    Fernando FeN•425
    @Fernando0654
    Posted over 3 years ago

    I cannot see the whole content on mobile device. I was checking your scss, I didn't see the error though c':

    On the other hand, I'd suggest not using too many px, specially on parent elements

    Hope this helps ♧

    Marked as helpful
  • Anosha Ahmed•9,300
    @anoshaahmed
    Submitted over 3 years ago

    Responsive 4 Card Feature Section Using CSS Flexbox

    8
    Fernando FeN•425
    @Fernando0654
    Posted over 3 years ago

    I think it's because of the h2 element, before h1. You have h1, h2 and h3 but they are not in a sequentially-descending order

    Great work, btw. Love when fits so well in the design / solution window

    Marked as helpful
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

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