Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #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.

    Sections with backgrounds requiring heights that are equal but responsive on 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>
    #325551

    Hey 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!
    Yigit

    #333871

    Hi Yigit,

    How do you determine the appropriate mid-width and min-heights? Is it a specific ratio?

    sl

    #333879

    Hey!

    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 points

    Best regards,
    Yigit

    #333948

    Thanks Yigit. How do you determine breaking points with your browser? How can you measure that?

    #333951

    Hey!

    You will see elements changing sizes. Please try resizing your browser window

    Best regards,
    Yigit

    #333954

    I understand that, but how would you know the pixels?

    #333957

    Hi!

    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,
    Yigit

    #333961

    Awesome…I didn’t know that…great tip! Thanks.

Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Set equal size boxes with backgrounds which are responsive’ is closed to new replies.