Change the div position on desktop-CodePudding

I have these 2 divs (footer-txt and footer-img), on the mobile it works perfectly cause i want the the text on top and the 2 images on the bottom, like side by side. But then the screen gets wider i want the 2 images side by side and also the text div. Like a row with the 2 images and the text. Is there a way that i can do this?

#footer {
  background-color: #98AFFF;
}

.footer-txt {
  font-size: 14px;
  color: #464646;
  text-align: left;
}

.footer-img {
  display: flex;
  gap: 25px;
}

<footer  id="footer">
  <div  id="footer-content">
    <div >
      PROTESTE
    </div>
    <div >
      <a href="#">
        <img src="images/pag1/Mask group (1).png" alt="Google">
      </a>
      <a href="#">
        <img src="images/pag1/Mask group.png" alt="Google">
      </a>
    </div>
  </div>
</footer>

CodePudding user response：

Well, if i understand correctly you can put this css in id #footer-content:

#footer-content {
  display: flex;
  flex-direction: row;
}

That way you change the direction of your div to as if it were a row.

If you only need this for when you're not mobile, you can add the following line:

@media screen and (min-width: 960px) {
   #footer-content {
      display: flex;
      flex-direction: row;
   }
}

CodePudding user response：

The desired solution can be achieved using either Flex-Box or Grid & Responsive CSS using Media Queries

#footer {
  background-color: #98AFFF;
}

#footer-content {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 25px;
}

.footer-txt {
  font-size: 14px;
  color: #464646;
  text-align: left;
}

.footer-img {
  display: flex;
  gap: 25px;
}

/* Styling for Smaller Screens */
@media screen and (max-width: 500px) {
  #footer-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

<footer  id="footer">
  <div  id="footer-content">
    <div >
      PROTESTE
    </div>
    <div >
      <a href="#">
        <img src="images/pag1/Mask group (1).png" alt="Google">
      </a>
      <a href="#">
        <img src="images/pag1/Mask group.png" alt="Google">
      </a>
    </div>
  </div>

</footer>

CodePudding user response：

You have to make the text and both of the images a flex item. You achive this by defining the flex property on the footer-content. All of its direct children are then flex-items.

Very good explanation of flex can be found here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

If my solution is not what are you looking for you are maybe also looking for breakpoints and media queries for a responsive design.

#footer {
    background-color: #98AFFF;
}

.footer-txt {
    font-size: 14px;
    color: #464646;
    text-align: left;
}

#footer-content {
 display: flex;
 flex-wrap: wrap;
}

<footer id="footer">
  <div id="footer-content">
    <div >
      PROTESTE
    </div>
    <div >
      <a href="#">
        <img src="images/pag1/Mask group (1).png" alt="Google">
      </a>
    </div>
    <div >
      <a href="#">
        <img src="images/pag1/Mask group.png" alt="Google">
      </a>
    </div>
  </div>
</footer>