Set equal size boxes with backgrounds which are responsive

Hi, I am creating sections which require coloured backgrounds so the sections need to have the same heights otherwise they look horrible. If I give the sections a set height how can I make sure they are responsive on the mobile.

In the image example I have a line of 1/3, 2/5 and 1/4 sections… but they need to visually look aligned on all devices. I have used padding but I know it’s not the best option and I notice sometimes the boxes jump as much as 8pixels and look wonky. If I assign a set height how do I get other devices to be flexible and set themselves to what is required?

LINK TO WEBPAGE

<div style="background-color: #648fda; border: 1px solid #4d6fab; color: #fff; padding: 20px 20px 15px 20px;">
<h3 style="color: #fff;">KURSUSBESKRIVELSE</h3>
<ul class="toenhalv">
	<li>Oplæring i 4 guidede meditationer</li>
	<li>Videoundervisning til hjemmeøvelse og træning</li>
	<li>Lyd meditationer til hjemmeøvelse og træning</li>
	<li>Ugespecifikke øvelsesplaner</li>
	<li>Dagbogs-guide</li>
	<li>E-bogen 12 minutter til succes</li>
	<li>Før / efter målinger på stress og gnist</li>
</ul>
</div>

<div style="background-color: #648fda; border: 1px solid #4d6fab; color: #fff; padding: 20px;">
<h3 style="color: #fff;">Daglig meditation som vane for livet</h3>
Det sværeste ved at bruge et nyt redskab er at huske det. Og finde plads til det. Først derefter er det selve udførelsen. Derfor har vi skabt ’12 minutter til ro og gnist’ – et meditationskursus med et meget klart fokus:

At give dine medarbejdere en ny, god vane for livet: Daglig meditation.

Det tager typisk 6 uger at skabe en ny vane. Med dette kursus får dine medarbejdere alle de redskaber, der skal til, for at indarbejde meditation fast i deres hverdag – og sideløbende lære at finde og fastholde deres indre gnist.</div>

<div style="background-color: #648fda; border: 1px solid #4d6fab; color: #fff; padding: 20px 20px 4px 20px;">
<h3 style="color: #fff;">RESULTATER:</h3>
<ul class="toenhalv">
	<li>Nedsat stress</li>
	<li>Øget koncentration</li>
	<li>Større lykkefølelse</li>
	<li>Styrket velvære</li>
	<li>Dyb bevidsthed</li>
	<li>Flow i hverdagen</li>
	<li>Selvudvikling</li>
	<li>Bedre retning i livet</li>
	<li>Meningsfuldhed</li>
</ul>
</div>

• This topic was modified 9 years, 10 months ago by AnnemarieDoolin.