Tagged: background, responsive, sections
-
AuthorPosts
-
September 26, 2014 at 12:39 pm #325538
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?
<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 10 years, 1 month ago by AnnemarieDoolin.
September 26, 2014 at 1:22 pm #325551Hey Annemarie!
Please turn on Custom CSS field for ALB elements ( http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ ) and give your text blocks a unique class and then add following code to Quick CSS in Enfold theme options under General Styling tab
@media only screen and (min-width:1140px) { .custom-class div { min-height: 349px; }} @media only screen and (max-width:1139px) and (min-width: 990px) { .custom-class div { min-height: 382px; }} @media only screen and (max-width:989px) and (min-width: 769px) { .custom-class div { min-height: 466px; }}
Cheers!
YigitOctober 10, 2014 at 3:16 pm #333871Hi Yigit,
How do you determine the appropriate mid-width and min-heights? Is it a specific ratio?
sl
October 10, 2014 at 3:39 pm #333879Hey!
You can refer to this table – http://spirelightmedia.com/resources/responsive-design-device-resolution-reference
You can also resize your browsers window to find breaking pointsBest regards,
YigitOctober 10, 2014 at 5:04 pm #333948Thanks Yigit. How do you determine breaking points with your browser? How can you measure that?
October 10, 2014 at 5:12 pm #333951Hey!
You will see elements changing sizes. Please try resizing your browser window
Best regards,
YigitOctober 10, 2014 at 5:14 pm #333954I understand that, but how would you know the pixels?
October 10, 2014 at 5:18 pm #333957Hi!
Using chrome, you can firstly inspect elements and then resize the window and you will see the width on the top right side – http://i.imgur.com/dlXEaPI.jpg
Best regards,
YigitOctober 10, 2014 at 5:31 pm #333961Awesome…I didn’t know that…great tip! Thanks.
-
AuthorPosts
- The topic ‘Set equal size boxes with backgrounds which are responsive’ is closed to new replies.