Responsive display problems on a iPhone

[ghost]

Hello,

There seems to be two problems in the iPhone view of the Portfolio template.

As soon as more than one module is published in a single position, it “breaks” the responsive design:

Is there something that could be done to make it also looks good on a smart phone?

The other problem is related to the “search” and “top-menu” module positions. They show perfectly on an iPad, but they don't show at all on an iPhone:

Is there a possible solution to get them back on the iPhone?

Here's my url: http://www.chronculture.com/

Thanks again.

[dziudek]

We will consider to address this issues in the next version of the template.

[ghost]

The “search” and “top-menu” modules aren't displayed at all on phones with screen smaller than 600px. The explanation lies on lines 2438 and following of the template.css file:

@media (max-width: 600px) {
  .header__search,
  .header__topmenu {
    display: none;
  }
}

Displaying the two modules would interfere with the logo. So one has to make some changes to how the logo is displayed before publishing the modules:

[ghost]

The responsive design problem can be addressed by modifying lines 2332 and following of the template.css file.

Add [after @media (max-width: 960px)]:

  div[data-mod-num="1"] .moduletable {
    width: 100%;
  }
  div[data-mod-num="2"] .moduletable,
  div[data-mod-num="3"] .moduletable {
    width: 50%;
  }

And change lines 2438 and following by adding [after @media (max-width: 600px)]:

  div[data-mod-num="1"] .moduletable,
  div[data-mod-num="2"] .moduletable,
  div[data-mod-num="3"] .moduletable {
    width: 100%;
  }

Here's the result BEFORE applying the changes:

And here's the result AFTER applying the changes: