Theme: Corolla (latest) and AT 3.0
On my frontpage on fromwaydowntown.de I noticed that after the update the left margin seems to be lost. Before the update everything worked fine so I suspect some tiny bits have changed. I suspect that this is something with AT Panels because on the about page this problem doesn't exist (which doesn't make use of AT Panels).

Attached screengrab shows the problem. Note that both are from desktop browsers but old-ass Safari reproduces the error exactly when resized. On my mobile I get this both with Opera and FFmobile.

error margin left

CommentFileSizeAuthor
#1 update breaks design2.PNG37.06 KBdddave
Margin error left.PNG120.25 KBdddave
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

dddave’s picture

FileSize
37.06 KB

Mmmh, just noticed that even my destop stuff seems a little bit off. Wasn't an issue before the update for sure.

update broke something

dddave’s picture

I am a bit baffled here. What files do I need to manipulate here to avoid headlines and bodies getting too far left out when watched in tablet-portrait mode? I am damn sure it was working fine before out of the box. Just tested with AT rc6 and Corolla rc1 but there the problem also exists. AT Panels let the content "wander" to the left.

I visited my site via mobile daily and never noticed this so I am still sure that was fine some time ago.

dddave’s picture

Ok forget #1. This was an issue with this individual node. But my overall question remains: Is there anything wrong with the gutter settings for panels? I could swear this was behaving fine some moons ago but now it seems there is something fishy happening. Or am I just too daft to understand this?

dddave’s picture

Title: After update to 3.0 the mobile design is a little bit off » AT Panels margins on mobile displays is bogus
Version: 7.x-3.0 » 7.x-3.1
Component: Mobile » Panels or Gpanels
/* Panel pages need negative margin equal to the gutter width applied to #content,
  this is taken care of in theme settings as per above for normal gutters */
#content .panel-display,
#content .panel-flexible {
  margin-left: -10px;
  margin-right: -10px;
}

This code stems from Corolla but similar code can be found in Sky, too. Guess this technique is just always by Jeff. As far as I can tell this is necessary to place the panel correctly inside .content-style div and works 100% fine in full page view. On mobile devices this seems to be unneeded because with a 0px margin the content is placed fine whereas the negative margins now place the content inelegantly touching/breaking the content-style border.

I have recreated this on a pretty vanilla dev install so I guess this is a general problem. My questions:
1) Have I done something wrong?
2)Is this something AT should/could handle?
3)If not: Let's document how to mitigate this problem.

Jeff Burnz’s picture

Project: AdaptiveTheme » Corolla
Version: 7.x-3.1 » 7.x-3.x-dev
Component: Panels or Gpanels » Design
Category: support » bug

Great issue title and I especially love your sites slogan :)

Yeah, I see the issue, I need to double check if this is a real problem in the generic subtheme but I can see the issue in Corolla, and Sky as well due to the design and how the margins react when the site is in one column.

Whats needed is an elegant way to handle these margins in that layout configuration, such as removing these negative margins off the panels and the additional .content-margin wrapper that corolla uses.

Every theme has compromises, and this is partly the cost of clean code (as in cleaner markup) and needing to fight with Drupal and its ability to output almost anything in the main content region, work with block module turned off and so on - its very hard to build something that requires zero tweaking.

dddave’s picture

So I guess for the moment I have to manually apply overrides to the responsive.xxx.css files?

djween’s picture

Issue summary: View changes

I know this is a really old issue but I have same problem with most recent install Corolla 7x 3.0 and Panels. Do I need to revise the CSS or is there a better way? Everything is on mobile these days.

ggevalt’s picture

Hi, I'm experiencing this issue as well. As I am also a member of the Adaptive Themes Club, I'll reach out to Jeff, but I'm wondering if there was a solution to this and if so has it been included in an update of the theme OR has someone figured out a CSS work around?

Any help would be appreciated as this seems to be the only thing wonky about this splendid theme.

g