@ErayBarslan
Posted
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 helpful
@akyanu
Posted
@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?
@ErayBarslan
Posted
@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 helpful
