Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
26
Comments
6

Ruan Figuereido

@huanfs500 points

Estudando desenvolvimento Front-end

Latest solutions

  • Simple card component

    #react#sass/scss#vite

    Ruan Figuereido•500
    Submitted over 1 year ago

    1 comment
  • time tracking dashboard

    #accessibility#fetch#react#sass/scss#vite

    Ruan Figuereido•500
    Submitted over 1 year ago

    0 comments
  • simple switch component

    #accessibility#react#sass/scss#vite

    Ruan Figuereido•500
    Submitted over 1 year ago

    0 comments
  • E-commerce product page-info

    #accessibility#react#vite#smacss

    Ruan Figuereido•500
    Submitted over 1 year ago

    1 comment
  • simple dashboard component

    #accessibility#react#sass/scss#vite

    Ruan Figuereido•500
    Submitted over 1 year ago

    0 comments
  • simple accordion component

    #accessibility#react#vite#sass/scss

    Ruan Figuereido•500
    Submitted over 1 year ago

    0 comments
View more solutions

Latest comments

  • Christiana Apinoko•70
    @Shvayne
    Submitted over 1 year ago

    Results summary page designed using flex box

    2
    Ruan Figuereido•500
    @huanfs
    Posted over 1 year ago

    i've looked at your code, i realized that you divide the code in much, much pieces unnescessary. first, to build this layout using flex-box, keep in mind, the body is already an element, that being the case, it's an element with other elements inside him. divide the code only if necessary pieces, like boxes inside other boxes, visualy, the body is one box, you can resize then using "width:100vw; height:100vh" and set it to "display:grid", now use "place-items:center" and all other pieces inside body will be in the center. after that, create another "box" using and "div","section" or "article" tag, set it to a "display:flex" and, inside him you can finally build other two boxes, and set then to "width:50%" and they will have half width of parent element created before

  • Coding nub•150
    @coding-stock
    Submitted over 1 year ago

    Intro section drop down

    1
    Ruan Figuereido•500
    @huanfs
    Posted over 1 year ago

    to solve this problem you can do like me, i've created and variable called "wid", she's contain the width of the screen, i've used "let wid = window.availWidth", and then, in javascript i've switched the layout of menu (in mobile and desktop), according the value of wid, using an if/else conditional, is more easy controls some pieces of layout using javascript, like the menu and they background color, so you can do this think: build the desktop layout and, using javascript you can hide the menu items and create others with a different layout (for mobile) in javascript. if you have any trouble, check my solution or reply

  • P
    Tamara Bartley•80
    @emmecee
    Submitted over 1 year ago

    result summary component challenge

    2
    Ruan Figuereido•500
    @huanfs
    Posted over 1 year ago

    in smaller components like this, you can use flexbox to build the layout, its more easy

    Marked as helpful
  • AymaneOnline•500
    @AymaneOnline
    Submitted over 1 year ago

    Intro component with signup form

    1
    Ruan Figuereido•500
    @huanfs
    Posted over 1 year ago

    to solve the problem, you can turn ".error-text" in a positioned element, using "position:relative" and fixing it in a fixed position under the form, and finaly turns it invisible in two ways, or using "display:none" and making it a "display:inline", or making it invisible using "opacity:0" and turning it visible using "opacity:1". in that way, the error message will exists invisible fixed in a position declared and the layout not change while they apears

    Marked as helpful
  • kayswat•80
    @kayswat
    Submitted over 1 year ago

    age-calculator-app-main

    1
    Ruan Figuereido•500
    @huanfs
    Posted over 1 year ago

    try to change the color of label elements to grey, reading the readme-style-guide you can see, the size of elements "--years, ---days, --months" is 35px. try to increase the border-radius to 10px or more. you don't need a ".container" element if you have a ".hero" to house the contents. the input type can be text type too, and in the javascript you turn the value to number using something like "Number(input.value)". and finaly, instead use static values like "px" , try to use "%" or "rem/em" to make all elements responsible, Thus eliminating the need to use media queries

  • Nermeen Nasim•20
    @nermeennasim
    Submitted about 2 years ago

    Responsive Age Calculator using HTML,CSS,JQUERY

    #sass/scss#jquery
    2
    Ruan Figuereido•500
    @huanfs
    Posted about 2 years ago

    In de code above i show you my easiest solution to turn layouts responsive, first i recommend you to separate your code in small pieces like this:

    <div id="container"> <--! Here comes all pieces of your code--!> <div id="top"><--!1st piece--!></div>

    <"middle"><<--!2nd piece--!>/div>

    <div id="bottom"><--!3th piece--!></div> </div> Now, use "display:flex" property of CSS to turn this small pieces responsive. This is one method to turn layouts responsive. You can use "Bootstrap" framework to turn you code mobile-first layout for all screen size responsiveness. I recommend bootstrap because its easiest!
    Marked as helpful

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