Columns on Mobile and Tablet View

  • We used Div style code to set a 2-column layout. However, we must not have the code quite right as the display on mobile and tablet is messy. How do we need to edit the formatting code to provide a 2-column desktop and tablet display (clean though) and a single column mobile display?

    Here is the code:

    <!–more–>
    <div style=”padding: 0 10pt 0 0; width: 50%; float: left;”></div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>Martin AechternachtMartin Aechternacht
    Loan Officer
    NMLS #1429303
    512.897.7134
    Email
    Website</div>
    <div style=”padding: 0 10pt 0 0; width: 50%; float: left;”></div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>Jared AjaJared Aja
    Marketing Specialist/Videographer
    512.524.8324
    Email</div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    <hr />

    </div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    <hr />

    </div>
    <div style=”padding: 0 10pt 0 0; width: 50%; float: left;”></div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>Michelle-AlbertsMichelle Alberts
    Loan Officer
    NMLS #232843
    512.698.8738
    Email
    Website</div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>LuCindaBachmanLuCinda Bachman
    Loan Officer
    NMLS #233809
    512.485.1121
    Email
    Website</div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    <hr />

    </div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    <hr />

    </div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>Leah BaizeLeah Baize
    Loan Officer
    NMLS #585048
    512.351.0867
    Email
    Website</div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>JasonBattlesJason Battles
    Loan Officer Assistant
    512.524.8311
    Email</div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    <hr />

    </div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    <hr />

    </div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>NateBeitaNate Beita
    Loan Officer
    NMLS #513254
    512.431.7055
    Email
    Website</div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>WaltBrewerWalt Brewer
    Loan Officer
    NMLS #265154
    512.775.4074
    Email
    Website</div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    <hr />

    </div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    <hr />

    </div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>LynneBroussardLynne Broussard
    Business Development Manager
    512.814.9565
    Email</div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>BrianCampbellBrian Campbell
    Loan Officer
    NMLS #212428
    512.587.8640
    Email
    Website</div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    <hr />

    </div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    <hr />

    </div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>AnthonyCamposAnthony Campos
    Sr. Loan Officer
    NMLS #217862
    512.963.4889
    Email
    Website</div>
    <div style=”padding: 0 10pt 0 0; width: 50%; float: left;”>chandraChandra Carthrae
    Loan Officer
    NMLS #396128
    512.694.0566
    Email
    Website</div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    <hr />

    </div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    <hr />

    </div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>Aaron CollinsAaron Collins
    Sr. Loan Officer
    NMLS #202121
    512.626.5330
    Email
    Website</div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>Dean CarrierDean Carrier
    Loan Officer
    NMLS #45437
    512.524.8367
    Email
    Website</div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    <hr />

    </div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    <hr />

    </div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>AmberCorteseAmber Cortese
    Processor
    512.485.1113
    Email</div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    WendyDabrusinNewWendy Dabrusin
    Loan Officer
    NMLS #208235
    512.517.7858
    Email
    Website

    </div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    <hr />

    </div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    <hr />

    </div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>JoshFloresJosh Flores
    Loan Officer
    NMLS #206893
    512.279.1140
    Email
    Website</div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>JayGarrettJay Garrett
    Loan Officer
    NMLS #1193018
    512.524.8306
    Email
    Website</div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    <hr />

    </div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    <hr />

    </div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>NatalieGerasimenkoNatalie Gerasimenko
    Underwriter</div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>MarissaGrahamMarissa Graham
    Processor
    512.485.1119
    Email</div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    <hr />

    </div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    <hr />

    </div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>LindaHelmsinLinda Helmsin
    Loan Officer Assistant
    NMLS #1289125
    512.524.8342
    Email</div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>TylerHughesTyler Hughes
    Loan Officer
    NMLS #1025063
    512.777.8518
    Email
    Website</div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    <hr />

    </div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    <hr />

    </div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>AndreaKeithAndrea Keith
    Loan Officer
    NMLS #207594
    512.524.8352
    Email
    Website</div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>Nathan KreutzNathan Kreutz
    Loan Coordinator
    512.485.1125
    Email</div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    <hr />

    </div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    <hr />

    </div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>ShannonLasaterShannon Lasater
    Loan Officer
    NMLS #240732
    512.587.8679
    Email
    Website</div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>JasonLewisJason Lewis
    Loan Officer
    NMLS #207770
    512.799.2996
    Email
    Website</div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    <hr />

    </div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    <hr />

    </div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>MandyLordMandy Lord
    Loan Officer
    NMLS #416272
    512.350.0597
    Email
    Website</div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>JohnMcClellanJohn McClellan
    Branch Manager
    512.589.8088
    Email</div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    <hr />

    </div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    <hr />

    </div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>SamMcClellanSamantha McClellan
    Office Manager
    512.524.8364
    Email</div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>DanaMcGrathDana McGrath
    Processor
    512.524.8314
    Email</div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    <hr />

    </div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    <hr />

    </div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>Dayna MendezDayna Mendez
    Marketing Specialist
    512.481.7767
    Email</div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>JanieMeredithJanie Meredith
    Processor
    512.524.8370
    Email</div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    <hr />

    </div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    <hr />

    </div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>Shelly NeltonShelly Nelton
    Loan Officer
    NMLS #1496661
    512.524.8366
    Email
    Website</div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>Heidi NorthHeidi North
    Loan Officer Assistant
    512.524.8366
    Email</div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    <hr />

    </div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    <hr />

    </div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>KathrynPadillaKathryn Padilla
    Processor
    512.279.11128
    Email</div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>BrookePayneBrooke Payne
    Loan Officer
    NMLS #977110
    785.393.6228
    Email
    Website</div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    <hr />

    </div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    <hr />

    </div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>IsabellePerezIsabelle Perez
    Loan Coordinator
    512.524.8316
    Email</div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>Jennifer PierceJennifer Pierce
    Processor
    512.485.1114
    Email</div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    <hr />

    </div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    <hr />

    </div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>JoePochronJoe Pochron
    Sr. Loan Officer
    NMLS #282897
    512.748.4023
    Email
    Website</div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>Lauren RangnowLauren Rangnow
    Sales Production Manager
    512.524.8361
    Email</div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    <hr />

    </div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    <hr />

    </div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>Louis RodriguezLouis Rodriguez
    Loan Officer
    NMLS #190057
    512.524.8330
    Email
    Website</div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>ShannonSmithShannon Smith
    Business Development
    512.524.8304
    Email</div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    <hr />

    </div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    <hr />

    </div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>Trae StebbinsTrae Stebbins
    Loan Officer Assistant
    512.485.1122
    Email</div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>MaryStephensMary Stephens
    Loan Officer
    NMLS #218451
    512.415.0595
    Email
    Website</div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    <hr />

    </div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    <hr />

    </div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>JoeyTownleyJoey Townley
    Loan?Coordinator
    512.524.8360
    Email</div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>Joshua TownleyJoshua Townley
    Loan Coordinator
    512.524.8336
    Email</div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    <hr />

    </div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    <hr />

    </div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>Luz TrujilloLuz Trujillo
    Loan Processor
    512.485.1117
    Email</div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>TonyTylmanTony Tylman
    Branch Manager
    NMLS #649489
    San Antonio, TX Website</div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    <hr />

    </div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    <hr />

    </div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>Janet WidmerJanet Widmer
    Sr. Loan?Officer
    NMLS #232054
    512.524.8361
    Email
    Website</div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>Joani WilsonJoani Wilson
    Loan?Officer
    NMLS #227287
    512.524.6788
    Email
    Website</div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    <hr />

    </div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>

    <hr />

    </div>
    <div style=”width: 50%; padding: 0 10pt 0 0; float: left;”>John YoungbloodJohn Youngblood
    Sr. Loan?Officer
    NMLS #1203992
    512.573.1555
    Email
    Website</div>
    ?

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    Hi, when pasting code, use the Code button so that it doesn’t end up getting rendered here in the forums.

    If we do this with CSS, we have much more control over things than when you add inline styles. What I would do would be to remove all the style declarations from the divs you have the images and text in and add a CSS class instead. Then you can declare the styles like this.
    <div class="team">

    The CSS:

    .team {
width: 50%;
padding: 0;
float: left;
}
@media screen and (max-width: 600px) {
.team {
width: 100%;
}

    The above is just a general guide, and the second rule sets the width on the team divs to 100% so that they will be legible and look good on mobile devices.

    Also, points are generally for print media and not for the web. Use pixels instead (px). Things can go awry when pt is used.

    Thread Starter suprememarketing

    (@suprememarketing)

    Thank you! I am getting an alignment issue when added a </br> after the second entry (right) in each group, though.

    `<div class=”team”>
    Martin AechternachtMartin Aechternacht
    Loan Officer
    NMLS #1429303
    512.897.7134
    Email
    Website</div>
    <div class=”team”>Jared AjaJared Aja
    Marketing Specialist/Videographer
    512.524.8324
    Email</div>

    <div class=”team”>Michelle-AlbertsMichelle Alberts
    Loan Officer
    NMLS #232843
    512.698.8738
    Email
    Website</div>
    <div class=”team”>LuCindaBachmanLuCinda Bachman
    Loan Officer
    NMLS #233809
    512.485.1121
    Email
    Website</div>

    sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    Hi, the <div class="team"> needs to be put into the content from within the HTML/Text tab, not the visual tab. Delete those from the visual editor and add them in on the HTML/Text tab.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Columns on Mobile and Tablet View’ is closed to new replies.