@michaelvalan
Submitted
I struggled while placing the images. Animating the accordions took fair amount of time.
@francescomerighi1202
@michaelvalan
Submitted
I struggled while placing the images. Animating the accordions took fair amount of time.
@francescomerighi1202
Posted
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 helpful
@UNtergas
Submitted
how to style small details faster instead of using many span
@francescomerighi1202
Posted
1 - 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 helpful
@JustANipple
Submitted
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!
@francescomerighi1202
Posted
The solution you submitted is great!
@efkevi-n
Submitted
@francescomerighi1202
Posted
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 helpful
@tejasvi2708
Submitted
@francescomerighi1202
Posted
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 ;)
@Bumble-sakh
Submitted
@francescomerighi1202
Posted
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 helpful
@0xabdulkhaliq
Submitted
👾 Hello, Frontend Mentor Community,
This is my solution for the Huddle Landing Page with Single Introductory Section.
Tailwind CSS
along with yarn
as package manager 🛠️Prettier
code formatter to ensure unified code format ⚙️99.125%
on Google Pagespeed Insights! 🤩99.9
Percent Accuracy 🎯Now for the questions :
--minify
for css code reduction. but it ended up with removing the manual style i wrote on input.css
apply
directives won't get affected but manual css does--minify
purges manual css on input.css
fileTailwind CSS
so apologizing for to many arbitrary values to attaining so called Perfection.
👨🔬 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 !
@francescomerighi1202
Posted
Your solutions is 99.9% perfect, the best i've ever seen, well done!
@JakobTimmermann
Submitted
I had a hard time building the correct grid layout. All beginnings are difficult...
My Questions:
@francescomerighi1202
Posted
Hi 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 helpful
@JohanXxz
Submitted
Hello everybody 🤟
@francescomerighi1202
Posted
Hi 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 helpful
Not sure about the colours. They look different from the design images.
@francescomerighi1202
Posted
Hi 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 helpful
@Arbaz-79
Submitted
hey gays give me some tips how i am improve my css i'm stuck in css last few weeks so please guide me
@francescomerighi1202
Posted
Hi there!
Your solution is great!
Just a few small tips:
Hope I helped you ;)
@karpovska
Submitted
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.
@francescomerighi1202
Posted
Hi 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 helpful