NFT- Preview - Solution - Using Media Queries

Community feedback

• 

  Rio Cantre•9,690

  @RioCantrePosted almost 3 years ago

  Hello there! Good job with this one. Looking at your solution, I would suggest the following for you...

  • Add padding: 0.2rem; in the .main-content rule set
  • Refactor the HTML structure to something like this...

  <main class="main-content">
          <div class="image">
                 ....
              <div class="cyan-hover-state">
                 ....
              </div>
          </div>
          <p class="heading">Equilibrium #3429</p>
          <p  class="description">Our Equilibrium collection promotes balance and calm.</p
          <div>
                 <div class="price">
                    ....
                 </div>
                 <div class="time-left">
                    ....
                 </div>
          <div>
          <hr>
          <div class="footer">
             ....
          </div>
  </main>
  
  

  • Use Flexbox for alignments

  Hope this helps and Keep it up!

  Marked as helpful

  0

  ---

  

  samyak317•50

  @samyak317Posted almost 3 years ago

  @RioCantre Thank you for your suggestion but i have a question that I have read on google that we should use more semantic tag like articles, sections, nav, footer etc. So, what's your opinion on this. and thanks for your suggestion

  1

  

  Rio Cantre•9,690

  @RioCantrePosted almost 3 years ago

  @samyak317 Great that you have read the importance of Semantic HTML. The refactored version above have only one semantic tag which is the main that I wrap the whole content. You can use div within this method. Alternative is to use it this way...

  <main class="main-content">
          <div class="image">
                 ....
              <div class="cyan-hover-state">
                 ....
              </div>
          </div>
          <section>
                 <h1 class="heading">Equilibrium #3429</h1>
                 <p class="description">Our Equilibrium collection promotes balance and calm.</p
                 <div>
                       <div class="price">
                          ....
                       </div>
                       <div class="time-left">
                          ....
                       </div>
                  <div>
                  <hr>
                  <div class="footer">
                       ....
                 </div>
         </section>
  </main>
  
  

  There are different ways to make it simpler, the important fact is that you know what are semantic tags and use it wisely in your next projects.

  1

  

  samyak317•50

  @samyak317Posted almost 3 years ago

  @RioCantre Thanks for your suggestion. It will help me in the growth of this field

  0