P
@tacesept
Latest solutions
Room Homepage
Submitted 3 months agoI had problems with the responsiveness and don't know how to fix it.
Latest comments
- @T23harms
The transitions and animations on the slides are really well done, including the arrow on 'Shop now'. However, I noticed that the pages aren’t fully responsive — on smaller screens, everything gets squished together. But that’s something I often struggle with as well. Other than that, it’s great!🚀
Marked as helpful - @AndresOreVelWhat are you most proud of, and what would you do differently next time?
I'm proud of having learnt some of sass. It definitely gives you the ability of structure your css code even more. Next time I will take the next step to do it better.
What challenges did you encounter, and how did you overcome them?In the images section, I saw that I had quite a bit of code. Then I checked the Sass documentation and simply applied a loop to minify the CSS.
What specific areas of your project would you like help with?About sass, because I'm sure there are many things I've left undone that I could have simplified.
@T23harmsYour HTML and CSS code for the Loopstudios landing page demonstrates a solid structure and good use of semantic elements. The layout is well-organized with BEM-style class naming, which helps keep the styles modular and easier to maintain. The use of @media queries shows that you're thinking about responsiveness, and the background images adapt nicely between desktop and mobile.
A few suggestions for improvement: You’ve included the same Google Fonts import multiple times—this is redundant and should be cleaned up to improve performance. Also, in your HTML, the <ul> element inside the footer is mistakenly written as <u>, which should be corrected for proper HTML semantics.
Overall, great work—just a few small refinements would take it to the next level!🚀
Marked as helpful - P@HamzehAlayan01@T23harms
The structure is clean and semantic, with clear class naming and good use of BEM conventions. The visual hover effect on the image (with a preview icon and translucent overlay) is nicely implemented and adds a polished touch.
Your layout is well centered using Flexbox on the body, and the color scheme is consistent with good variable usage. The animation on the image gives it life and enhances the user experience.
One thing to consider: the fixed vw and vh values in the main element make it less responsive on smaller screens. It seems this card is optimized for desktop viewing, but for mobile, it may appear too narrow or cramped. Adding media queries or using more fluid layout units (like % or max-width) could improve responsiveness.
Overall: Great attention to visual details and interactivity – just keep responsiveness in mind for future iterations.🚀
Marked as helpful - @SylvainPS78What are you most proud of, and what would you do differently next time?
- Learned overlay
Any comments will be welcomed. My code isn't cleaned yet, I have to improve responsive design and improve accessibility.
@T23harmsThe HTML structure of the e-commerce product page is well-organized and semantic, making it easy to understand and maintain. The use of meaningful alt attributes, accessible SVG elements, and clearly separated sections like header, main, and footer demonstrates good attention to accessibility and code readability. External assets and fonts are efficiently linked, and the cart and overlay components show thoughtful UI structuring. Overall, the code reflects solid foundational HTML skills and provides a great base for styling and interactivity.
The CSS is well-organized, with clear use of flexbox for layout and proper use of media queries for responsiveness. The styling ensures a modern and clean look for the design. Some selectors could be more specific to avoid potential conflicts, and it might be helpful to add a bit more spacing between sections for improved readability on smaller screens.
The JavaScript code is well-structured and efficiently handles interactive elements on the e-commerce page. Functions such as addToCart and deleteCart ensure a smooth shopping experience, while displayCart and displayDesktopOverlay manage visibility. To improve readability and scalability, the functions could be further modularized for easier maintenance as more features are added.
But overall great work, keep it going🚀
- @PaiKai-Lee@T23harms
I had a look at your code and overall it's very clean and well-structured! One thing I noticed is that the three bottom images appear slightly stretched or distorted, especially on larger screens. This might be due to the use of w-full and basis-1/3 without setting a fixed aspect ratio or controlling the image height. Apart from that, everything looks great and works smoothly!🚀
Marked as helpful - P@jonatan-samuelssonWhat are you most proud of, and what would you do differently next time?
Form validation became unneccessarily complicated, as I set out to do it with HTML and CSS only. I got it working to 90% but I couldn't make it the final stretch. I could have left it and it would have been working fine, but it would not have been able to differentiate missing from incorrectly provided inputs. In the end, I scrapped it and implementet an all out JS solution in stead, which all took way too long and didn't exactly end up DRY.
On the accessibility side of things, the provided articles on accessible forms wer super helpful and well-curated. Implementing error messages and validation really makes you have to think about how it all comes accross to AT:s.
@T23harmsThe code appears to be a clean, well-structured contact form with proper HTML, CSS, and JavaScript integration. The form is responsive, and CSS variables are well-organized for easy adjustments. The JavaScript uses event listeners to handle form validation and user interactions, ensuring that required fields are validated and users get real-time feedback.
A few things to note:
It’s good that validation functions are modular, making it easy to add or modify rules. However, make sure to check for edge cases like special characters in names that might not pass the current regex.
The use of ARIA attributes is a good accessibility practice, but adding labels for all interactive elements would further improve accessibility.
The success message has a nice animation but ensure it doesn’t interfere with form usability on slower devices.
Overall, it's a well-implemented solution that prioritizes user experience and responsiveness.🚀
Marked as helpful
