Skip to content
OverviewSolutions
34
Comments
41

Bernardus

@BernardusPHSouth Africa1,095 points

Learning to be a full stack web developer

I’m currently learning...

Typescript React, Express

Latest solutions

View more solutions

Latest comments

  • Bernardus•1,095
    @BernardusPHPosted about 2 years ago

    Hey ALEXIS DAVID QUIZHPE MENDOZA.

    I see that you are hard coding the width of the card to 280px so even if you use min-width or max-width it would do nothing since your card will stay at 280px. You could leave it at 280px which is fine but if the screen gets smaller you can add something like this:

    @media(max-width:400px)///you can tweak this
.card{
width:80%;
max-width:400px;
min-width:300px;
}

    This is just an example but this will change the width of the card to 80% of the parent container but it will not get bigger than 400px and not get smaller than 300px at 400px screen size or less

    I would recommend using clamp here. clamp can be used when want a min-max setting but want to work in between the min and max. Sorry for the terrible explanation but here is an example: width:clamp(500px,80%,700px) Here the item will be 80% the parent's width but it cant be greater than 700px or smaller than 500px this helps when resizing the screen.

    Please don't use a div as a landmark without reason(like a framework). What I mean is, the DIRECT children of the body. There are a few landmarks like

    • nav
    • main
    • footer
    • aside etc.

    For your project I would just replace the direct children of the body into main since you just have a card. The reason for this is for the developers so we don't get easily lost in the code and also screen readers use the landmarks.

    I see that you did not add a box-sizing:border-box; to your * like:

    *{
box-sizing:border-box; 
}

    This makes working with margin and padding easier as they wont increase the width of your containers easily.

    Also I dont see a min-height:100dvh/vh on the body use min-height:100vh and min-height:100dvh the min-height makes your body's height as big as the screen but it can then increase based on the content. The dvh is for more responsiveness but put the vh before this as some browsers cant read dvh. And you dont have to put that margin-top on the card then because the height of the body will align the card in the center now with the help of the flex code you have.

    body{
min-height:100vh;
min-height:100dvh;
}

    Hope this helped.

    1
  • Bernardus•1,095
    @BernardusPHPosted about 2 years ago

    Hey UZAINMALIK123

    For the height and width I would recommend mostly playing with the width more than the height since the content in the card will sort out the height mostly. I see that you can remove the height of the card and just by adding a padding-top and padding-bottom of 1rem fixed the height problem(you can tweak this). Its generally a bad idea to mess with height except if you have a specific goal in mind.

    If you really want to play with width and height a lot then I recommend using clamp. clamp can be used when want a min-max setting but want to work in between the min and max. Sorry for the terrible explanation but here is an example: width:clamp(500px,80%,700px) Here the item will be 80% the parent's width but it cant be greater than 700px or smaller than 500px this helps when resizing the screen.

    Also Don't use height:100dvh on the body rather use min-height:100vh and min-height:100dvh the min-height makes your body's height as big as the screen but it can then increase based on the content. But put the vh before this as some browsers cant read dvh.

    body{
min-height:100vh;
min-height:100dvh;
}

    I see that you did not add a box-sizing:border-box; to your * like:

    *{
box-sizing:border-box; 
}

    This makes working with margin and padding easier as they wont increase the width of your containers easily.

    Lastly please don't use a div as a landmark without reason(like a framework). What I mean is, the DIRECT children of the body. There are a few landmarks like

    • nav
    • main
    • footer
    • aside etc. For your project I would just replace the direct children of the body into main since you just have a card. The reason for this is for the developers so we don't get easily lost in the code and also screen readers use the landmarks.

    Hope this helped.

    Marked as helpful
    1
  • Bernardus•1,095
    @BernardusPHPosted about 2 years ago

    Hello MATTFORRESTER39.

    For design responsive I see that your <div id="qr-code-container"> is set to 18 rem so that is breaking your card when you resize because the card might get smaller but not the image itself because it is set at 100% width. But since it reached the min of 375 px screen size and is fine then nothing is wrong but I would rather put the <div id="qr-code-container"> at 100% width width a bit of padding on the parent.

    Don't use height:100vh on the body rather use min-height:100vh and min-height:100dvh the min-height makes your body's height as big as the screen but it can then increase based on the content. The dvh is for more responsiveness but put the vh before this as some browsers cant read dvh.

    body{
min-height:100vh;
min-height:100dvh;
}

    The dark theme was a nice touch I like it.

    Yes github was quite difficult starting out. I would recommend just manually putting the files in the github repo and then launching it from pages. If you get used to it then I would highly recommend learning Git as it can make editing and storing your projects on github much easier.

    Hope this helped.

    0
  • Bernardus•1,095
    @BernardusPHPosted about 2 years ago

    Hello FELIPE ALVES LEÃO DE ARAÚJO

    For this problem:

    I see that you are setting a max-width:300px on the the card and then when the screen gets smaller you try to make it bigger which it cant, well usually it cant but with css I am suprised this didnt work. Anyway you cant go over 300px and you are trying to set it to 400px. I suggest using clamp here as you can set it in the card in the normal view and once your screen geta smaller you can add another clamp. Please look it up futher as it is a great tool.

    This should help with your media problem, if not then just ask.

    I have a few suggestions for you that might help other than the media.

    First please dont use divs as landmarks if you are not using a framework/library like react. What I mean is the direct children of the body.

    Landmarks include:

    • nav
    • main
    • footer
    • etc

    Lanmarks are used by screenreaders and landmarks make it easy for us to read the code so change the card div to a main.

    Add this to your code and it would make life easier:

    *{
////makes it so padding and margin wont increase the container's size////

box-sizing:border-box; 

}

body{
///adds a perfect height to body(the height starts at the height of the screensize.////
min-height:100vh;

////puts the card in the middle////
display:flex;
justify-content:center;
align-items:center:center;


}

    Hope this helps.

    Marked as helpful
    1
  • Bernardus•1,095
    @BernardusPHPosted about 2 years ago

    Hello MATHEUS CHRISPIM PELEGRIN

    Well we are mostly stuck with html and css but there are frameworks/libraries to help out like tailwind and sass/scss. Is there a problem with the background image size, if so then I would recommend using clamp for resizing.

    clamp can be used when want a min-max setting but want to work in between the min and max. Sorry for the terrible explanation but here is an example: width:clamp(500px,80%,700px) Here the item will be 80% the parent's width but it cant be greater than 700px or smaller than 500px this helps when resizing the screen.

    Hope this helped. If you have more problems then don't hesitate to ask.

    Marked as helpful
    0
  • Bernardus•1,095
    @BernardusPHPosted about 2 years ago

    Hey JOSEPH CASTELLI

    Great project. I would like to add a suggestion

    Please don't use a div as a landmark without reason(like a framework). What I mean is, the DIRECT children of the body. There are a few landmarks like

    • nav
    • main
    • footer
    • aside etc.

    For your project I would just replace the direct children of the body into main and footer respectfully. The reason for this is for the developers so we don't get easily lost in the code and also screen readers use the landmarks. The footer is for the link that you can place at the bottom

    Hope this helped

    Marked as helpful
    1
View more comments