Joomla Templates Club 406,261 posts

[mrscolumbo Friend mrscolumboJoin date: May 2008Posts: 25Downloads:11Uploads:4 Thanks: 11 Thanked: 2 times in 1 posts]

#205310

Hi,

I’m quite into JA_Zite. I adapted it for a customer and went through all the moves to get it done on mobile devices.

There’s two things I’d like to fix with your help, dear Sirs:

1.

I can’t seem to get the images on the “Our Services”-module in the demo right. I use three of them on my customer’s site. On a tablet there’s only room for two of them in a row, the third is kicked into the next row but floats left. Looks awkward.

Is there a way to center the whole <ul> for these buttons so a single button floats center?

The URL of the dev version is http://www.mrscolumbo.com/gg

You can “simulate” the tablet by resizing the browser window and narrowing it down ’til on the homepage (“home”) theres only two of the yellow circles in a row and the third in the next row.

2.

On a friend’s Samsung Note 3 (or something) there this phenomenon: He checks out the site in portrait mode. The menu is collapsed as it should. Now when he taps the Logo again (thus reloading the page) there’s a fragment of the expanded main menu right in the middle of the screen. The collapsing/expanding functionality of the menu is still there, only the “fragment” remains. Anybody else notice that? I can reproduce it on my desktop PC by resizing the browser window and continually narrowing it down until the normal menu converts to the mobile collapsed version – suddenly the expanded menu pops up – but of course vanishes shortly afterwards.

If you know what I mean and I’m sure you do 🙂

Please help 🙂

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#566094

Some my explaination below will help you do it.

+ The icons in Our Service module are defined from templates/ja_zite/css/template.css file with scipt


ul.cms .has-icon.icon1 {
background-image: url(../images/joomla.png);
}

ul.cms .has-icon.icon1:hover,
ul.cms .has-icon.icon1:focus,
ul.cms .has-icon.icon1:active {
background-image: url(../images/joomla-hover.png);
}

ul.cms .has-icon.icon2 {
background-image: url(../images/joomla.png);
}

ul.cms .has-icon.icon2:hover,
ul.cms .has-icon.icon2:focus,
ul.cms .has-icon.icon2:active {
background-image: url(../images/joomla-hover.png);
}

ul.cms .has-icon.icon3 {
background-image: url(../images/drupal.png);
}

ul.cms .has-icon.icon3:hover,
ul.cms .has-icon.icon3:focus,
ul.cms .has-icon.icon3:active {
background-image: url(../images/joomla-hover.png);
}

ul.cms .has-icon.icon4 {
background-image: url(../images/wordpress.png);
}

ul.cms .has-icon.icon4:hover,
ul.cms .has-icon.icon4:focus,
ul.cms .has-icon.icon4:active {
background-image: url(../images/wordpress-hover.png);
}


and you can change each image in circle to other. But I see on your site a image is set for all circles

+ You know, JA Zite is responsive and layout width layout will be auto scaled with dimension layout from 3 icons to 2 icons and a icon in row, that’s why you see 2 icons in first row and a icons in next row in tablet device or portrait mode

Open templates/ja_zite/css/layout-mobile-port.css and templates/ja_zite/css/layout-mobile.css files, you will find and see the css style to scale the dimension on tablet layout and or portrait mode


ul.cms {
width: 85% !important;
}

ul.cms li {
width: 50% !important;
margin-bottom: 20px !important;
}


and


ul.cms {
width: 85% !important;
}

ul.cms li {
width: 100% !important;
}

[mrscolumbo Friend mrscolumboJoin date: May 2008Posts: 25Downloads:11Uploads:4 Thanks: 11 Thanked: 2 times in 1 posts]

#566505

Hi,

Thanks for the answer, mate. Yeah, I already changed the background images for the icons. What I menat was: How can I center those icons, so that when theres 2 in a row and 1 in the next, the single icon is centered and not aligned left as it is just now 🙂

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#566529

I’m afraid you won’t able to do that because the css style float: left; in ul tags, see the screenshot

---

Attachments:

1. 

1 user says Thank You to Ninja Lead for this useful post

1. mrscolumbo

[Author]

Posts