Stats Preview Card using HTML, CSS and Media Queries

Community feedback

• 

  Rachel Mozzetta•135

  @Mozzarella-chzPosted about 3 years ago

  In my solution I rearranged the stats and stat heading like so:

  ``` <div class="stats">
                  <div class="stat">
                      <h2>10k+</h2>
                      <p class="stat-p">companies</p>
                  </div>
                  <div class="stat">
                      <h2>314 </h2>
                      <p class="stat-p">templates</p>
                  </div>
                  <div class="stat">
                      <h2>12m+</h2>
                      <p class="stat-p">queries</p>
                  </div>
              </div>```
  

  If they are identifiable as three different divs within the parent div "stats" then you can use flexbox to seamlessly arrange them for your mobile view.

  Other things worth pointing out:

  -Not sure your <div class="card"> is really doing much as it's function is basically just like the body of the page. So semantically it seems pointless. I would omit.

  -In your HTML markup you have two divs labeled "left-box" and "right-box." I believe these descriptors to be somewhat incorrect as the format of the content will change depending on mobile versus web view. As such, I would keep the class description more vague such as "content-text" and "context-img" that way no matter what screen size you're on the description is correct.

  Hope that is helpful. Keep up the hard work!!!

  Marked as helpful

  1