Skip to content
OverviewSolutions
21
Comments
5
Viktor Kovács
@victorsonet

All comments

  • Anthony Becarne•160
    @AbecarneSubmitted over 2 years ago

    Hi !

    I failed in the card dimensions as I didn't succeed in setting a height for it. Then, I should have centered the card in the middle of the screen, but same as the height, it wouldn't apply the "center" property no matter what I changed.

    Does anyone knows how can i fix that ?

    Thank you :)

    NFT Card Component

    4
    Viktor Kovács•310
    @victorsonetPosted over 2 years ago

    Hey,

    • If you check the body height by opening Developer tools and hovering over body, you can see right now the body takes half of the screen only, you can change that by adding min-height: 100vh to the body
    • You used flexbox's align-items: center already which will center your card to the middle of the 100vh after setting the min-height as well.
    • Right now the card's width is 25% and the thing with that is that if you change the screen size for 750 pxs for example it will be 25% of 750pxs and its not getting bigger, one way to go around this is setting card width to width: min(25rem, 85%) for example, so until 85% of the page width is bigger then 25rem it will use 25rem, if the 85% becomes less then 25rem the card will use that, basically its always using the smaller value.

    I tried to be more detailed so it serves you a little bit better and I hope it helps you!

    Marked as helpful
    0
  • scoltelli27•30
    @scoltelli27Submitted over 2 years ago

    I used just html for the form validation since its already integrated. I didn't see any particular benefit on doing it through javascript, maybe someone can clarify that for me? What's the point on validating through js if it can be done with html and the browser?

    Responsive site using flex

    2
    Viktor Kovács•310
    @victorsonetPosted over 2 years ago

    Hey, The reason you want to use JS instead of HTML is because with JS you can make certain user limitations, for example not letting submit the page when certain inputs are empty or only allowing passwords that have one uppercase letter and 8 letters long etc. Normally without JS (which works on the client side) validation the user data goes instantly to the server and that will do the validation which takes longer time then doing it on the client side, where you instantly get the feedback and you don't make extra work for the server either. I hope this answered your question!

    Marked as helpful
    1
  • Erycah Jules•20
    @EJdevgithubSubmitted over 2 years ago

    For me the hardest part the hover effect when the cursor hover over the buttons... i dont why its not working...so if you have suggestion on how to solve

    3 Column Preview CArd

    4
    Viktor Kovács•310
    @victorsonetPosted over 2 years ago

    Hey!

    • If you want to have a specific cursor for the button you want to add the cursor property to the button element or to the button:hover selector and the cursor for this case is pointer!
    • https://developer.mozilla.org/en-US/docs/Web/CSS/cursor, you can find everything about it here.

    button { cursor: pointer; }

    I hope this answered your question!

    Marked as helpful
    0
  • Hansika Murugu•50
    @hmuruguSubmitted over 2 years ago

    How do I ensure that my display is responsive across different displays? Even when I add the media query, it doesn't work for me. Any help would be nice!

    QR Code Component

    1
    Viktor Kovács•310
    @victorsonetPosted over 2 years ago

    Hey, if you want to make the project responsive I would have few suggestions:

    • If you shrink the page now, the card is moving towards the upper part of the page because you used margins to center the card, another way of doing this (imo its more effective) is using display: flex on your body - now since you have two childs under your body (content and attribution), both will go next to each other because the default flex-direction is row so you want to change that to column. Next thing is you give a min-height: 100vh to the body so it uses the hight of the whole screen and this way you can replace margin-top and left with align-items: center and justify-content: center and you disable the bottom: 30px of .content class.
    • Once you have the previous part, the card becomes bigger then before because there is no margin which cuts off some of the page width and the width: 51% of the .content becomes bigger because the whole page width is bigger, the way you can counter that is you add width: min(20rem, 90%) - this will watch which value is smaller (first is 320px (20*16), second is depending on the page size) and use that width, when you have this property the card width wont change so you have it on all sizes, oh and this way you don't need a media query!
    • Last thing is on the .attribution class, where you defined the padding with % which changes when the page size is changing (so basically 100px's 10% is 10px, 1000px's 10% is 100px) which means it will move if you change the page size, to fix this you could give it padding-top: 2rem and it will stay on the same place.

    I tried to be more detailed so it serves you a little bit better and you probably feel overwhelmed by all these things, stay strong and keep going! If there is anything you are unsure of you can just reply and I will try to answer!

    0
  • Viktor Kovács•310
    @victorsonetPosted over 2 years ago

    Hey!

    • Usually you don't want to give set hight to the card, the reason for that is it will grow as it gets more content (for example by adding one more paragraph to the card it will grow with the hight of that paragraph), so with the right amount of content and padding the card will be the same hight as it needs to be.
    • In this project the main content of the card is a column (only the followers, cards and likes part is a row itself where you did well with flexbox), so you can use flexbox on the whole card as well and set the flex direction to column, then set align items to center and this way everything you have in the card gets centered so you dont need extra padding from the left side where you used that for the elements
    • Last thing is setting up the picture on the upper part of the card with width and height of 100% so it fits the whole box everytime you resize it
    • maybe I would add one more media query just so there is not overflowing in neither of the screen sizes

    I tried to be more detailed so it serves you a little bit better and you probably feel overwhelmed by all these things but stay strong and keep going brother!

    0