How to rearrange the pricing part as per the mobile design while keeping the desktop design intact.
Any other feedback is welcomed!
I would like to get help on working with SCSS and how to get a better looking "arrow" for the share button.
Any other feedback is welcomed.
This time, I managed to focus on everything I've learned before especially JS code, it took time but I could do it.
What challenges did you encounter, and how did you overcome them?JavaScript actions weren't that easy for me, but I wasn't in a hurry. I spent the time needed to finish it.
What specific areas of your project would you like help with?How to think well to write a JS code.
Hey! Your project turned out great. Try changing the background to match the design.
ff
What challenges did you encounter, and how did you overcome them?fff
What specific areas of your project would you like help with?ff
Hey, can you retry submitting your project?
the most proud of is keep going forward.for the next time i will finish my css coding journey on frontend mentor.
What challenges did you encounter, and how did you overcome them?when i design for the desktopview i cant code like the given design. i need help also
What specific areas of your project would you like help with?as i mentioned above i need help on desktopview
Great work so far! To better align the desktop design with the intended layout, consider reworking the container structure. Currently, using two separate containers is fine, but introducing a parent container will help unify the layout and match the design more closely.
Here are two approaches you can take:
Media Queries: Use a parent container to define a default layout (e.g., for mobile) and adjust it for desktop using media queries. For instance:
.parent-container {
display: flex;
flex-direction: column; /* Mobile layout */
}
@media (min-width: 768px) {
.parent-container {
flex-direction: row; /* Desktop layout */
}
}
Flex-wrap: If using flex-wrap, the parent container can automatically adjust the child elements to stack or align as needed:
.parent-container {
display: flex;
flex-wrap: wrap;
}
Both methods ensure the design transitions seamlessly between layouts while maintaining a cohesive structure. This will not only simplify your CSS but also make the layout more responsive and easier to manage!
Your project looks fantastic—well done!
A few things for your consideration:
I am proud that I finished this project in 1 hour and I am excited to do more project in coming days.
What challenges did you encounter, and how did you overcome them?the challenges I faced was;
Inter font .ttf file has long name with special characters which cause for "@font-face" to not work.
Your @font-face declaration looks fine, but ensure the .ttf file name matches exactly, and there are no special characters in the file name. If the current file name is long or has special characters, consider renaming it to Inter-Regular.ttf. Also, double-check that the file path ./assets/fonts/static/Inter-Regular.ttf is correct relative to your CSS file.
Great work!
