I was just wondering if I could have some feedback and explanations on my landing product page project that I made as responsive as I could (in theory it should be responsive on TVs, Desktops, Laptops and Mobile devices).
To check out the responsiveness you can use the browser tools as you probably know ^^! I used it to code it mobile-first and I’m not entirely sure why it is not perfectly responsive but I’ll try to do my best and progress! I have a lot to learn before considering myself a Frontend .
I’d like it to be responsive like any pro sites such as toyota.com or chess.com but what happens on my app in desktop size or 4k size I believe on those two : things sometimes overlap such as the menu and the embedded video and also font sizes are too big but I didn’t that it’d be that bad on desktop size.
You just answered your own question
Just play around with your code on devtools, disabling/enabling some of your CSS rules and you will see what happens.
loooooool no. That is the tool I USED while coding and you can use it to. ‘‘I’d like it to be responsive like any pro sites such as toyota.com or chess.com but what happens on my app in desktop size or 4k size I believe on those two : things sometimes overlap such as the menu and the embedded video and also font sizes are too big but I didn’t that it’d be that bad on desktop size.’’ 2 mistakes that I am asking help for :D! and some feedback regarding anything in the project
first of all you have done a good job, and for making the elements responsive i think you should learn more about css, why the elements are overlapping each other and what is the way you can solve this, or you can learn bootstrap where you can make your projects easily responsive according to different screen sizes…
At the end learn more about css, because now in css we have grid and flexbox, which we help you to make your project responsive, all the best
Alright thanks a lot ! I was planning on going back to the Responsive Web Design curriculum and re-do CSS Grid, Flexbox and Responsive Web Design Principles do you think I should do that ? Because my projects haven’t been great when it comes to responsiveness.
first of all, your project is responsive, its just not working according to small screen devises, i advice you to learn about responsive from other resources too, remember one things that do not rely 100% on one thing or one course, you can enroll yourself in any udemy course or you can search responsiveness related videos in youtube, remember we are in the online world and we have a lot of teachers
Thanks again so I will YouTube it up, I see that Traversy Media and mmtuts might help me if I put my mind into it but what about re-doing the part that I said, what do you think about that ? Good, neutral or bad idea ?
it a very good idea for doing once again that css part, maybe you will get that one thing which you have forgot, so if you want to do just do it but learn from other resources too, because by repeating only you are limiting your knowledge, but by revision and learning from other resources you are increasing your knowldege
Add some padding and margin around your text, so on small screens it is not against the edge of the page.
Limit your body width (min-width) to 320 - 300px, That’s the drop off for most mobile devices.
Use media queries to change images, font-sizes, and widths on screen sizes. Do it for max width of 1007 pixels, 641, and 400 pixels just encase. Here is my pen in which you can see my use of media queries in the css to change font-sizes (281) --> https://codepen.io/Mike-was-here123/pen/vaRjey?editors=0110
Look at online website templates, that’s how i look for inspiration. I scroll through and see all the different types of styles and how they did it. I looked at around 50 before i got a idea --> https://elements.envato.com/web-templates/sort-by-latest
.
I was planning on going back to the Responsive Web Design curriculum and re-do CSS Grid, Flexbox and Responsive Web Design Principles do you think I should do that ? Because my projects haven’t been great when it comes to responsiveness.
