Skip to content
Submitted over 1 year ago

Reponsive landing page using Flexbox

Jeffrey Hill•100
@webdevhill
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Results summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Again I am having a discrepancy when viewing the page with Chrome's device toolbar and manually adjusting the screen width to check for responsiveness.

Things look good when using the device toolbar. It is necessary to scroll the page aon small devices. But when I manually adjust the screen width, the height of the first section does not fill the screen @768px.

If I try to fix this problem with a height: 100vh; it breaks the layout on smaller screens when using the device toolbar.

So, if this makes any sense. I can make the RWD work with the device toolbar OR by manually changing the screen's width with the dev tools. NOT both.

Community feedback

  • Josh•400
    @burrijwPosted over 1 year ago

    Hey, nice work.

    Consider using a list for the statistics. Any time you have similarly-shaped data or UI elements, it might make sense to be in a list.

    Marked as helpful
    1
    Jeffrey Hill•100
    @webdevhillPosted over 1 year ago

    @burrijw the statistics do look like a list or even a table in HTML now that you mention it

    0
    Jeffrey Hill•100
    @webdevhillPosted over 1 year ago

    @burrijw funny, I refactored the HTML as a <ul> and now I have a DRY class situation

    <ul class="summary-scores">
<li class="score score-reaction score-container">
<img src="./assets//images/icon-reaction.svg" alt="Reaction">
<span>Reaction</span>
<span class="num-bold">80 <span class="num-light"> / 100</span></span>  
</li>
<li class="score score-memory score-container">
<img src="./assets//images/icon-memory.svg" alt="Memory">
<span>Memory</span>
<span class="num-bold">92 <span class="num-light"> / 100</span></span>  
</li>
<li class="score score-verbal score-container">
<img src="./assets//images/icon-verbal.svg" alt="Verbal">
<span>Verbal</span>
<span class="num-bold">80 <span class="num-light"> / 100</span></span>  
</li>
<li class="score score-visual score-container">
<img src="./assets//images/icon-visual.svg" alt="Visual">
<span>Visual</span>
<span class="num-bold">80 <span class="num-light"> / 100</span></span>  
</li>
</ul>
    0
    Jeffrey Hill•100
    @webdevhillPosted over 1 year ago

    @burrijw

    much cleaner, ty!

    <ul>
<li class="score-reaction">
<img src="./assets//images/icon-reaction.svg" alt="Reaction">
<span>Reaction</span>
<span class="num-bold">80 <span class="num-light"> / 100</span></span>  
</li>
<li class="score-memory ">
<img src="./assets//images/icon-memory.svg" alt="Memory">
<span>Memory</span>
<span class="num-bold">92 <span class="num-light"> / 100</span></span>  
</li>
<li class="score-verbal ">
<img src="./assets//images/icon-verbal.svg" alt="Verbal">
<span>Verbal</span>
<span class="num-bold">80 <span class="num-light"> / 100</span></span>  
</li>
<li class="score-visual ">
<img src="./assets//images/icon-visual.svg" alt="Visual">
<span>Visual</span>
<span class="num-bold">80 <span class="num-light"> / 100</span></span>  
</li>
</ul>
    1

Please log in to post a comment

Log in with GitHub

Join 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