Equalizer landing page, responsive size changes

Community feedback

• 

  Faruk Abdulganiyu•380

  @farukingPosted over 2 years ago

  One way to do this is using a combination of flex-wrap, justify-content etc. But you might still need to tweak some things. modify the footer class style to:

  width: 100%;
  padding-inline: clamp(0rem, -6.107vw + 2.931rem, 1.5rem);
  flex-wrap: wrap;
  display: inline-flex;
  justify-content: space-between;
  

  after that you can remove the grid-template-column in media queries. Don't forget to also remove the display: grid and grid-template-column in the footer class.

  1

  ---

  

  Sam Hemingway•180

  @SamHemingwayPosted over 2 years ago

  @faruking Thanks for commenting!

  This was what I originally tried but couldn't figure out. What I can't figure out is how to achieve the 768px layout (aka with the logo taking up it's own row at the top and the other 2 dropping beneath it).

  I created a branch with the suggested changes, here's what it looks like live. Any thoughts?

  0

  

  Faruk Abdulganiyu•380

  @farukingPosted over 2 years ago

  @SamHemingway This is what you can do:

  • wrap your equalizer image with a div having a class of 'footer-item'

  <div class='footer-item'>
      <img src="assets/logo.svg" alt="equalizer" class="logo logo-footer" />
  </div>
  

  • the 2 classes below it should also have an additional class 'footer-item' <div class="footer-body "> to <div class="footer-body footer-item"> <div class="footer-socials" > to <div class="footer-socials footer-item" >
  • lastly, add the following to your global style

  .footer-item:first-of-type{
    min-width: 340px;
  }
  

  Marked as helpful

  0

  

  Sam Hemingway•180

  @SamHemingwayPosted over 2 years ago

  @faruking Thanks!

  I actually didn't end up implementing this in the end, but you helped me realise by suggesting adding a new parent into the DOM that nesting was the way forward!

  Instead of creating an explicit width for the logo in the footer, I gave it a property of flex: 1 0 9.125rem as I wanted it to grow, but not shrink and ideally be that magic number, and then nested the footer content inside of another flexbox which has the property flex: 1 1 35rem as we want it to shrink and grow but ideally be 35rem.

  Here are the changes if you're curious!

  0

  

  Faruk Abdulganiyu•380

  @farukingPosted over 2 years ago

  @SamHemingway That's creative, although I think you have some other errors relating to your images. Anyway, let's connect, Nice job by the way.

  0