Meet Gavern - Tablet Display Issue

Hi everyone,

I'm working with the Meet Gavern template and have noticed an issue with the frontpage view of the quickstart installation when viewed horizontally on a Nexus 7 tablet.

The 'bootstrap' module in position mainbody (free joomla 3 template/gavern+bootstrap/responsive web design) displays with the 'responsive web design' section below the first two elements, instead of all three elements horizontally.

After checking the 'layouts' section of the template configuration and not finding any issue, I tried the official Gavick demo page for the Meet Gavern template on the tablet and the issue is there too.

I've tried changing the 'span4' parameters and tried using 'span3' in the custom output code, but having no joy. The 'span3' parameter bunches all three elements up tight and to the left. Are there ant changes I can apply to make this display correctly.

Thanks

Ian Walker

I've uploaded a screenshot

Hi

Unfortunately I do not have the same device as You and when I check on mine everythin is ok.

But You may try to add this code to tablet.css:

Code: Select all

.row-fluid .span4 {
    width: 30% !important;
}


Thanks for the reply,

There is no tablet.css in the css folder of Meet Gavern template folder, so added your code to overide.css. Nothing changed and overide.css is enabled. I added the code to custom css in template advanced settings and it works.

Is there a way of incorporating this into a css file rather than the custom css section of advanced settings, seems a bit messy to me?

Thanks for the help so far,

Ian

Hi

Try change the width value in line 1638 in template.css file. Which should resize this boxes and make it possible to fit on smaller tablets.

Code looks like this now:

Code: Select all

  #gk-top .row-fluid .span2,
  #gk-top .row-fluid .span4,
  #gk-bottom .row-fluid .span2,
  #gk-bottom .row-fluid .span4 {
    float: left;
    margin-top: 0 !important;
    width: 31.491712705%;
    *width: 31.4385212156383%;
  }


should be

Code: Select all

  #gk-top .row-fluid .span2,
  #gk-top .row-fluid .span4,
  #gk-bottom .row-fluid .span2,
  #gk-bottom .row-fluid .span4 {
    float: left;
    margin-top: 0 !important;
    width: 30%;
    *width: 30%;
  }


Thanks again for the reply,

That code change doesn't do anything, possibly because it's for the 'top' and 'bottom' module positions. Going back to the original code you suggested, it aligns the elements to the left slightly and adding 'float: center;' doesn't help.

Hit a dead end!

Hi

There is no float:center rule in css. My code was simply to resize this elements to 30% in width which works, because I see this part resized. I think in order to match to this device You need to resize it even more. Play with just this code:

Code: Select all

.row-fluid .span4 {
    width: 26.624%;
}


if this will make it not push is below than tell me the width of this device and I'll tell You what code to add than to have a permanent fix.