Newbie - Edit mobile view

[starfury]

Hi,

I have managed to edit the colour themes for my PS 1.6 site however when I view on my mobile phone or tablet it still the same as default colour. Can someone guide me how to edit or where to edit the mobile view site. my site is www.flownit.com and I have attached two screenshot from the mobile side on this thread. Thank you very much

Cheers,

Zul

[falkor]

Hello starfury,
 

First of all we can't enter your website, cause it's in maintance (we need some kind of password or admin session).
But in my opinion it's related with css media queries.
For example

@media (min-width: 768px){
  body{
     background: #FF0000;
  }
}

means that only when resolution of window higher than 768px body background will be red.

So probably you need to change your css a bit more.

Edited May 13, 2014 by falkor (see edit history)

[starfury]

Hi Falkor,

 

Thanks for the quick reply, I am sorry I have miss typed my web address. The correct address is www.myflownit 

 

Are you able to let me know which file is the @media? Is it global.css or theme5.css ? Once again thanks for the reply

 

Cheers,

[falkor]

Sadly it's splited across multiple files.
For example top menu is styled in /themes/default-bootstrap/css/modules/blocktopmenu/css/superfish-modified.css
So if you want to edit styles when browser width is lower than 767px look on line 189.

My advice for you is read some blog posts about responsive design, it will help you understand basics and then use responsive view in firefox (default ctrl + m) + firebug to track all styles

 

EDIT: I've made mistake with keybind, its ctrl + shift + m , my fingers remember but brain not

Edited May 14, 2014 by falkor (see edit history)

[starfury]

Hi Falkor,

Thanks for the reply, I will start reding on responsive blog post and play around with responsive view on Firefox

 

Cheers,