Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
15
Comments
4

osiz00

@osiz00420 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

  • Responsive landing page using CSS flex box and CSS Grid


    osiz00•420
    Submitted almost 2 years ago

    0 comments
  • link shorteining website using React

    #material-ui#react

    osiz00•420
    Submitted almost 2 years ago

    0 comments
  • Responsive app UI using tailwind css

    #tailwind-css

    osiz00•420
    Submitted almost 2 years ago

    0 comments
  • React app with redux


    osiz00•420
    Submitted almost 2 years ago

    0 comments
  • Responsive notification page using css grid


    osiz00•420
    Submitted almost 2 years ago

    0 comments
  • Responsive landing page using HTML, CSS and vanilla JS


    osiz00•420
    Submitted almost 2 years ago

    2 comments
View more solutions

Latest comments

  • LucaD•170
    @LucaDoro
    Submitted almost 2 years ago

    QR Code Card (Flexbox)

    2
    osiz00•420
    @osiz00
    Posted almost 2 years ago

    very nice design, this shows your skill in using css, for centering the container the problem here comes form the body height , since the height is as default fitting the content if you used margin auto the centering will be just horizentally, so first do that body { height : 100vh; } then margin auto will center the contianer both horizentally and vertically , but for me i would rather use the grid like that. body { height: 100vh; display: grid: placecontent: center; } ok i hope that i was helpful keep the hardwork.

  • Destyx9•100
    @Destyx-9
    Submitted about 2 years ago

    QR Code Component Solution

    2
    osiz00•420
    @osiz00
    Posted about 2 years ago

    great design, but your img width is a little bit more that the origin not something bit but try to make it less with max-width, istead of div as the parent element you can use main, i really liked the responsive site

  • Priscilla Ilha Carbonell•20
    @Pricbnll
    Submitted about 2 years ago

    Result and Summary Component

    2
    osiz00•420
    @osiz00
    Posted about 2 years ago

    yeah its very confusing, but i can tell about some things that help me with that, first use inspect, in the page you are desigening click right click and inspect, it makes the process more visual, some time the parent div is so small and child div will not move any where, you can add to the style {width:100%, height:100%} as a begging to check if that is the proplem. a great thing to watch i video or two about the grid flex or position, youtube will be very helpful, good luck priscilla your desigen is great.

    Marked as helpful
  • Jennyfer17•30
    @Jennyfer17
    Submitted about 2 years ago

    HTML and CSS

    3
    osiz00•420
    @osiz00
    Posted about 2 years ago

    nice design Jennyfer17’, about making it responsive you can try using more fluid units such as img {width:90%;}, use less px units because it tends to make the site dimensions fixed but with % dimensions of the site change with the width of the screen, also i recommened to make a div for the image and give it a width of 100%, then for the image {margin: 10px auto}, to center it horizentally, for making the website even more responsive you can use media quaries, youtube is full about media quaries lessons, i hope that i was helpful.

    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