Module blocks don't expand at the same time as the columns.

1. On the Music Free demo on your site, when I reduce the page width (excluding scroll bars) down to 799 pixels, the template changes from Desktop to Tablet mode, with the column grid expanding to fit 2 columns within that page width, but the module blocks do not expand to fill those columns until the page width is reduced to 785 pixels, at which point the window port (including scroll bars) is 800 pixels wide. So there's about a 14-pixel range where the module blocks occupy about the left two thirds of their respective columns. The behavior is similar with the transition from Tablet to Mobile mode. I might be off by a pixel but the behavior is the same in Chrome and Firefox, except that I think Chrome adds a white 1-pixel column on either side of the page. I get the same behavior on my own Music Free site.

That 14 pixels is at least pretty close to the width of the scroll bars, so it looks a lot like one part of the template is applying the data-tablet-width to the port width, including scroll bars, where another part of the template is applying that to the page width, excluding scroll bars. Where would I fix that?

2. I'd settle for fixing that, but what I'd really like to do is in the Desktop template mode to have the last 3 columns narrow with the window until the Tablet mode can kick in with 2 columns, initially at standard width, which will get narrower from there. So, I have a standard column grid 240 pixels wide, with double-width main content. Once the last remaining three columns -- at 240 pixel column width -- occupy the full width of the page in Desktop mode, I'd really like the column grid to then narrow along with the window to keep those 3 columns filling the width of the page, until the columns are about 160 pixels wide, beyond which the Tablet mode would kick in, with 2 columns initially 240 pixels wide and then narrowing until at some point the Mobile mode kicks in.

I don't mind hard-coding the page width at which the Template mode starts, but how would I make the three-column format shrink like that? Would that require an additional template mode, or could that be incorporated into the Desktop mode?

Hi

I'm afraid I do not understand 100%. I've checked template in the sizes You have mentioned and it works fine (at least I think). Please check my screens. Width of the browser is in the top right corner. Please try to explain this issue with some visualisations, so I will know what to look for.

Sorry I didn't catch your reply before now.

Here's what I get, showing the full width of the window:

I couldn't get attachments to work, hence the in-line images.

Hi

Ok. I was checking wrong widths. Please try add this code to fix it to override.css file, remamber to allow using this file in template settings:

Code: Select all

@media only screen and (min-width:801px) and (max-width: 815px) {

#gkTop .box.half, #gkBottom .box.half, #gkPage .box.half, #gkTop .box.one, #gkBottom .box.one, #gkPage .box.one, #gkTop > .box, #gkBottom > .box, #gkPage > .box, #gkTop .box.double, #gkBottom .box.double, #gkPage .box.double, #gkTop .box.triple, #gkBottom .box.triple, #gkPage .box.triple, #gkTop .box.fourfold, #gkBottom .box.fourfold, #gkPage .box.fourfold, #gkTop .box.full, #gkBottom .box.full, #gkPage .box.full {
    width: 50% !important;
}

#gkPage > #gkContent, #gkPage {
    width: 100% !important;
}

}