755969 - Betafarm Homepage UI issues in mobile browser

Status: RESOLVED WONTFIX

(Websites :: mozillalabs.com, defect)

Description

[havi hoffman [:havi]]

Various UI elements are not optimal/responsive (tested in both Safari on iphone ios 5, FF beta on Android)

-- because there is no right rail: 

* the search box sits below the the list of projects
* the blog feed sits below the search box
* see all projects is obscured

it is difficult to navigate responsively on the homepage

Comment 1

[Georgia Haynes]

Single-column layouts are mobile-friendly right out of the box. All you need to do is set your div widths to 100% and they’ll automatically fill the width of any display. As long as your text and images are set in responsive units (em, %, etc.), you should be good to go.

For page sections that require columns (service sections, product listings, etc.) you can create columns within one of those 100%-width divs. This allows you to set them as horizontal columns on desktop and wider displays and then vertically stack them as full-width divs on mobile.
I have also used this method with my website https://breezefitness.com.au/ and got a good result.

Comment 2

[Ben (:bensternthal)]

mozillalabs is archived and no longer maintained.