Getting Drupal 7, Corolla and iPad together?

Of coz you will!

I know its a site specific solution but it was hacked together very quickly out of curiosity. A more sophisticated solution can be worked out by others Wink

Some hints for a generic solution:

Move the corolla theme footer from page-content.tpl.php to page.tpl.php below #main-columns-wrapper. This gets the footer outside the div's and makes positioning easier. The rest ist percentage fiddling within #sidebar-first and #sidebar-second blocks.

But we dont need a generic solution, so here is the quick hack for a page like this: 3 blocks in a single, right, sidebar:

style.css in sites/all/themes/corolla subdirectory after installation

find:
/* Mobile */
@media only screen and (max-device-width: 480px) {
  #navigation-wrapper,
  #header,
  #main-columns {
    width: 100%!important;
  }
}
add below:
/* corolla ipad css - khype specific */
@media screen and (orientation: portrait) {
 
  body.one-sidebar #main-wrapper {
    width: 100%;
    float: left;
    position: relative;
  }
 
  body.one-sidebar #sidebar-first {
    clear:left;
    float:left; 	
    width: 100%;
    height: 280px;
  }
 
  #sidebar-first .block-views, #sidebar-first .block-tagadelic {
    clear:none;
    width: 32%;
    float:left;
  }
 
  #sidebar-first #block-views-archive-block	 {
    width: 28%;
    margin-left: 30px;
  }
 
  #sidebar-first .block-tagadelic {
    float:right;
    padding-right: 20px;
  }
 
  #closure {
    position: absolute;
    border-top: 1px dashed silver;
    top: 100%;
    padding-top: 10px;
    margin-top: 280px;
    width: 100%;
  }
}

To see what I'm talking about use either Firefox, Chrome, Opera or a real iPad to see how the page reacts on portrait mode. Just make the page smaller vertically or rotate your iPad to test.
Internet Explorer 8 does not check on media selectors so the page looks always the same when resizing.

Best wishes ;)

Post new comment

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.
  • No HTML tags allowed.
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>. The supported tag styles are: <foo>, [foo].
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.
© 2010 khype.org.. Drupal theme by Kiwi Themes.