@cyrilkodjoSubmitted about 2 years ago
Need some guidance on responsive/mobile design for this one
P
Adam Winzenburger
@adamwinzdesignAll comments
- @adamwinzdesignPosted about 2 years ago
There are a couple of ways of fixing the display issue between the main/wrapper element and the footer/attribution element. One way would be to wrap both elements into a common parent and then style that parent so that it displays both the main element and the footer element in a single column at all screen widths. For example, using flexbox, you could use a flex-column parent div to make sure that the main element and footer element are displayed in a single column at all screen widths, then you could still style the main element to be responsive without changing where the footer is displayed. In other words, the browser needs to know how to place the main element and footer elements in relation to each other, not just how they each look independently.
Marked as helpful1 - @kefiiiiRSubmitted over 2 years ago
I am not sure whether it is correct method to use
display: flexin this way (on child div as well in order to set flex inside them). Or whether grid layout would be better option for this one.@adamwinzdesignPosted over 2 years agoIt's perfectly ok to set display:flex on a parent and a child, and many layouts require it. It also helps to have both a parent and child use display:flex when using a responsive design because you can change one or the other or both to flex-direction:column whenever you need to, depending on the screen width or whatever the use case requires.
1 - @joanFaseDevSubmitted over 2 years ago
Hello Everyone! First and foremost, english isn't my first language so please forgive me for any mispellings or grammatical errors. There's two questions that i asked myself during this project and i'd hoped that maybe someone could help me shine some light on theses matters.
-
Responsive Web Design seemed to be mandatory nowadays but, when starting a design, is it better to first build the mobile design and then add complexity toward the bigger resolutions (laptop, desktop, etc) or the other way around? I'm an aspiring front-end developper and my first thought is to make the mobile layout first because there's less space to cover which means less complexity which seems really reassuring to me but i'd like to hear your more experience views on the subject.
-
This is my second project on Frontend Mentor and i noticed that the HSL color system seems to be preferred. I wonder if there was any particular reason. I thought rgb, hex and hsl were favorted by some and others due to personal preferences but maybe there's a more technical explanation?
Again i'm sorry for my poor writing. And if you guys feel like giving any feedback whatsoever, i'll gladly hear about it. Have a nice day and happy coding to all!
@adamwinzdesignPosted over 2 years agoI don't know if one format would be considered to be preferred over the other technically, but for the larger projects that I've seen here, when you get the figma design files, they typically include a color system guide that includes the color values in hex, rgb, and hsl, so you should be able to use whichever format you prefer without even having to convert the values yourself.
1 -
- @f-lajocSubmitted over 2 years ago
I found it difficult trying to make it responsive on wider screen since I did Mobile-first workflow, I'm not quite sure how effective the media query I used to make it work is....Please spare time to check it out, I'll appreciate Corrections and Feedbacks.
@adamwinzdesignPosted over 2 years agoLooking at the challenge, it says that the card isn't meant to be responsive. Your deployed site looks fine to me at wider widths, nothing breaks or moves to a location that it isn't supposed to be. What is it about the component that you would like to change at desktop widths?
1
