Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Visual Studio Code

mer 60

@MER-PEX

Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What specific areas of your project would you like help with?

how do i make a mobile vertion of this website??

Community feedback

P

@joshhovis

Posted

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

@Aneesh-Malapaka

Posted

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

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord