Hello and thank you for this theme! I have been using ir for a new website for the first time and it's elegant and high quality!

I have created a new subtheme (by the way drush command for creating a subtheme doesnt work for me...) for a mobile.

I want to understand how do I give different css for different phones.
I have been using Mobile_tools along with Browscap to redirect so I can create different subtheme for each phone, though I dont really want that.
I want "1 subtheme to role theme all".
I dont want a "landscape" type but a fixed theme for a mobile.

Should width 100% will do the job?

Thanks

Comments

tsi’s picture

tsi commented

I wonder why drush sns didn't work for you...
About the responsiveness, I'm not really sure what are you trying to achieve.
You should define what you want to happen and when, stuff like :
"browsers smaller then 767px should have only one sidebar" or
"browsers wider then 960px should have different font size"
etc.

amirtaiar’s picture

amirtaiar commented

Thank you Tsi.
I can see that in the responsive settings for mobile I have 3 options to choose from.
I that what you mean by defining?

I want 2 things from my mobile theme:
- No pinch-to-zoom.
- Feet to most popular mobiles. I know it's a big request but I am trying width 100% in difference divs - Still checking this.

tsi’s picture

tsi commented

For the "no-zoom" I believe you can use :
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

try to put this in your THEMENAME_preprocess_html :

    $mobile_viewport = array(
      '#type' => 'html_tag',
      '#tag' => 'meta',
      '#attributes' => array(
        'content' =>  'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no',
        'name' => 'viewport',
      )
    );
    drupal_add_html_head($mobile_viewport, 'mobile_viewport');

About the rest, you must understand, mobile browsers are simply browsers with different dimensions, on Sasson's theme settings you are not choosing from 3 options - you set 3 break-points. If you're using the mobile first approach what you're setting goes like this :
first load sasson-base.scss, if the browser is smaller than 960px load sasson-narrow.scss, if it is smaller than 767px load sasson-narrower.scss etc.
This way you can make css adjustments based on the browser dimensions.

amirtaiar’s picture

amirtaiar commented

Pinchtozoom disable works fine though now i have another major issue.
The site isn't scrolling down / up on the devices. It's also not scroling when using the fusion_mobile theme.
I guess it has some relationg to the fact that the node I am trying to theme is a content type with 5 group-fileds containing youtube gallery and image views_slideshow gallery. ??

tsi’s picture

tsi commented

I honestly don't know, but as you said yourself, this has nothing to do with Sasson.

erutan’s picture

erutan commented

First of all, thanks for all the time put into this theme!

In regards to repsonsive layout behaviour, I know we can edit this at the core theme level at /styles/layout, but how would we include this at a subtheme level? I'm not seeing anything obvious.

Secondly I was thinking of using the ruby compiler client side to get more features, but if I serve up CSS to the theme to be read on the server then I'd have to precompile all the responsive layouts as well wouldn't I?

chiebert’s picture

chiebert commented

A hint as to how to use Sasson, with responsive breakpoints, using a ruby compiler, would be most welcome!

tsi’s picture

tsi commented
Status: Active » Closed (works as designed)

Guys, let's keep it in a one-issue-at-a-time frame, otherwise we're getting lost here.
@erutan don't hack the base theme, copy the files to your sub-theme and edit them there, as long as they have the same name, Sasson should find them and use them.
@chiebert I totally agree, but I myself won't be able to write such a post anytime soon, there's only this much time I can spare for documentation.