Skip to content
OverviewSolutions
7
Comments
3
Sharhabeel B. Morad
@abelmorad

All comments

  • kingchoffy•80
    @kingchoffySubmitted over 1 year ago

    this is my first try on responsive website and i am pretty glad about the turnout. i had some issues which i have state below and hope someone is kind enough to provide a solution.

    1. i was not able to build the menu button: can someone please reference me on how to make responsive mobile menu.

    2. why do my fonts size seems to change when i view my website on different browsers. it looks good on mobile view but on desktop it changes paddings and fonts size.

    please i would like to know how i can generally improve my Code.

    :)

    Responsive News Landing page

    2
    Sharhabeel B. Morad•160
    @abelmoradPosted over 1 year ago

    For the responsive mobile menu, you need to use javascript for that. Here's the video reference for that to help you understand how it works but you have to figure out for yourself how to design per challenge specs. https://www.youtube.com/watch?v=At4B7A4GOPg&t=2s

    Your font size changed size because it's changing relative to your viewport width because you are using font-size: 1vw for example. While PX, EM, and REM are primarily used for font sizing, %, VW, and VH are mostly used for margins, padding, spacing, and widths/heights. more info: https://www.freecodecamp.org/news/learn-css-units-em-rem-vh-vw-with-code-examples/

    Marked as helpful
    0
  • Sumit Mukharjee•20
    @sumitmukharjeeeeeeSubmitted over 1 year ago

    Hyy everyone I tried to build this qr component but I am having probelm with text of header and paragraph, I am not able to make it in two lines

    QR CODE COMPONENT

    4
    Sharhabeel B. Morad•160
    @abelmoradPosted over 1 year ago

    Reduce your .qr-header { font-size: 24px }

    I would recommend using rem instead of px in your text because a pixel is not responsive, so it's better to use rem. ex. .qr-header { font-size: 1.8rem }

    more info : https://uxdesign.cc/why-designers-should-move-from-px-to-rem-and-how-to-do-that-in-figma-c0ea23e07a15

    2
  • Sharhabeel B. Morad•160
    @abelmoradPosted over 1 year ago

    • For the site to be responsive to different screen sizes you will use media query breakpoints usually you will use (375px for mobile, 768px for tablets, and 1440px for large screens. https://www.freecodecamp.org/news/css-media-queries-breakpoints-media-types-standard-resolutions-and-more/

    • For positioning elements, I find using a grid so much easier you can also flex. https://css-tricks.com/snippets/css/complete-guide-grid/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Marked as helpful
    1