-
The responsiveness and overall layouts are quite messy so I would like additional feedback there.
-
I feel like my JavaScript could get better.
🎓 A Computer Engineering graduate on a mission to rebuild solid foundations in web development. 🛠️ Currently focusing on frontend skills with the goal of becoming a Full-Stack Developer. 🚀 Learning from the ground up to improve problem-solving and coding confidence
I’m currently learning...Currently focusing on DOM manipulation 🙂
Latest solutions
Shopping cart using React
#reactPSubmitted 5 days agoI would appreciate help with improving my use of components. Currently, I feel that some components are not used correctly or could be better consolidated into a single reusable component. Guidance on best practices for component design and reuse would be very helpful.
Basic DOM Manipulation - article preview
PSubmitted about 1 month agoI think my HTML structure still has issues. When the share button is active in the mobile view, I slightly modified the card footer's HTML structure. However, switching between mobile and desktop views requires adding and removing certain elements repeatedly. I feel like there should be a better approach, but I can't figure it out yet.
Responsive landing page using Grid and Flexbox
PSubmitted about 2 months agoI tried to work around making the .hero__avatar slightly overflow out of the screen (just like in the original design), but I couldn’t quite get it right. 😭
If anyone has tips or knows how to achieve that effect properly with CSS, I’d really appreciate the help!
Thanks in advance! 🙏
Latest comments
- @Marshall-MarceloWhat specific areas of your project would you like help with?P@pete13232
It's great you're reaching out for help! I can certainly offer some friendly feedback from my own experience with this challenge.
Feedback on Responsiveness & Layout
You're off to a strong start by using <source> within <picture> for your images – that's a really good practice for responsive images!
To take it a step further and get even better control over different screen sizes, you might consider adding more image sizes than just desktop and mobile. For instance, in your
./assets/images
folder, you could include:- illustration-sign-up-desktop.svg
- illustration-sign-up-tablet.svg
- illustration-sign-up-mobile.svg
A result like this:
<picture class="card__img"> <source media="(min-width:1440px)" srcset="./assets/images/illustration-sign-up-desktop.svg"> <source media="(min-width:768px)" srcset="./assets/images/illustration-sign-up-tablet.svg"> <source media="(min-width:365px)" srcset="./assets/images/illustration-sign-up-mobile.svg"> <img src="./assets/images/illustration-sign-up-mobile.svg" alt="card-image"> </picture>
Having a tablet-specific image can really help refine your layout in that tricky middle-ground between desktop and mobile.
Hope this little tip helps!
Marked as helpful - @o-k-harmashWhat are you most proud of, and what would you do differently next time?
Tooltip and Footer Behavior Implementation: Summary & Notes 🧩 Problem Overview The task involved implementing a tooltip display on desktop and a footer transformation on mobile view as part of a social sharing UI component. The functionality is somewhat similar to a classic responsive navigation menu — for example, a hamburger button that reveals a sidebar menu on smaller screens.
✅ Approach It was decided to delegate only the toggling logic to JavaScript, which simply updates the data-share attribute on the footer element. JavaScript answers the question “what should be displayed?”, while the UI layer (CSS) answers “how should it look and behave?”.
The UI is fully responsible for deciding which layout to show based on the screen size. Two distinct views are implemented:
A tooltip-style popup shown above the share button on desktop.
A footer replacement view shown on mobile.
This separation is clean, intuitive, and aligns well with modern responsive design patterns.
⚠️ Limitations & Accessibility Consideration What was not implemented in this task is ARIA accessibility management. Specifically:
The aria-hidden attribute is not updated dynamically to reflect visibility changes.
This may affect screen reader support and accessibility tree clarity.
Proper aria-hidden, role="tooltip" usage, and keyboard navigation handling could be considered for future improvement.
P@pete13232I really like the approach you used—especially the use of the data-share attribute. It’s a clever solution that I wouldn’t have thought of myself!
- P@vidhitvarmaP@pete13232
Great job overall! I'm not a professional in layout myself, but after checking your code, I think you did really well. One suggestion: using CSS Grid or Flexbox for the main layout can make it easier to manage structure, rather than relying on individual margins or setting specific min-width values for each section. That way, the layout can better adapt to different screen sizes without elements breaking or overlapping.
Keep it up!
- @Sameer1003P@pete13232
Suggestion for improvement: I noticed a layout issue related to the
min-width
property. When I set the page width to 900px, the main content overflows beyond the screen.After inspecting the layout, I found this rule in your code:
main { height: 70%; width: 70%; }
This causes the card section to overflow because 70% of 900px is 630px. However, your
main
is using a 4-column grid:main { grid-template: 1fr 1fr / 1fr 1fr 1fr 1fr; }
This means each column has a maximum width of
157.5px
. But you’ve set each.content-container
to have amin-width
of 200px:.content-container { min-width: 200px; }
So, the total minimum width required for 4 columns is 800px, which exceeds the 630px available space in this case, resulting in overflow.
Suggested solutions:
-
Remove the
min-width
property from.content-container
. -
Instead of setting fixed
width
andheight
onmain
, consider usingpadding
to create spacing.
Hope this helps! You're doing great — just some minor adjustments will make the layout more responsive 😊
Marked as helpful -
- P@GeraASMWhat are you most proud of, and what would you do differently next time?
the next time I'll try to use more min-width to take de same width en all same items to avoid complications in the flexbox
What specific areas of your project would you like help with?I'd like to get new forms to do this concepts more easy
P@pete13232Nice work with Flexbox!
You could also try using CSS Grid — it gives you more control over complex layouts.
- @TerenceCLZhangP@pete13232
Your code structure is excellent — really clean and easy to follow. Great job! 👏
As an optional idea (nothing critical at all), you could also consider using a <picture> element for responsive images in case you want to serve different sizes for different screens:
<picture> <source media="(min-width:<screen-size>)" srcset=""> <img src="" alt=""> </picture>
But honestly, the current approach already works well. Just wanted to share another option!