Joomla Templates Club 406,261 posts

[rossm Friend rossmJoin date: December 2010Posts: 3Downloads:3Uploads:0]

#182066

Hi,

I need help with a front page grid problem in the mobile view.

Here is a link to the dev site:
http://www.treetopwebdesign.com/clients/armada/index.php
user: ja
pass: jaForum12

I am using Joomla 2.5.8, JA University 1.3, YT Widgetkit 1.3.1, PPC Simple Spotlight 2.7

I need to have a rotating banner that is 75% wide and a random image loader that is next to the banner that is 25% wide. I am currently accomplishing this with the responsive YT Widgetkit (rotating banner) and the non-responsive PPC Simple Spotlight (random image loader with links). I have created a custom HTML mod and am using the following code published in the user-5 position.

Mod:


<div class=" grid-2">{loadposition sliders}</div>
<div class=" grid-3">{loadposition spotlight}</div>

Template CSS:


. grid-2 {width:75%; float: left; display:inline;position: relative;margin: 0 5px;}
. grid-3 {width:20%; float: left; display:inline;position: relative;margin: 0 5px;}

This will allow the banner and image to be displayed in the 75%/ 25% configuration. However, when viewed in an iPad and iPhone the random image module gets cutoff and doesn’t display correctly.

I have tried many css grid % and px combinations and many widget kit combinations but can’t seem to get it right.

I can deal with the following solutions:

1. Both the banner & image are responsive to the display
2. When the display gets small the 25% image moves below the 75% banner image
3. When the display gets small the 25% image is not displayed

Any suggestions as to how I can keep the 75/25 layout and still have a good mobile display are greatly appreciated.

Thank you!

[HeR0 Friend HeR0Join date: August 2011Posts: 3626Downloads:0Uploads:61 Thanks: 33 Thanked: 588 times in 549 posts]

#472366

Hi Rossm,

That is javascript problem of YT Widgetkit . I have seen that it set height and width for elements incorrectly. You should get YT team help you or try to display 2 blocks = 100% to get your issue fixed.

Regards,

[rossm Friend rossmJoin date: December 2010Posts: 3Downloads:3Uploads:0]

#472438

Hi HeR0,

Thanks for your reply. The problem is that the User5 position (the top panel) is set up for a 25% grid. When I publish 2 mods it wants to make then each 50% width. I need to publish 2 mods and select a 75% and a %25. This would work if I was using the “Content Mass Top” (75%) and the Position 5 (25%) but they are already being used below.

Any other ideas? Is is possible to add in another ja-container easily?

[HeR0 Friend HeR0Join date: August 2011Posts: 3626Downloads:0Uploads:61 Thanks: 33 Thanked: 588 times in 549 posts]

#472868

Hi Rossm,

Please try to create 2 new positions in a spotlight as below

<block name="top-spotlight" type="spotlight" special="left" specialwidth="75">banner-1,banner-2</block>
Then create 2 custom modules assigning to banner-1 and banner-2 position.
User guide: http://wiki.joomlart.com/wiki/JA_T3_Framework_2/Guides#Custom_width

Regards,

[Author]

Posts