Mobile responsiveness

[DMarley]

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>

[webdew]

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.

[Indra]

Hi @DMarley,

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

[Teun]

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).

[DMarley]

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>