Skip to content
OverviewSolutions
9
Comments
4
Toluwalase
@Tolux001

All comments

  • Toluwalase•160
    @Tolux001Posted over 1 year ago

    Hello Joseph.

    Congrats successfully completing this challenge! 🤝

    There are other recommendations I can assist you with regarding centering the whole NFT DIV and regarding your code.

    I want to break down the easiest way of making your layout stand out without using absolute positioning. We don't need to use absolute to center the component both horizontally & vertically. Because using absolute will not dynamical centers our component at all states To properly center the component in the page, you should use Flexbox or Grid layout.

    For this demonstration we use css Grid to center the component

    body {
    min-height: 100vh;
    display: grid;
    place-items: center;
}

    You can also read more on centering a div ----> https://moderncss.dev/resource-the-complete-guide-to-centering-in-css/

    Now your component has been properly centered.

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

    Marked as helpful
    0
  • Toluwalase•160
    @Tolux001Posted over 1 year ago

    Hello FisherSHADOW

    I Went through the code and it was brilliant, but their were no media queries which allow access to user on mobile and tabs to access all properties on your web page.

    At least 60 - 70% of people who preview your web page would do so on mobile phone or Desktop site functions in the browser.

    Once again, Great work

    001💙✌️

    @media(){ }

    Marked as helpful
    0
  • Toluwalase•160
    @Tolux001Posted over 1 year ago

    Hello @0xAbdulKhalid,
    So I was able to take your advice and I worked on another challenge . Please is their any other thing I can improve in this challenge that I didn't do

    0
  • Sudip Khatri•540
    @SudipKhatri036Submitted over 1 year ago

    I find managing the web page for different screen size difficult but i think i did my best for that and it helped me to understand media query and best practice for resopnsive website and i'm going to improve more in other challenges

    Web page using Html, Css, Javascript

    1
    Toluwalase•160
    @Tolux001Posted over 1 year ago

    Hello. An idea on how to make your image responsive on different devices

     <picture> 
  <source 
    srcset="name of image"
    media="(min-width: screen size )"
  />
   
  <source 
    srcset="name of image"
    media="(min-width: screen size)"
  />
  
**Default if your picture media query doesn't work**
  <img 
    src="" 
    alt=""
  />

</picture>

    For other responsiveness, you need to take note of important break point. Mobile S -320px. Mobile M -375px.

    Mobile L - 425px --> Tablet - 768px Most important to me for mobile devices

    Marked as helpful
    1