Responsive, but poorly responsive :( - Feedback + Help?

Responsive, but poorly responsive :( - Feedback + Help?
0

#1

Hello,

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 :smirk:.

Here’s my project : https://codepen.io/Tech_CA_Bro/pen/qyzvjj

Thanks,

  • Tech.

#2

Can you explain how to recreate the view where you feel it is not perfectly responsive? Try to explain what it currently does vs. what you would like it to do.


#3

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.


#4

You just answered your own question :smile:
Just play around with your code on devtools, disabling/enabling some of your CSS rules and you will see what happens.


#5

For making stuff responsive, first stop should always be a Bootstrap.


#6

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


#7

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 :slightly_smiling_face:


#8

Alright thanks a lot ! :smiley: 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.


#9

HTML, CSS and JS. Then the libraries because HTML, CSS and JS don’t change or rarely compared to libraries ! :smiley:


#10

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 :wink:


#11

Hey! :smiley:

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 ?

Thanks again.
-Tech


#12

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 :wink:


#13

Ohhhhhhh alright I see the point of your tip, I’ll screenshot that comment to make sure I don’t forget it ! Thanks a lot m8.


#14

most welcome mate :slightly_smiling_face:


#15

Here is is what i do:

  1. Add some padding and margin around your text, so on small screens it is not against the edge of the page.

  2. Limit your body width (min-width) to 320 - 300px, That’s the drop off for most mobile devices.

  3. 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

  4. Use flexbox combined with #3. Its like bootstrap and css grid combined --> https://learn.freecodecamp.org/responsive-web-design/css-flexbox

(Please do our front-end course, it helps)

  1. 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
@media screen and (max-width: 1007px) { 

}

Kepe things small, use about 70% - 65% of the screen even on full screen. Large margins make it easier to make responsive;

Stay simple, don’t overthink it. Take Pictures of cool and basic websites you see so you can use those ideas for later.

Examples: You can see here how not everything is as big as it can be to make it reader friendly.



Even on this page you can see those margins:


#16

Alright ! Thanks a lot for your response I’ll proceed :).