Latest solutions
- Submitted about 2 months ago
A Social Links Profile
- HTML
- CSS
When it shrinks, the text in the middle part of social media will shift upward. At the beginning, I used padding and height to adjust its position, but after it shrinks, it seems that I can't adjust it through padding (there is no change). What should I do?
Latest comments
- @AbhayGhorelaSubmitted about 2 months ago@ophintherainPosted about 2 months ago
Perfectly!but i think you can write your CSS separately to simplify your scripts!
0 - @Gigi-pixSubmitted 3 months ago@ophintherainPosted about 2 months ago
It is worth noting that when the page is reduced, your theme will become very narrow, but the signature is still large. I think it should be possible to control the specific width of your container at the beginning.You can also use semantic tags on your html to make it a little more readable.
0 - @adptCodeSubmitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
What am I most proud of?
I’m proud of how I implemented responsive typography using modern CSS techniques like clamp() and rem, avoiding media queries altogether. I also effectively utilized variable fonts for better performance and flexibility, which improved the overall design consistency. Additionally, the smooth hover effects and polished card layout make the solution feel interactive and professional.
What would I do differently next time? Next time, I’d focus more on accessibility, such as ensuring better keyboard navigation and contrast ratios for improved usability. I’d also experiment with CSS custom properties (variables) to make styling more reusable and scalable, especially for colors and spacing. Finally, I might explore adding animations to further enhance user engagement.
What challenges did you encounter, and how did you overcome them?-
Ensuring Responsive Typography Without Media Queries It was challenging to make the font sizes adjust dynamically across screen sizes without relying on media queries. I overcame this by using the clamp() function in combination with rem, which allowed me to set a fluid font size range based on the viewport width.
-
Managing Variable Fonts Understanding how to implement variable fonts effectively took some trial and error, especially ensuring all weights and styles were accessible while maintaining performance. I resolved this by carefully configuring @font-face and testing the fonts across different elements.
-
Maintaining Clean Layout and Interactivity Balancing a clean design with interactive elements like hover and focus states was tricky, especially when fine-tuning shadows and transitions. I iterated several times, testing in the browser, and used transition properties for smooth effects that didn’t overwhelm the design.
These challenges pushed me to explore new CSS techniques and improved my problem-solving approach for responsive and accessible designs.
@ophintherainPosted about 2 months agoExcellent, except that the distance between each line could be adjusted a little better
1 -
- @MohammedHusseinAsaadSubmitted 2 months ago@ophintherainPosted 2 months ago
It's already very similar. You could use a little more margin than the text
0