Mobile Skin disregarding paragraph tag

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.

4/10/2012 8:25:02 AM

Sanchin Boy

Total Posts 2

View Posts

Mobile Skin disregarding paragraph tag

I recently started using the mobile skin on our website. Love the look and feel of the skin but ran into an issue with paragraph tags that I'm not able to resolve. Hopefully, someone can lend some insight into what is going on and how to resolve the issue.

When viewing my website, www.aperion.com, from a mobile device (tested with Samsung Flash & Focus S and HTC Android) my paragraphs all run together.

I tried adding margins and padding in the style.css file for mobile skin but there was no obvious changes even when they were set to 50px or 50em.

Further testing showed that for some reason the paragraph tag was completely ignored when viewing on a mobile device but inserting <br /> would work just fine.

I have several sites running under Mojo and would rather not have to manually change every paragraph tag to make it work. Is there a simpler solution? Did I overlook something in the CSS files that I need to change?

4/10/2012 12:03:07 PM

Jamie E

Total Posts 1203

View Posts

Help support mojoPortal!
Add-on modules

Re: Mobile Skin disregarding paragraph tag

Hi, we had this problem too. You can add this CSS to fix it. Joe, you may want to deliver this or something similar with the next version of Mobile Kit Pro.

body p { margin: 12px 0; }

When you've changed the CSS, in order to reset the skin cache, you may need to copy the mobilekit_v1 skin directory to a new name, then select that new name as the mobile skin in site settings. I believe the Design Tools reset skin cache button only changes the site's main skin GUID. I guess a modification so it would also change the mobile skin's GUID (if applicable) would be a feature request.

Jamie

4/10/2012 12:08:20 PM

Joe Audette

Total Posts 18439

View Posts

Re: Mobile Skin disregarding paragraph tag

Hi,

You'll need to take into account that the browser is caching the css, you can make sure it loads the latest css by going to Administration > Advanced Tools > Design Tools > Cache Tool and click the button to reset the skin guid, then refresh the page on the device. Do this after every css change.

The other thing I recommend is get the Firefox user agent switcher plugin and test using Firefox with iphone3 as the user agent, that way you can also use Firebug to find out which css rules are affecting paragraphs.

Hope that helps,

Joe

4/13/2012 12:19:32 PM

Sanchin Boy

Total Posts 2

View Posts

Re: Mobile Skin disregarding paragraph tag

Thanks Joe and Jamie for your quick replies.

Joe - Since I don't have access to an iPhone to test with I set my desktop skin to the mobile skin and used Firebug to see what CSS rules were affecting my paragraphs. Below is the results from Firebug:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {

background: none repeat scroll 0 0 transparent;

border: 0 none;

font-size: 100%;

margin: 0;

outline: 0 none;

padding: 0;

vertical-align: baseline;

}

As you can see margin and padding are both set to 0. As Jamie suggested I need to add some margins into my skin.

Jamie - Thanks for the input. Not sure why you put Body before your paragraph tag as it works fine if you input:

p, ul, ol { line-height:1.4em; margin: 25px 0px;}

Since I used Visual Studio 2010 to test my CSS I had copied my paragraph rule from there. This caused failure on the Mojo site because it was not in the correct syntax.

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