CODEWITHSUNDEEP
htmlcss
Michelle
Michelle

Reputation: 549

resize footer for mobile

I have a footer that I've made, but I can't figure out how to make the three images smaller and be vertically aligned for mobile. I want all 3 about 50% size and be in a vertical line.

The HTML is - 

<div class="as-seen-footer">
  <div class="as-seen-items" style="display: flex;">
    <div class="as-featured">
      <h1 style="color: white; font-weight: lighter;">as featured in</h1>
    </div>
    <div class="verticalLine" style="padding-right: 20px;"></div>
    <div class="as-seen-images" style="display: flex;">
      <img class="alignnone size-full wp-image-5021" src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/news_24_logo.svg" alt="Media 24" />
      <img class="alignnone size-full wp-image-5022" style="width: 150px; padding-right: 20px;" src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/home_magazine_logo.svg" alt="Home Magazine" />
      <img class="alignnone size-full wp-image-5023" style="width: 100px; padding-right: 20px;" src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/tuis_tydskrif_logo.svg" alt="" />
    </div>
  </div>
</div>

CSS for desktop is - 

.as-featured h1 {
  font-size: 22px; 
}

.as-featured {
  padding-top: 12px; 
  padding-right: 20px; 
}

img.alignnone.size-full.wp-image-5021
{
  width: 150px; 
  padding-right: 20px;
}

.as-seen-items {
  display:flex;
  text-align: center;
}

.as-seen-images {
  display:flex;
}

.as-seen-footer {
  background: #000000;
  margin-top: 20px;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  height: 130px;
}

.verticalLine {
  border-left: solid #fff;
  border-width: 2px;
  height: 80px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 20px;
  margin-right: 20px;
}

I've tried the following media query, which resizes the text and vertical line, but I can't get the images to move and resize - 

@media all and (max-width: 768px)
{
  .as-featured h1 {
    font-size: 16px;
    white-space: nowrap;
  }

  .as-featured {
    padding-top: 15px; 
  }

  img.alignnone.size-full.wp-image-5021 {
    width: 60%;
    display: inline;
  }

  .as-seen-footer {
    background: #000000;
    margin-top: 10px;
    text-transform: uppercase;
    height: 100px;
  }

  .verticalLine {
    border-left: solid #fff;
    border-width: 2px;
    height: 70px;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: -5px;
    margin-right: -5px;
  }
}

Upvotes: 0

Views: 973

Answers (1)

Abdulaziz Yesuf
Abdulaziz Yesuf

Reputation: 602

Avoid using px to specify width and height of your elements since it is not responsive. Use vw and vh which stand for viewport width and viewport height respectively instead. vw and vh specify the size relative to the device size in which the website is being viewed There is no need to use @media if use vw and vh to specify size.

Upvotes: 2

Related Questions