@dripping-code
Submitted
- What's the easiest way to get a page to be responsive to mobile and desktop.
- I hope its better now.
@king-oldmate
@dripping-code
Submitted
@king-oldmate
Posted
There are a couple of ways to center align content. What would probably be best in this situation is to use flexbox {display: flex; justify-content: center; align-items: center}. I really recommend you search and practice how to achieve this, and perhaps even resubmit this challenge.
@media queries are generally how one would create a responsive page, but that's not really applicable on this challenge.
Marked as helpful
@Afrianns
Submitted
🤔I wonder how to make other dropdown close when I click one dropdown, and thank you!!😊
@king-oldmate
Posted
There are ways of doing it, and event delegation would probably be the most efficient method, but since there aren't that many dropdown menus, all you need to do is code it so that no matter what menu item you click, it will:
Hope that made sense! (Just experiment with it!)
@johannesteshome
Submitted
I was unable to create the glowing hiver effect with tailwind-css.
@king-oldmate
Posted
I did this same challenge with TailwindCSS, you can see my source code here: https://github.com/king-oldmate/FEM-advice-generator-app/blob/master/src/App.js
Anyway, I used the following class with arbitrary values for the shadow/glow effect: hover:shadow-[0_0_22px_8px_rgba(82,255,168,0.5)]
here's the documentation for it: https://tailwindcss.com/docs/box-shadow
Marked as helpful
@wmartyr
Submitted
Hi guys, I created two cards and then used display:none to hide what is not needed. Is that what you guys used? Or did you use separate html files for each one? Thanks.
@king-oldmate
Posted
Well done. Looking at your code, we pretty much did the same thing. To load to a separate HTML file wouldn't even work, since the JavaScript would reload and you would lose your variable. No, part of the point of these easier exercises is to develop components, and those should be as contained (encapsulated) as possible.
Marked as helpful
@darthskyy
Submitted
How do you start without the bootstrap element? What is the best tool to use for alignment? Flexbox or Grid? Is my code clean?
@king-oldmate
Posted
Good work.
I personally use Tailwind CSS for styling, but you could even use just plain old CSS if you wanted to try making the card yourself. Just break done the card into all it's different parts.
I prefer using Flexbox for alignment if I have multiple elements or need to center vertically, but if it's just one I will very often use margin: 0 auto;
@z3sb
Submitted
if you have any advice for me. i will be happy.
@king-oldmate
Posted
Well done, the layouts look great for both desktop and mobile.
I'm not sure if you noticed that you have some bugs in your JavaScript. Firstly, the active colour doesn't change when you choose a different time-frame (i.e. weekly always stays highlighted no matter what is active), and secondly, if you click anywhere in the options div it shows no data anywhere in your dashboard. You ought to have event listeners for each time-frame.
Keep it up!
Marked as helpful
@king-oldmate
Submitted
When building with Netlify I learnt that using target="_blank" is now something you aren't supposed to do, which is interesting.
Otherwise and excellent challenge, I had a lot of fun figuring out how to get the filter working.
@king-oldmate
Posted
I think I do struggle with changing my mobile layouts to desktop ones. Any feedback on that point (especially in regards to using Tailwind) would be greatly appreciated.
@jcasare
Submitted
I struggled a bit with the mobile design as I couldn't get the layout to change to a column view....not knowing I had set the display to grid. What I'd like to know is if I have to write codes for almost every breakpoint in these challenges or just one for desktop and one for mobile?
@king-oldmate
Posted
What really helped me is actually designing layouts for mobile first, and then adjusting as necessary for wider screens. Maybe start your next project with that in mind and see if you notice a difference.
Marked as helpful