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&height=100&..."> <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>
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).
Learn more about HubSpot by following me on LinkedIn or YouTube
✅ Did my answer solve your issue? Help the community by marking it as the solution.
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&height=100&..."> <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>