social-links-profile-main

Community feedback

• 

  P

  M Kerr•2,130

  @mkerr-github

  Posted about 2 months ago

  Here's a very good primer on responsive web design by w3 schools that I found useful. It's a great reference site for HTML and CSS, and a quick practice of the concepts.

  https://www.w3schools.com/html/html_responsive.asp

  Basically, you can use media queries, where you can specify in the CSS that certain properties and sizes should change once the pixel size of the screen reaches a certain size. Watch a few short tutorials on CSS and media queries.

  Here is a nice short explanation as well on W3 schools:

  https://www.w3schools.com/css/css_rwd_mediaqueries.asp

  For responsive purposes the convention is to convert pixel measurements to "rem". To do so divide the pixel value by 16 (as the base rem is 16px, because 16px is the default font size setting size on most browsers).

  Then use max-width to set the large widths for desktop and min-width to set the small widths for mobile. Try to let the browser set the heights of elements unless you need a very specific height.

  The convention is to use rem and sometimes em, instead of pixels for most items, as rem and em are more responsive than pixels. Pixels can be used for small elements like icons and buttons where you do not want the size to change even on small screens.

  More details here: https://austingil.com/px-or-rem-in-css/#:~:text=Pixels%20are%20an%20absolute%20unit,the%20equivalent%20of%2024%20pixels.

  If you found anything in this comment helpful:

  Please remember to click the ‘Mark as helpful’ button, thank you!

  Keep up the good work, and keep going! 👋

  00

  Marked as helpful