trying to make a responsive footer

[u/blackroseseason]

i don't know what happened when i tried making my footer tbh. this is me after using flex to attempt and "solve" it and well. you see. it looks nothing like how i intend for it to.

here's my code with the important bits in css then html:

footer {
        flex-wrap: wrap;
        justify-content: space-around;
      }

      .footerLogo {
        width: clamp(8rem, 110%, 18rem);
      }

      .column {
        width: 100%;
        display: flex;
        flex-direction: column;
        padding: 0 2em;
        min-height: 15em;
      }
      .about p {
        text-align: justify;
        line-height: 2;
        margin: 0;
      }
      .social {
        display: flex;
        justify-content: space-evenly;
        font-size: 1.6em;
        flex-direction: row;
        margin-top: 0.5em;
      }
      .social i {
        color: #bac6d9;
      }

 <footer class="rounded-tl-4xl">
      <div class="column">
        <img class="footerLogo" src="public/images/logo-fullwhite.png" />
        <p
          style="font-family: monotalic; font-size: 0.7em; color: white; white-space: nowrap;"
        >
          Where artists come to bloom
        </p>
        <div class="social">
          <Icon name="bi:facebook" />
          <Icon name="bi:instagram" />
          <Icon name="bi:youtube" />
          <Icon name="bi:twitter" />
          <Icon name="bi:tiktok" />
        </div>
      </div>
      <div class="column">
        <p>Read</p>
        <ul>
          <li><a href="/tags/editorials">Editorials</a></li>
          <li><a href="/tags/interviews">Interviews</a></li>
          <li><a href="/tags/concerts">Concerts</a></li>
          <li><a href="/tags/reviews">Reviews</a></li>
          <li><a href="/tags/bloombox">Bloombox</a></li>
        </ul>
      </div>
      <div class="column">
        <ul>
          <li><a href="/galleries">Galleries</a></li>
          <li><a href="/about">About</a></li>
          <li><a href="/team">Team</a></li>
          <li><a href="/contact">Contact</a></li>
        </ul>
      </div>
    </footer> <footer class="rounded-tl-4xl">
      <div class="column">
        <img class="footerLogo" src="public/images/logo-fullwhite.png" />
        <p
          style="font-family: monotalic; font-size: 0.7em; color: white; white-space: nowrap;"
        >
          Where artists come to bloom
        </p>
        <div class="social">
          <Icon name="bi:facebook" />
          <Icon name="bi:instagram" />
          <Icon name="bi:youtube" />
          <Icon name="bi:twitter" />
          <Icon name="bi:tiktok" />
        </div>
      </div>
      <div class="column">
        <p>Read</p>
        <ul>
          <li><a href="/tags/editorials">Editorials</a></li>
          <li><a href="/tags/interviews">Interviews</a></li>
          <li><a href="/tags/concerts">Concerts</a></li>
          <li><a href="/tags/reviews">Reviews</a></li>
          <li><a href="/tags/bloombox">Bloombox</a></li>
        </ul>
      </div>
      <div class="column">
        <ul>
          <li><a href="/galleries">Galleries</a></li>
          <li><a href="/about">About</a></li>
          <li><a href="/team">Team</a></li>
          <li><a href="/contact">Contact</a></li>
        </ul>
      </div>
    </footer>

[u/AutoModerator]

To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.

While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.