Skip to content
OverviewSolutions
11
Comments
2
shalash23
@shalash23

All comments

  • Rehan•10
    @rehanmmSubmitted almost 2 years ago

    What did you find difficult while building the project?

    Text was not adapting according to screen size

    Which areas of your code are you unsure of?

    It seems that i am applying padding and margin randomly completely based on hit and trial

    I am unsure about when it preferred to use margin and padding what convention should be used

    Responsivre QR code card using flexbox

    1
    shalash23•280
    @shalash23Posted almost 2 years ago

    Congratulations on your first project.

    • Regarding the responsive typography, I found a little trick really eliminates all the headache regarding responsive typography, it is called "clamp". There is a website that I use that actually calculates the values and gives me the final clamp values to apply to font-size. Here is a link: https://royalfig.github.io/fluid-typography-calculator/

    I am quite sure this will make your life a lot easier. After finding this trick, I never write media queries for fonts.

    • I will explain this as easily as I can. I have a box, how much of the inside of the box should the content take? that's padding. How far is the box from other boxes? that's margin. When to use when? It all depends on the design, I think. But for arguments sake, let's say you have a header section that contains a logo and a hamburger icon. The header element is taking all the space. With padding, you can specify an "inner margin" you can say to those child elements. Margin comes in when you want to separate the header section from another section. There are situations where you actually have to use both, but I'd say don't complicate things at the beginnings.

    My two cents here, is that CSS requires some hit and miss until you get a grasp on how it behaves. I am sure it drove everyone who is learning it crazy at one point.

    Marked as helpful
    0
  • yungfora•20
    @yungforaSubmitted about 2 years ago

    I'm not quite sure about RWD in this project and if it is correct, let me know how do you see it guys. :)

    QR code website

    1
    shalash23•280
    @shalash23Posted about 2 years ago

    Nice job there.

    I've read the media-queries on your CSS and I've found that you've used max-width parameter with it. Which makes me take a wild guess that you went with desktop-first?

    If so, what really helped me is writing the HTML using the desktop design first so I can write according to the maximum complexity. Yet when I start styling, I go mobile first. This technique really made RWD to me much tolerable than before and now I actually kind of enjoy it.

    Also using em, rem, etc... instead of hard-coded values makes your life much easier on the long-run. So take the time to get a grasp on those units.

    Good luck and nice job

    Marked as helpful
    0