Mobile skin issues and Mobile Kit Pro question

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
6/16/2013 1:03:13 PM
Gravatar
Total Posts 41

Mobile skin issues and Mobile Kit Pro question

Hi,

I need to create a mobile friendly version of a skin for a particular client.  I've run in to a couple of issues, the biggest of which is that I can't seem to get my mobile skin to stop rendering the left column!  I don't need the left column to appear on my mobile skin so as to allow the centre column to take up the full width of the screen.  On the 'desktop' skin the left column needs to render.  I've managed to get the left column to collapse with the following:-

.art-content-layout .art-sidebar1
{
  width: 0px;
  display:none;
}

However I get different behaviour depending on the platform.  In IE10 on Win 7 if I force use of my mobile skin all is well - the column collapses and any content is not shown.  However in Chrome and on a iPhone and Android phone I am finding that any content in the left column is rendered, and has the centre column content over the top of it.  See http://wwwtest.effectiveintelligence.com/home.aspx?Skin=EIMobile_2385.  I have tried various bits of css to hide the content at various levels, all to no avail.  So any clues here would be very helpful!

I have plenty of other issues with the content itself, a lot of which doesn't fit the mobile skin due to images that are too wide etc.  So I was thinking about using the Mobile Kit Pro.  What I need to know is how far I can tweak its skin.  I need to generate a layout that is basically as per the link above (and it is pretty simple).  I think I read that you need to use jQuery theme roller to alter the layout.  I have played with this and didn't get on all that well with it!  How much can I just tweak in css and html? If I can replicate my skin and gain all the other advantages of the Mobile Pro Kit then it is probably the way to go.

Thanks.

6/16/2013 4:14:54 PM
Gravatar
Total Posts 212
Community Expert

mojoPortal Hosting & Design @ i7MEDIA!

Re: Mobile skin issues and Mobile Kit Pro question

The problem with your CSS is that it is being overridden by this:


div.art-content-layout div.art-layout-cell,
div.art-content-layout div.art-layout-cell div.art-content-layout div.art-layout-cell {
    display: table-cell;
}

You can make your selector more specific like this:

.art-content-layout .artsidebar1.leftside {
        display: none;
}

Or you can just put !important after the one you already have. By the way, "width: 0px;" is meaningless to an element that is already display:none - display:none makes the element act like it isn't in the DOM at all, meaning it could have any width and height and would still not show up on the screen.

As for Mobile Kit Pro, it is very adaptable. You can do virtually anything with it that you could with any other skin, but it comes built with a jQuery UI built-in-theme. If you're looking for ease of use/customization then the jQuery UI themeroller is a good bet, but if you need something more specifically designed I suggest you just use the layout.master and theme.skin and relevant js files from the mobile kit skin, and then put in your own custom CSS files in to make it look how you like.

Also, if you have custom markup in your desktop skins layout.master you could duplicate it, edit it as needed to fit on mobile, and then just copy the mobile kit pro menu portal from the layout.master in that skin. This menu is a great solution for phones, so I suggest using it - you can style it to look pretty much however you want it. I've built a lot of different skins using this menu and it's pretty easy if you know CSS fairly well.

Good luck!
-Isaac



 

You must sign in to post in the forums. This thread is closed to new posts.