Visual Studio Code

Community feedback

• 

  P

  Joshua Hovis•200

  @joshhovisPosted 4 months ago

  The way I like to do it is by doing mobile version first. This is called Mobile First Methodology and is a pretty popular way to do web design/development. If using a web browser like chrome, you can right click and inspect the page, then click the icon beside Elements labeled 'Toggle Device Toolbar'. From there you can select a device to mimic so you can see what the page looks like on that device. I select a mobile device and create the website according to design specifications.

  Once you are done with the page on a mobile device, you can make the screen bigger and use media query breakpoints to make changes to the styling allowing you to make the page look good for bigger screens. I've always found it easier to do it this way than to go from a bigger view to a smaller view.

  Feel free to ask me any questions!

  Marked as helpful

  0
• 

  MALAPAKA ANEESH•40

  @Aneesh-MalapakaPosted 4 months ago

  Heyy. First of all, great job on the replication. I figured, I can provide some help for mobile version.

  Look into the following things:

  • Responsive design using media queries. It is a way to write CSS for different device dimensions.
  • Once you figure that out, see the differences from web design to mobile. It can be spacing related, widths related. In media queries u write CSS for the an element how it should look at that dimension of device. So I think that would help you.

  Do reply incase u get stuck. I can provide my repo for hints.

  All the best.

  Marked as helpful

  0