{"id":619,"date":"2014-09-11T14:50:51","date_gmt":"2014-09-11T14:50:51","guid":{"rendered":"http:\/\/www.numbas.org.uk\/?p=619"},"modified":"2014-09-11T14:50:51","modified_gmt":"2014-09-11T14:50:51","slug":"responsive-layout-on-mobile-devices","status":"publish","type":"post","link":"https:\/\/www.numbas.org.uk\/theme-testing\/blog\/2014\/09\/responsive-layout-on-mobile-devices\/","title":{"rendered":"Responsive layout on mobile devices"},"content":{"rendered":"<p>On small screens (tablets and phones, mainly), the default Numbas theme didn&#8217;t used to leave much space for the question content.<\/p>\n<p>I&#8217;ve spent the past couple of days making the theme responsive, so screens less than 980px wide switch to a more vertical layout. The question menu and pause\/end buttons move beneath the content area, and the banner is more vertical too. This means the content area can have the full width of the page.<!--more--><\/p>\n<p>I&#8217;ll show you what I mean, using my Android phone. Instead of looking like this&#8230;<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-620\" alt=\"numbas mobile old\" src=\"http:\/\/www.numbas.org.uk\/wp-content\/uploads\/2014\/09\/numbas-mobile-old.png\" width=\"500\" height=\"727\" \/><\/p>\n<p>&#8230; a Numbas test now looks like this:<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-621\" alt=\"numbas mobile\" src=\"http:\/\/www.numbas.org.uk\/wp-content\/uploads\/2014\/09\/numbas-mobile.png\" width=\"500\" height=\"801\" \/><\/p>\n<p>The new layout has been tested on Chrome, Firefox, IE9, and various Android and iOS devices. It\u00a0<em>should<\/em> work on just about everything, and you shouldn&#8217;t notice any big differences on a desktop browser. Try it out for yourself on <a href=\"https:\/\/numbas.mathcentre.ac.uk\/\">the Numbas editor<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>On small screens (tablets and phones, mainly), the default Numbas theme didn&#8217;t used to leave much space for the question content. I&#8217;ve spent the past couple of days making the theme responsive, so screens less than 980px wide switch to a more vertical layout. The question menu and pause\/end buttons move beneath the content area, [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[10],"tags":[],"_links":{"self":[{"href":"https:\/\/www.numbas.org.uk\/theme-testing\/wp-json\/wp\/v2\/posts\/619"}],"collection":[{"href":"https:\/\/www.numbas.org.uk\/theme-testing\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.numbas.org.uk\/theme-testing\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.numbas.org.uk\/theme-testing\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.numbas.org.uk\/theme-testing\/wp-json\/wp\/v2\/comments?post=619"}],"version-history":[{"count":0,"href":"https:\/\/www.numbas.org.uk\/theme-testing\/wp-json\/wp\/v2\/posts\/619\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.numbas.org.uk\/theme-testing\/wp-json\/wp\/v2\/media?parent=619"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.numbas.org.uk\/theme-testing\/wp-json\/wp\/v2\/categories?post=619"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.numbas.org.uk\/theme-testing\/wp-json\/wp\/v2\/tags?post=619"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}