Mobile responsiveness

DMarley
Member
Hello Hubfans, I’m currently working on a landing page, I’ve 4 badges in horizontal arraignment in a section. But then once I switch to mobile view, the badges aligned vertically, apparently the four can’t align horizontally, but I want it to be in 2 pairs instead. Kindly help and guide me through
Here’s the code for the badges : <div class="badges">
<div>
<img src="https://f.hubspotusercontent30.net/hub/7237680/hubfs/Number1_Plate.png?width=100&amp;height=100&amp;...">
<p style="font-size: 18px; text-align: center;"><span style="color: #000000;">Deutschlands Vorreiter für Kulturförderung in Kindereinrichtungen mit Spaß.</span></p></div>
<div>

</div>
<div>

<img src="https://f.hubspotusercontent30.net/hub/7237680/hubfs/Handshake_Plate.png?width=100&amp;height=100&am..."><p style="font-size: 18px; text-align: center;"><span style="color: #000000;">Bereits über 1000 Veranstaltungen in Einrichtungen mit glücklichen Kindern durchgeführt.</span></p></div>
<div>

</div>
<div>

<img src="https://f.hubspotusercontent30.net/hub/7237680/hubfs/Podium_Plate.png?width=100&amp;height=100&amp;n..."><p style="font-size: 18px; text-align: center;"><span style="color: #000000;">Erste Agentur Deutschlands, die sich mit vielfältigen Kulturprogrammen auf Kindereinrichtungen spezialisiert hat.
</span></p></div>
<div>

</div>
<div>

<img src="https://f.hubspotusercontent30.net/hub/7237680/hubfs/Group_Plate.png?width=100&amp;height=100&amp;na..."><p style="font-size: 18px; text-align: center;"><span style="color: #000000;">Team von hochqualifizierten Pädagogen und Künstler mit jahrelanger Erfahrung.
</span></p></div></div>
0 Upvotes
4 Replies 4
DMarley
Member
Hello Hubfans, I’m currently working on a landing page, but the I’ve 4 badges in horizontal arraignment in a section. But then once I switch to mobile view, the badges aligned vertically, apparently the four can’t align horizontally, but I want it to be in 2 pairs instead.
Here’s the code for the badges : <div class="badges">
<div>
<img src="https://f.hubspotusercontent30.net/hub/7237680/hubfs/Number1_Plate.png?width=100&amp;height=100&amp;...">
<p style="font-size: 18px; text-align: center;"><span style="color: #000000;">Deutschlands Vorreiter für Kulturförderung in Kindereinrichtungen mit Spaß.</span></p></div>
<div>

</div>
<div>

<img src="https://f.hubspotusercontent30.net/hub/7237680/hubfs/Handshake_Plate.png?width=100&amp;height=100&am..."><p style="font-size: 18px; text-align: center;"><span style="color: #000000;">Bereits über 1000 Veranstaltungen in Einrichtungen mit glücklichen Kindern durchgeführt.</span></p></div>
<div>

</div>
<div>

<img src="https://f.hubspotusercontent30.net/hub/7237680/hubfs/Podium_Plate.png?width=100&amp;height=100&amp;n..."><p style="font-size: 18px; text-align: center;"><span style="color: #000000;">Erste Agentur Deutschlands, die sich mit vielfältigen Kulturprogrammen auf Kindereinrichtungen spezialisiert hat.
</span></p></div>
<div>

</div>
<div>

<img src="https://f.hubspotusercontent30.net/hub/7237680/hubfs/Group_Plate.png?width=100&amp;height=100&amp;na..."><p style="font-size: 18px; text-align: center;"><span style="color: #000000;">Team von hochqualifizierten Pädagogen und Künstler mit jahrelanger Erfahrung.
</span></p></div></div>
0 Upvotes
Teun
Guide | Diamond Partner

Hi @DMarley ,

 

You could try something like this:

HTML: 

<div class="badges">
    <div class="badge">
      <img
        src="https://f.hubspotusercontent30.net/hub/7237680/hubfs/Number1_Plate.png?width=100&amp;height=100&amp;...">
      <p style="font-size: 18px; text-align: center;"><span style="color: #000000;">Deutschlands Vorreiter für
          Kulturförderung in Kindereinrichtungen mit Spaß.</span></p>
    </div>
    <div class="badge">
      <img
        src="https://f.hubspotusercontent30.net/hub/7237680/hubfs/Handshake_Plate.png?width=100&amp;height=100&am...">
      <p style="font-size: 18px; text-align: center;"><span style="color: #000000;">Bereits über 1000 Veranstaltungen in
          Einrichtungen mit glücklichen Kindern durchgeführt.</span></p>
    </div>
    <div class="badge">
      <img
        src="https://f.hubspotusercontent30.net/hub/7237680/hubfs/Podium_Plate.png?width=100&amp;height=100&amp;n...">
      <p style="font-size: 18px; text-align: center;"><span style="color: #000000;">Erste Agentur Deutschlands, die sich
          mit vielfältigen Kulturprogrammen auf Kindereinrichtungen spezialisiert hat.
        </span></p>
    </div>
    <div class="badge">
      <img
        src="https://f.hubspotusercontent30.net/hub/7237680/hubfs/Group_Plate.png?width=100&amp;height=100&amp;na...">
      <p style="font-size: 18px; text-align: center;"><span style="color: #000000;">Team von hochqualifizierten
          Pädagogen
          und Künstler mit jahrelanger Erfahrung.
        </span></p>
    </div>
  </div>

CSS:

    .badges {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
    }

    .badge {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
      max-width: calc(100% / 4 - 1rem);
      margin: 0 0.5rem;
    }

    @media screen and (max-width: 769px) {
      .badge {
        max-width: calc(100% / 2 - 1rem);
      }
    }

You can change the margin, but also change the '-1rem' in the calc if you do so. Change the 'max-width' in the media query if you want to jump to two on one row on smaller screens (I set it to tablet for now).



Did my answer solve your issue? Help the community by marking it as the solution.
Indra
Top Contributor | Diamond Partner

Hi @DMarley,

 

Do you have a link to a preview page? This will help since yo don't have your css included.


Bureau Vet

Did my post solve your question? Help the community by marking it as a solution
webdew
Top Contributor | Diamond Partner

Hi @DMarley ,

You can create a new custom module and add these badge images. use flex properties to style according to your needs.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/


Hope this helps!


If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regard.

0 Upvotes