[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

Re: [MirageOS-devel] zurb responsive problem on mobiles

On 11 Feb 2014, at 23:08, Amir Chaudhry <amirmc@xxxxxxxxx> wrote:

> On 11 Feb 2014, at 22:45, Richard Mortier <Richard.Mortier@xxxxxxxxxxxxxxxx> 
> wrote:
>> On 11 Feb 2014, at 22:39, Anil Madhavapeddy <anil@xxxxxxxxxx> wrote:
>>> Does anyone have any idea why the openmirage.org blog layout looks odd on a 
>>> mobile device such as an iPhone?
>>> The columns don't expand to fill my iPhone due to the <pre> code tags (with 
>>> the latest blog post for example).  My CSS-fu isn't quite up there to 
>>> figure out why though...
>> only had a quick glance but: this is controlled by the small-N large-N etc 
>> classes isn't it?
>> the sidebar on the blog page is "small-6 large-3" following a div which is 
>> "small-12 large-9".
>> there are 12 columns, so this will overflow on small displays but fit nicely 
>> adjacent to blog posts on larger.
>> try making the aside "small-12 large-3"…?
> I think that's one of the problems to fix but I'm not sure it'll fix the code 
> samples.  
> I'd try wrapping the <pre> blocks in a <div> and see if that improves things. 
>  I moved my jekyll-based site to Zurb a while ago and my code snippets appear 
> to scale as expected.  They'reof the form <div><pre><code> rather than just 
> <pre><code>.  
> NB At the risk of stating the obvious, you can check how the site will look 
> on a phone by narrowing your browser window. 

I tried taking the html and playing with it locally.  Wrapping in a <div> 
doesn't make any difference.

For my code highlighting I'd simply copy/pasted what bootstrap had and looking 
at the CSS, my `pre` has the following lines:
  word-break: break-all;
  word-wrap: break-word;

You can read the docs for each of these below but I think you'll only need the 
latter of the two.  Adding them will make the text run over multiple lines but 
it won't look pretty (I don't think there's a sane way to fix that though).  

I'm not sure if there's a better way but this should suffice for the time being.


MirageOS-devel mailing list



Lists.xenproject.org is hosted with RackSpace, monitoring our
servers 24x7x365 and backed by RackSpace's Fanatical Support®.