How to correctly modify layouts for mobile devices

  • Resolved jlanpheer

    (@jlanpheer)


    1 year, 9 months ago

    Hello, another simple thing that doesn’t seem to work the way i thought it would or should. On the front page of my site that i am building, i have a container which has a gallery with 3 images in it side-by-side in the body of the page (no header/footer considerations here). This works great. Now on to the responsive part, i want to change the layout so the image gallery has only 2 images side-by-side in the tablet layout and a single column with the images one beneath the other on a phone.

    So i clicked on the ‘tablet’ icon at the top of the page viewer/editor, removed my three-column gallery, replaced it with a two-column gallery. I then did the same for the mobile phone – clicked on the ‘phone’ icon at the top of the page, changed the two-column gallery to a single image – all three images one beneath the other. However, when i went back to the full page editor (by clicking the ‘desktop’ icon on the top of the page), my original 3-column full page layout was gone, and only the one-column version was showing. So, it doesn’t appear that i understand how to customize pages for various layouts. I’ve done quite a bit of googling and most articles seem to specialize in talking about the header/footer.

    Can anyone steer me in the right direction for how to customize the different size screens for page content? Thanks much!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter jlanpheer

    (@jlanpheer)

    Can anyone help me out here? Do i have the ability to have three layouts depending on which view (mobile/tablet/desktop) is active? Or, do i need to put all three layouts on a single page and conditionally show them based on breakpoints and styling in style.css? See above…..

    Thread Starter jlanpheer

    (@jlanpheer)

    Never mind, i figured it out. For those coming later and reading this, the desktop/tablet/mobile icons at the top of the design page are only a VIEW of ALL the content of the page, they are not 3 separate customizable layouts.

    My work involves switching between different containers and different screen sizes and i was confused by the fact that ALL the containers were showing up (even in views where my css had them ‘hidden’). In other words, the responsive icons at the top of the page ignore your css, they simply show all the blocks as they would show at that screen resolution.

    It makes for a messy layout, but at least i understand it. Closing this issue.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to correctly modify layouts for mobile devices’ is closed to new replies.