converting my project to fit in all devices - mobile, ipad and desktop #81586
-
Bodymy project currently fits great at 100% view desktop version. However, when I zoom out, It separates itself and also when I inspect it on the web and view it through other devices measures, it doesn't fit well. Please help me community =] So this is at 100% view desktop: This is zoomed out at 25% desktop view: This is responsive view on inspect settings: How can I make my site responsive for all devices please? Please see the following HTML, CSS, JS. HTML:
CSS:
JS:
Thank you community! Guidelines
|
Beta Was this translation helpful? Give feedback.
Replies: 4 comments 5 replies
-
Hey, the project looks stunning on Desktop view. For other devices you need to use media queries in order to make your website/webapps responsive. Media queries are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport. Media queries are not difficult to understand nor to implement. Please check this to get started with it. Hope this helps. If you have further doubts, express them in the comments. |
Beta Was this translation helpful? Give feedback.
This comment was marked as off-topic.
This comment was marked as off-topic.
-
Hey Selyiah, As others have suggested, media queries are indeed what you're looking for, but it seems you're still having trouble with them. I highly recommend watching the following video here made by the very knowledgeable Slaying The Dragon. In the video, he demonstrate a really useful technique involving a |
Beta Was this translation helpful? Give feedback.
-
I would Suggest the following ways:
Tip Try to learn media queries, as they are essential to ensure the performance of your site. I hope I was helpful...Thank you @Selyiah |
Beta Was this translation helpful? Give feedback.
I would Suggest the following ways: