I have created a 3 column homebox site with rss feeds in an attempt to roll my own replacement for google ig (which is to shut soon). It works perfectly for what I want. Is there a simple method to serve up a 1 column version of the same site to mobile users? I have been investigating browscap and adaptive theme (AT) but I was hoping there was a simple method of serving the same site with 1 column instead of three (must use homebox)?

Desktop: screenshot of desktop version Mobile: mobile

  • This will be done using css3 media queries. CSS is beyond the scope of this site as it isn't Drupal specific. Your going to target the containers and resize them using something like @media screen and (max-width:740px{.section{width:100%;clear:both;}}. Sorry comments to not allow formatting and I am not going to post this as an answer as your question will most likely be closed as being off-topic. Jul 31, 2013 at 20:43
  • I thought that because this was a homebox and adaptive theme question, it'd be right at home here. Jul 31, 2013 at 20:52
  • Unfortunately while its related it isn't drupal specific. Some CSS questions sometimes make it through though either way I gave you an answer to use. Jul 31, 2013 at 21:30
  • I am a drupal and css newbie I'm afraid, so I was hoping for a simple answer. I will investigate AT (and css) some more then? Jul 31, 2013 at 21:55
  • I have added an answer below. Jul 31, 2013 at 22:41

1 Answer 1


Add the following to your css.

@media screen and (max-width:740px){
  • See edit. This code didn't do what I wanted. Thanks for the suggestion though. Aug 1, 2013 at 7:39
  • There is something in the AT theme that is doing that because it works just fine in Omega sub theme. Without access to the site I'm afraid this as far as I can take you. Maybe there is a height value set somewhere that needs to be overridden. Can't say for sure without direct access. Aug 1, 2013 at 12:19
  • Ok Nigel. I'll give it a try. Just to clarify though: In Omega theme the homebox will go to 1 column? Thanks. Aug 1, 2013 at 12:20
  • I am not suggesting switching to omega. I am suggesting to check on a height value that is being applied. Use firebug to inspect it. Other than that I cannot do much more without being able to directly inspect the code myself. It could be a 100 different things. Aug 1, 2013 at 12:22
  • 1
    lol. I had !important in my example code initially in my answer but I took it out on a revision because it may have been unnecessary. I guess not. I am glad it worked. Aug 1, 2013 at 15:24

Not the answer you're looking for? Browse other questions tagged or ask your own question.