@michaelvalanSubmitted about 1 year ago
I struggled while placing the images. Animating the accordions took fair amount of time.
Francesco Merighi
@francescomerighi1202All comments
- @francescomerighi1202Posted about 1 year ago
The solution you submitted is great! Very well!
The only "problem" I noticed is that it is not very responsive for "medium" devices such as tablets or small PCs.
But then again, it's spectacular, congratulations (even the animations are crazy).
Marked as helpful1 - @UNtergasSubmitted about 1 year ago
how to style small details faster instead of using many span
@francescomerighi1202Posted about 1 year ago1 - Your solution doesn't seem responsive :( Hint: try adding a media query (@media) and inside it change the direction of your flex-container (flex-direction property).
2 - Why did you use all those <span> tags? You could easily have used more appropriate tags like <div>, <p>, etc...
3 - Regarding the style, the gradient of the left part (including the circle) is not correct.
Regardless, the solution you posted is a good one.
In any case, feel free to check out my solution if it helps you.
P.S. If you found this comment useful, please mark it :)
Marked as helpful0 - @JustANippleSubmitted about 1 year ago
Hi! i made it through this challenge using React!
This calculator was harder than expected, but i think i've made a good working solution
Let me know what you think about it in the comments!
@francescomerighi1202Posted about 1 year agoThe solution you submitted is great!
3 - @efkevi-nSubmitted over 1 year ago@francescomerighi1202Posted over 1 year ago
Hi there!
Your solution is good!
A tip, avoid using different CSS files, especially for projects of this type.
Another tip, use flexbox or grid to center the card horizzontally and vertically.
Hope this helps! If this is the case I ask you to mark this comment as useful ;)
In any case, don't hesitate to look at my solution if you need it
Marked as helpful0 - @tejasvi2708Submitted over 1 year ago@francescomerighi1202Posted over 1 year ago
The solution you posted is not responsive :(
Try adding a media query that handles page behavior on different device sizes.
One more thing, avoid using fixed height and width (especially heights), let the card adjust to the content.
I also advise you to use flexbox, not only to center vertically and horizontally, but also to ensure that below a certain threshold, the cards are arranged vertically, as shown in the result.
In any case, don't hesitate to look at my solution if you need to ;)
0 - @Bumble-sakhSubmitted over 1 year ago@francescomerighi1202Posted over 1 year ago
A piece of advice, increase the breakpoint of the average query to 600-650px because this way it is too low and for example, on an iPhone 13 Pro (390px - like mine) it is not reponsive at all.
Marked as helpful1 - @0xabdulkhaliqSubmitted over 1 year ago
👾 Hello, Frontend Mentor Community,
This is my solution for the Huddle Landing Page with Single Introductory Section.
- It's been the first time using
Tailwind CSSalong withyarnas package manager 🛠️ - Used
Prettiercode formatter to ensure unified code format ⚙️ - Scored
99.125%on Google Pagespeed Insights! 🤩 - Solution with
99.9Percent Accuracy 🎯 - Layout was built responsive via mobile first workflow approach 📲
- Had a lots of fun and pain building this challenge ! 🥲
Now for the questions :
- Regarding, css optimization for production. I tried tailwindcss's
--minifyfor css code reduction. but it ended up with removing the manual style i wrote oninput.css - But surprisingly the
applydirectives won't get affected but manual css does - At last i used an online css minifier for production, So i want to know why
--minifypurges manual css oninput.cssfile - And, This is for the first time i using
Tailwind CSSso apologizing for to many arbitrary values to attaining so called Perfection - Finally, Feel free to leave any feedback and help me to improve my solution (or) make the code clean!
.
👨🔬 Follow me in my journey to finish all newbie challenges to explore solutions with custom features and tweaks
Ill be happy to hear any feedback and advice !
@francescomerighi1202Posted over 1 year agoYour solutions is 99.9% perfect, the best i've ever seen, well done!
2 - It's been the first time using
- @JakobTimmermannSubmitted over 1 year ago
I had a hard time building the correct grid layout. All beginnings are difficult...
My Questions:
- Is bootstrap in this case an overkill / would CSS grid be sufficient?
- How to get rid of the weird gap in between the two cards in the mobile design?
- Any way to refactor the code to make it leaner?
@francescomerighi1202Posted over 1 year agoHi there!
Your solution is good!
I have just two-three tricks to show you:
In your solution, the card appears to be separated into two "blocks", when it really should be attached.
Your media query doesn't seem to be working :( try to double check it's working and change it so that the design is the same as the requested result on mobile.
Great idea to set 'min-height', but when using flexbox to perfectly center things make sure you also use the 'justify-content: center' property in addition to that 'align-items: center'
Otherwise you can use grid, still setting a 'min-height' but using only one property to center which is 'place-content: center'
Hope I was helpful :)
In any case do not hesitate to look at my solution if you need it
Marked as helpful0 - @JohanXxzSubmitted over 1 year ago
Hello everybody 🤟
- I continue to learn about html/css and this challenge is an excellent learning exercise
- Any suggestions on best practices do not hesitate to comment 😊
@francescomerighi1202Posted over 1 year agoHi there!
Your solution is great!
Some advices:
-
Raise the breakpoint of your media query up to at least 600px, since 375px is a bit low (from my iPhone 13 Pro -- 410px) I still see the card horizontally and squashed, when in reality it should be vertical.
-
In the mobile version, add some padding to the bottom of your blue-purple results section
I hope I've been helpful, in any case don't hesitate to look at my solution if you need it ;)
Marked as helpful0 - @tomdu3Submitted over 1 year ago
Not sure about the colours. They look different from the design images.
@francescomerighi1202Posted over 1 year agoHi there!
Your solution looks good!
Center the card vertically and horizontally using flexbox or grid
(Ask me if you don't know how)
Otherwise take a look at my solution and try to figure it out yourself, I hope I helped ;)
Marked as helpful1 - @Arbaz-79Submitted over 1 year ago
hey gays give me some tips how i am improve my css i'm stuck in css last few weeks so please guide me
@francescomerighi1202Posted over 1 year agoHi there!
Your solution is great!
Just a few small tips:
- instead of setting 'height: 100vh' to the container, set 'min-height: 100vh'.
- One more thing, add some padding to the body, so on mobile the card doesn't appear attached to the page outline.
Hope I helped you ;)
1 - @karpovskaSubmitted over 1 year ago
Hi guys, I'm not sure about the css files structure. Would it be better to leave as it is or make it all in one file in such small projects? Thanks in advance.
@francescomerighi1202Posted over 1 year agoHi there!
Your solution is great!
On projects of this size, I recommend putting everything inside one file.
It makes everything easier, even for those who need to look at your solution in the future!
Marked as helpful2
