Skip to content
OverviewSolutions
16
Comments
10
YoungZV
@YoungZV

All comments

  • YoungZV•260
    @YoungZVPosted about 1 year ago

    Congrats on your solution.

    I solve this problem by adding opacity: .5 to my img and the img container colour is soft violet.

    Hope you find this answer helpful

    Regards, YoungZeeZee

    1
  • YoungZV•260
    @YoungZVSubmitted over 1 year ago

    Any feedback is appreciated. Please let me know where i need to be improved.

    How can I not to use negative margin on my .main class to have a 100% page view without appearing a scroll bar? No margin on the header but they are too far from each other by default. Thank you.

    Huddle landing page-with-single-introductory-section-master

    1
    YoungZV•260
    @YoungZVPosted over 1 year ago

    I have made some changes to avoid negative margin on .main class.

    0
  • YoungZV•260
    @YoungZVPosted over 1 year ago

    Hi @MK-Muzzammil,

    Congrats on your solution.

    I added the colour (background) to my image container and gave opacity .5 to my img.

    Hope you find it helpful.

    ZV

    0
  • Natnael Kagnaw•160
    @NatnaelSisaySubmitted over 1 year ago

    Making the right media query breakpoint without loosing the image aspect was a bit challenging. If you have a trick on how you handle your media queries and images, i would love to hear about it

    Stats preview card component

    1
    YoungZV•260
    @YoungZVPosted over 1 year ago

    Hi @NatnaelSisay,

    Congrats on your solution. I have the same issue but i was told to try to use object-fit (css - https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) for images .My image had destroyed the whole site.

    1
  • YoungZV•260
    @YoungZVPosted over 1 year ago

    Hi, Congrats on your solution.

    There is no rule about how many newbie challenges we need to complete to start doing higher level solutions. It depends on your feeling. If you feel that the beginner solutions are too easy, just go to the next level.

    Hope it helps,

    BR, Zoltan

    0
  • YoungZV•260
    @YoungZVPosted over 1 year ago

    Congrats on your solution.

    I would like to mention one thing hope it will help you.

    • button element has a default solid black border, so when you create a button the border-colour needs to be changed to a colour that you want for your button element. In this case the whole button is purple but the border is black.

    All the best .

    Kind regards, Zoltan

    Marked as helpful
    0
  • Daniel Hameed•140
    @HDanielOSubmitted over 1 year ago

    My first HTML & CSS project in a while. There's something I don't still get about responsiveness and media queries, why do I have to write so much code just to make one section responsive, or is there something I'm not doing well, something I should use, or am I just overreacting. Thanks

    Responsive Four Card Section with HTML and CSS

    1
    YoungZV•260
    @YoungZVPosted over 1 year ago

    Hi I am not expert, still learning things but maybe better to do mobile first approach. As mainly all the html elements are block elements so it is always easier to start with it. Style everything in "mobile first" approach then when you need to do media queries it would need less codes.

    Marked as helpful
    1
  • YoungZV•260
    @YoungZVPosted over 1 year ago

    Hi, great job, congrats on your solution.

    As i see there is a black border on your button as it has black border by default. To make it nicer I suggest adding border:none to your button and there would not be different colours when you click on it.

    0
  • Joseph Uchechukwu Kingsley•120
    @KingsleyChukwuSubmitted over 1 year ago

    I nested all the img element in a div, then I set the image to take 100% width of the parent div container.. I wonder if there is any difference between using just the img element and giving it a width or nesting it in a div and allowing it to assume the full width of its container.

    NFT preview card component built with HTML and CSS

    1
    YoungZV•260
    @YoungZVPosted over 1 year ago

    Hi congrats on your solution,

    Just a suggestion:

    Try to add interactive elements to your code such as <a> or button. The template images show that there are 3 elements that are needed.

    Marked as helpful
    0
  • Luan Lessa•20
    @LuanLessaSubmitted over 1 year ago

    I had some trouble figuring out how to center proprely,

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

    I'm not 100% though, and i have no clue about best pratices, so any hint I would appreciate it.

    First Page - QR Code with simple HTML and CSS

    2
    YoungZV•260
    @YoungZVPosted over 1 year ago

    or you can try this: min-height: 100vh; display: grid; place-items: center;

    1