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
Comment | File | Size | Author |
---|---|---|---|
#6 | fusion_accelerator-min-width-2077053-6.patch | 829 bytes | Poieo |
Comments
Comment #1
Seipher19 CreditAttribution: Seipher19 commentedThe problem is the following code still in the Tablet Portrait media query in the fusion_starter.responsive.grid.css file:
You should put the following code within the mobile media query, after this your page will load as it should on mobile phones.
Greetings,
Mats
Comment #2
LaurenW CreditAttribution: LaurenW commentedThanks! That seems to fix my issue with the fusion theme's width not responding.
Comment #3
Poieo CreditAttribution: Poieo commentedCould someone post more information about their specific issue. I can't seem to reproduce this.
Comment #5
Poieo CreditAttribution: Poieo commentedI 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.
Comment #6
Poieo CreditAttribution: Poieo commentedAttached patch addresses this issue.