This is the best accordion i've made so far.
This is very Beginner friendly, and easy to understand code.
Also if you uncomment the code, you can get the functionality of opening of multiple accordion at same time.
Hope you liked it :-) Any feedback would be appreciated.
Hi 👋,
Awesome job on this challenge! Something I noticed; maybe it was intentional was if I click a question or the (+), (-) on an opened accordion, the accordion doesn't react or collapse. The collapse function seems to be only enabled by clicking on the opened answer or another question's question or its (+) (-) symbol. Because the questions change color on hover I hoped that clicking an opened question would also have the collapse functionality on its own. Just thought I would let you know, cheers! 👋
Good day everyone. i just summitted a solution to my first frontendmentor challenge. please i'm anticipating your review and feedbacks. thank you
Hi there 👋
Great Job on your first challenge! For implementing the project's font you can do the following:
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&family=Outfit:wght@400;700&display=swap'); // in your styles.css page
:root {
--ff: "Outfit", sans-serif;
}
body {
font-family: var(-ff);
...
}
Hope that helps! Good Luck & fight on!
I have issue when choosing color. In style-guide.md of the project, it requires me to use these color:
:root {
/* ### Primary */
--orange: hsl(25, 97%, 53%);
/* ### Neutral */
--white: hsl(0, 0%, 100%);
--light-grey: hsl(217, 12%, 63%);
--medium-grey: hsl(216, 12%, 54%);
--dark-blue: hsl(213, 19%, 18%);
--very-dark-blue: hsl(216, 12%, 8%);
}
When apply color for numbers, I tried all colors above but can't use correct color as in design images.
Hi there 👋,
Yes, some of the challenges have one or two colors missing. Some browsers have those color eye droppers to pick up color codes on the web as an extension. Or you can sometimes for instance do the following:
root {
--color-very-light-grey: hsla(217, 12%, 63%, 0.1);
hsla (a) - alpha: You can modify that to match similar colors with varied texture to create a different blend whether it be lighter or darker.
Hope that helps! Good Luck!
I'll appreciate your feedback guys...
Hi, Great Job on the challenge!
I would recommend using <hr> in between the sets of questions in the accordion to divide and show a break in between.
Also, maybe padding-bottom on the main-wrapper so the last answer on mobile view doesn't end abruptly.
Keep going! 👊
I found it very difficult to make it responsive, if you have any suggestions/ideas on how I can write better and scalable css to make it responsive please provide it!
Hi there 👋
Great Job on the Challenge!
In terms of responsiveness, you can use the clamp function on the width of the container to perform scalable layouts.
eg.
@media only screen and (max-width: 1440px) and (min-width: 375px) {
...
.orderSummary-card {
width: clamp(350px, 30vw, 32.7rem ); // you can play around with the values.
...
}
...
}
Also, for your orderSummary-card, you listed two ways to center the container inside the main. Try to stick to one.
Hope it was helpful! Keep going!
Hello 👋
Congratulations! on the challenge. A quick tip I would recommend is to give your container a desired margin-top value.
eg.
.container {
position: relative;
display: flex;
align-items: center;
flex-direction: column;
padding: 34px; // depending on preference; bottom padding* mainly
margin-top: 134px // depending on preference; this was my setup
}
The padding or margin-top can be excluded for an inner div, depending on if you have another content div inside for all the info. This way your accordion is prevented from expanding higher and eventually cutting off your information; especially on the mobile layout. The padding will safeguard from contents from overflowing.
Keep up the grind! 👊
Hello everyone! I would like to showcase my very first challenge here. I believe the result is faithful to the original. I had some issues with the font size. The prescribed 15px seemed a bit small to me, but it turned out that the 'container' div itself was larger than the original.
Hello,
Congrats and Great job on your 1st Challenge! 👍
I would recommend the following for laying out your content for the future. This way you won't have to center the container using margins or padding and the full height of the screen is utilized.
eg.
body {
margin: 0;
padding: 0;
min-width: 100vw;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
Also, after setting your body's font size, you can make use of rem to scale the other differing components.
Hi there 👋, I’m Andres, and this is my solution for this challenge. 🚀
🎁 Features:
🛠️ Built With:
Any suggestions on how I can enhance this solution or achieve even better performance are welcome!
Thank you. 😊✌️
Hello 👋,
Congrats! on the challenge. Great job on the layout. Here is a minor/unnecessary tip:
html {
border-left: #333 solid 1px;
border-right: #333 solid 1px;
}
~This would hide that 1px for the pink line appearing from both sides by camouflaging with the monitor's side shadow.
Also, maybe implement a margin-top on your container, that way it stops the accordion from expanding higher. On mobile view on 375px, the content gets cut off from the bottom and can't be scrolled downwards. An accommodating margin-top and bottom padding will prevent content from getting cut off from the user's reach. Nevertheless, Keep going!
Here's my approach:
eg.
.container {
position: relative;
display: flex;
align-items: center;
flex-direction: column;
padding: 34px; // depending on preference; bottom padding* mainly
margin-top: 134px // depending on preference; this was my setup
}
Hi 👋
Congratulations! on the challenge. A quick tip I would recommend is to give your container a desired margin-top value.
eg.
.container {
position: relative;
display: flex;
align-items: center;
flex-direction: column;
padding: 34px; // depending on preference; bottom padding* mainly
margin-top: 134px // depending on preference; this was my setup
}
The padding or margin-top can be excluded for an inner div, depending on if you have another content div inside for all the info. This way your accordion is prevented from expanding higher and eventually cutting off your information; especially on the mobile layout.
Keep up the grind! 👊
Hi 👋
Congratulations! on the challenge. A quick tip I would recommend is to give your container a desired margin-top value.
eg.
.container {
position: relative;
display: flex;
align-items: center;
flex-direction: column;
padding: 34px; // depending on preference; bottom padding* mainly
margin-top: 134px // depending on preference; this was my setup
}
The padding or margin-top can be excluded for an inner div, depending on if you have another content div inside for all the info. This way your accordion is prevented from expanding higher and eventually cutting off your information; especially on the mobile layout.
pointer: cursor on the accordion/ questions~ Those aside, Great Work! Keep it up!
Hi 👋, Nicely Done!
You could maybe add
<hr> in between the question sections to act as a clean divider.
Just a tip; nevertheless, Great Job! Keep Going!
