Locations page doesn't work well in tablets in Portrait View

  • Resolved Mike Sneed

    (@msneed)


    10 years, 1 month ago

    Hi Everyone!

    If you go to this sandbox here I have a grid of images/info that will be the locations page on the main site.

    It’s coming together but in iPad Portrait view according to the Viewport Resizer I get 2 images across the page and then 1 on the next line. So, It’s breaking up the “3 across” look I want.. I’d be happy with even stacking but I can’t get that either.

    I know I put in fixed widths for the images so that’s a thought maybe what not to do..so I retried by starting over and looking at Bootstrap and used col-md-4 and different variations to get different grid results…as of now I’m back to ‘square one’.

    Thanks for the assistance.
    Mike

Viewing 6 replies - 1 through 6 (of 6 total)
  • rdellconsulting

    (@rdellconsulting)

    10 years, 1 month ago

    OK you’re on the right lines.

    You have <div class="row"> which needs to be changed to <div class="row-fluid"> to make the page responsive. All 5 need to be changed.

    Stick to class=”span4…” to maintain 3 per row.

    Change that and then come back for more.

    Thread Starter Mike Sneed

    (@msneed)

    10 years, 1 month ago

    Thanks rdell..

    I put in those changes and you can see them here.

    The other thought I had was possibly making the images smaller and not having a fixed width declared in the CSS for the CSS hover effects wrappers like for .view for example.

    Thanks for the help.
    Michael

    rdellconsulting

    (@rdellconsulting)

    10 years, 1 month ago

    Avoid fixed widths definitely. If you have to adjust width, try to use %.

    But span4-span4-span4 should do that for you without having to adjust anything manually.

    Maybe strip down your css and rebuild it to find where you’re skewing the CSS.

    Rocco Aliberti

    (@d4z_c0nf)

    10 years, 1 month ago

    Mike, I saw you set “span4” as class of that div with other classes “view” and “view-first”. Remove span4 from that, instead assign the class=”span4″ to the divs with the cities name as id.
    You have to get something like this (for example):

    <div id="la" class="span4">
    <span class="la-LocTitle">LOS ANGELES</span>
    <div class="view view-first">
......

    Thread Starter Mike Sneed

    (@msneed)

    10 years, 1 month ago

    Thanks rdell and d4z_c0nf.. I’ll implement those fixes and let you know my progress.. Thanks heaps for the help!

    Michael

    Thread Starter Mike Sneed

    (@msneed)

    10 years, 1 month ago

    I implemented the changes along with some percentage based changes to the image work and widths as needed per individual Media Queries.. things are coming together!

    Thanks again rdell and d4z_c0nf. Much appreciated!!!

    All best,
    Michael

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Locations page doesn't work well in tablets in Portrait View’ is closed to new replies.