Design comparison
Solution retrospective
Is there a better way to make the triangle for the speech bubble? I feel like I made it much more difficult than I had to, finding the right numbers for the triangles position was kind of annoying.
Is it possible to store the "815" number from HTML in a CSS variable using only HTML & CSS? If so, how?
Any other tips or criticisms welcome, thank you.
Community feedback
- @ErayBarslanPosted about 2 years ago
Hey there, design looks good and is responsive, great work with this one! I think help of border is the convenient way to make a triangle for design purpose. Otherwise you'd need nested elements just for a small part and would be more difficult to align correctly ^^ Though if you wish to match the design with a little refactor you can use:
.bottom-level .gb-left { border-bottom-right-radius: 0; } .gb-left::after { top: Calc(100% - 1rem); left: Calc(100% - 2rem); border: 1rem solid transparent; border-right: 1rem solid white; }
I suggest removing cover from
background-size
for bigger screen and place it to bottom like:body { background-size: 100%; //(or just *initial* but it won't scale for screen widths above 1440px) background-position: bottom; }
As for your question about storing value of an element dynamically, CSS won't help on that regard. You need the help of JavaScript. You can get the
innerHTML
of an element and manipulate it's style depending on the value.My last suggestion would be changing
.container
div to main as :<main class="container">...</main>
for semantic markup. Wrapping content with landmark elements will result in better SEO as it makes the page more accessible for visually impaired users. Happy coding :)Marked as helpful1@akyanuPosted about 2 years ago@ErayBarslan Thank you, very helpful info. On the topic of semantics, is there a common screen size people will use for min-width/max-width? Or is it dependent on the design you’re going for?
0@ErayBarslanPosted about 2 years ago@akyanu You're welcome! That's totally up to the design and content. For example video/movie hosting sites may not even need max-width if there is enough content to cover the page. But if the site has texts/articles like a blog or forum, it's convenient to use max-width as huge widths stretches out the content and makes it harder to read. I've noticed it usually varies between 1200-1500px for such sites. I view some sites I use in responsive design mode to see how they deal with it. I can suggest the same for you. Would help improving your responsive design skills big time :)
Marked as helpful1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord