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

[Amir Chaudhry <amc79@xxxxxxxxx>]

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.

https://developer.mozilla.org/en-US/docs/Web/CSS/word-break
https://developer.mozilla.org/en-US/docs/Web/CSS/word-wrap

ac
_______________________________________________
MirageOS-devel mailing list
MirageOS-devel@xxxxxxxxxxxxxxxxxxxx
http://lists.xenproject.org/cgi-bin/mailman/listinfo/mirageos-devel