@dtomicic
Posted
Hey, congrats on finishing the challenge. I've taken a look and found some issues you might try to fix.
I see you're using multiple breakpoints which are probably doing you more harm than good. What I would recommend you for your future projects is to start going mobile first since it's a lot easier that way to scale up the site later rather than to scale it down. And on the plus side you wouldn't need that much breakpoints you would build your site for 375px and then you could give it a first breakpoint at like 768px for tablets and in most cases you won't need any more(with these kind of easy projects, later on, on more complicated projects you will need to use more breakpoints).
Because as you can see now here your elements on mobile screen are going outside of the viewport and that's bad, you could try fixing that with setting max-width on some of your elements. Also I would recommend you to do some more research on flex and utilize it more since it's a great thing.
And also here your website completely breaks apart and all of the stuff goes everywhere, that's why mobile-first is easier and better especially for beginners (I don't know if you did this project mobile-first but if I would have to guess I would say you didn't).
I would recommend you to play around with your code to try and figure out what you missed out and fix it, one thing I found useful when I was just beginning and a thing I do still is when writing code try all of the different styles and that way you'll understand how elements react to different styles and how they position themselves and other stuff.
On desktop the site looks good and true to the design, keep it up š
Marked as helpful
@Darko96
Posted
@dtomicic Thank you so much for your feedback. I didn't do it mobile-first and now I understand why it's better to do it that way. Next project I'll do it mobile-first and later I'll come back to do this project again but in the way you said.
I never did it mobile-first so far so can you briefly explain to me how can I do it. So first I need to set my media queries for mobile screens and style everything and when I do it I keep styling for bigger screens?
@dtomicic
Posted
@Darko96 you can read more about the mobile-first approach here, I would also recommend you to give this free course a try link it's by Kevin Powell, when I first started that's the course that helped me a lot to figure out the responsive design.
How I usually go by with mobile-first is I open up my index.html aka your page in browser and I open up inspect mode (F12 or right click anywhere on page and select inspect if you're on Chrome if you're on another browser it's all similar). Then I click the to check the site on different sizes picture if you're not already familiar with these tools they will come in handy all the time, and from there I just set width of my page to show 375px which is the mobile dimension and I start building my website and that way I can see how it looks on mobile and in most cases when you make the site bigger aka go on bigger screen you'll have to change only a few properties (I've had pages where mobile-first was so easier that when I went to a bigger screen I just needed to change the flex-direction property and all of the stuff would be in its place). And then once you finish a section for mobile and it looks good on 375px you just increase the screen size and you'll see how your content shifts and then you can decide what do to with it for example if you have a box that when you go on bigger screen increases it's width you can just set a max-width on it similar for everything else. And then you just set a breakpoint for let's stay a tablet at 768px (@media (min-width: 768px)), I always use min-width since when you're going from mobile up that's all you need you just style it to look good until 768px and then you set a breakpoint apply other styles that are required and for most of the simple projects you'd be done. I have on some of my bigger projects only 2 breakpoints that should tell you that going mobile-first is so much easier.
So to sum it all up you just set your screen width in browser to 375px no need to give any breakpoints and style the page for mobile, then try increasing the screen size and see what else do you need to do I usually just give max-widths to some of the elements that I don't want to increase in width until 768px and then you set the breakpoint at 768px and style for tablets/desktops and in most cases that's it one breakpoint and if needed you can add more at 992px, 1200px and 1400px (those are Bootstrap's breakpoints and I usually follow them).
Hope I made it a little bit clearer for you it's a bit hard explaining all of this in text haha, you can take a look at the materials I've given you at the beginning of the comment also you can research some on your own and if you have any problems or need help you can always let me know I'll do my best to help you out as much as I can, you can contact me on here or on Github š
Marked as helpful
@Darko96
Posted
@dtomicic Thank you for taking the time to explain.
You explained everything nicely and now I have a picture of how to use a mobile-first approach. You helped me a lot because now I know which course is good for this topic.
Thank you so much one more time. I wish you have a nice day.
@Darko96
Posted
@dtomicic Can you please check my code again? I made some changes, and I think the responsive design works much better now. I couldn't watch the part about mobile-first from that course you told me to watch because I can watch one day at a time. If it's better now I would love to thank you because you helpt me a lot. of course, I am going to watch the whole course about responsive design.
@dtomicic
Posted
@Darko96 I just checked it, looks awesome, works flawlessly on small and big screens and nothing goes out of place. Yeah I know that's a bit of the downside to the course that you can only watch one day at a time but it's to not get overwhelmed with all the information and at the end it will be worth it trust me as it's one of the best if not the best free responsive design courses I've gone through plus when you finish it all the videos stay unlocked so you can always come back and check the section you need some refreshment on.
As I said all looks great now, glad I could help and hope you keep it up š
