Hello,
I am trying to launch a website (http://everettkelley.com/drupal/) today but encountering some bugs with the responsive for mobile. I am using a Fusion Starter Lite subtheme and the responsive elements work perfectly on my desktop, tablet and mobile emulators on the computer. However, when I look at it on a phone (iPhone or Android) the columns are not resizing to 100%. They are stacking correctly but seem to be about 300% of the screen width.

This is the default CSS in the theme for smaller screen sizes:

@media only screen and (max-width:759px) {
/**
 * Fusion Grid Layout - Mobile layout, 12 column grid, 15px gutters
 * -------------------------------------------------------------------- */

/* grid widths */
body .grid12-1,
body .grid12-2,
body .grid12-3,
body .grid12-4,
body .grid12-5,
body .grid12-6,
body .grid12-7,
body .grid12-8,
body .grid12-9,
body .grid12-10,
body .grid12-11,
body .grid12-12 {
  clear: both;
  width: 100%;
}

I also tried referencing the size more specifically with this code, which caused no change:

@media only screen and (max-device-width: 568px) and (orientation:landscape), 
only screen and (min-width:320px) and (max-width:568px) and (min-device-width: 320px) 
/**
 * Fusion Grid Layout - Mobile layout, 12 column grid, 15px gutters
 * -------------------------------------------------------------------- */

/* grid widths */
body .grid12-1,
body .grid12-2,
body .grid12-3,
body .grid12-4,
body .grid12-5,
body .grid12-6,
body .grid12-7,
body .grid12-8,
body .grid12-9,
body .grid12-10,
body .grid12-11,
body .grid12-12,
#main-wrapper {
  clear: both;
  width: 100%;
  max-width: 320px !important;
}

This is very difficult for me to troubleshoot because the responsive works fine on the computer and resizing emulators on the computer, but does not actually work on the phones. If anyone has had similar problems and can offer some insight, I would really appreciate it. As I said I am trying to launch this site today, so please reply as soon as possible!

Thanks in advance!

Lauren

CommentFileSizeAuthor
#6 fusion_accelerator-min-width-2077053-6.patch829 bytesPoieo
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Seipher19’s picture

The problem is the following code still in the Tablet Portrait media query in the fusion_starter.responsive.grid.css file:

body,
div.full-width {
  min-width: 768px;
}

You should put the following code within the mobile media query, after this your page will load as it should on mobile phones.

body,
div.full-width {
  min-width: 0px;
}

Greetings,

Mats

LaurenW’s picture

Thanks! That seems to fix my issue with the fusion theme's width not responding.

Poieo’s picture

Version: 7.x-2.0-beta2 » 7.x-2.x-dev
Status: Active » Postponed (maintainer needs more info)

Could someone post more information about their specific issue. I can't seem to reproduce this.

  • Commit 527111c on 7.x-2.x by Poieo:
    Issue #2077053 by Seipher19: Mobile Min-Width
    
Poieo’s picture

Title: Mobile responsive not working » Mobile Responsive is Incorrect Due to Missing min-width
Project: Fusion » Fusion Accelerator
Category: Support request » Bug report
Status: Postponed (maintainer needs more info) » Active

I committed a change to Fusion Core to address this. However, Fusion Accelerator is responsible for building the responsive.grid.css files so a change really needs to be made there as well for this to work.

I'm moving this to the Fusion Accelerator que.

Poieo’s picture

Status: Active » Needs review
FileSize
829 bytes

Attached patch addresses this issue.

  • Poieo committed 06c881a on 7.x-2.x
    Issue #2077053 by Poieo: Add min-width to mobile.