Support ForumMobile Optimization not working properly – Support Forum

Mobile Optimization not working properly

optimark — Tue, 07 Jan 2014 22:35:54 +0000

Hi there, I am having issues with my sites mobile optimization. The design looks good on a laptop or desktop but all the text and images are misaligned on a mobile device or tablet. I tried iPhone 4, Samsung 4s and iPad. The same thing also happens when I look at the Nalleto demo you provide online. Can you please advise ASAP? I am up against a deadline.

Thanks!!

Reply To: Mobile Optimization not working properly

IshYoBoy — Wed, 08 Jan 2014 11:38:51 +0000

Hey,

You could use child theme.css and apply word-break: break-all; to all “h1, h2, h3, h4, h5, h6, p, .h1, .h2, .h3, .h4, .h5, .h6” to fix this.

A second option would be to create media queries in your CSS and decrease the font-size of each headline in the mobile version based on the screen size.

Hope this helps. Feel free to get back to us.
Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Reply To: Mobile Optimization not working properly

IshYoBoy — Wed, 08 Jan 2014 12:45:59 +0000

Hey, try adding the following code to the “Custom CSS” field under Theme Options -> General Options tab:

h1, h2, h3, h4, h5, h6, p, .h1, .h2, .h3, .h4, .h5, .h6{
	word-break: break-all;
}

h1, h2, h3, h4, h5, h6, p, .h1, .h2, .h3, .h4, .h5, .h6{

word-break: break-all;

}

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Reply To: Mobile Optimization not working properly

optimark — Wed, 08 Jan 2014 13:10:23 +0000

Thanks for providing the code. Unfortunatly that did not help the situation. can you please take a look at the site on a mobile device? It shows differently on android than iphone / ipad much worse on android

https://69.195.124.134/~optimark/

Thanks,

David

Reply To: Mobile Optimization not working properly

IshYoBoy — Wed, 08 Jan 2014 14:22:29 +0000

Hey,

First of all you have something that is breaking the footer.. Meaning it’s not staying within the main content width.. There must be some element/plugin which does not nest the HTML correctly, if this is not on purpose.

Secondly.. There is a lot of custom styles in the elements E.g. “padding-left: 450px;” which remains in the content and on mobile devices breaks it..

You should double-check if the custom code (in style=”…” attribute) is really necessary. We rather suggest using css_class=”something” and then adding the CSS through the Custom CSS. In this way you could use media queries an target mobile devices as well.

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Reply To: Mobile Optimization not working properly

optimark — Wed, 08 Jan 2014 17:22:10 +0000

Regarding the Breaking footer…it only occours on the home page on mobile devices. I removed all widgets and legal footer and this still happens. Please advise?

Thanks

Reply To: Mobile Optimization not working properly

IshYoBoy — Wed, 08 Jan 2014 18:18:38 +0000

Hey,

try to remove all the content and add it, part by part to see which part breaks it :) You might have missing closing shortcode, etc.. Try to identify and make it narrower and narrower until you find the exact piece.

Also make sure to check all changes in the php files if any were made.

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Reply To: Mobile Optimization not working properly

IshYoBoy — Wed, 08 Jan 2014 18:20:03 +0000

Maybe this could help:

https://validator.w3.org/

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Reply To: Mobile Optimization not working properly

BurnArt — Mon, 01 Dec 2014 17:49:21 +0000

In the thread above, you said this:
“A second option would be to create media queries in your CSS and decrease the font-size of each headline in the mobile version based on the screen size.”

I need to shrink the size of my h1 and h2 text on mobile devices. Could you please show an example of how to do that with a media query?

Thanks in advance!

Reply To: Mobile Optimization not working properly

IshYoBoy — Tue, 02 Dec 2014 08:22:33 +0000

Hey there,

sure thing, just use this short snippet and paste it into “Theme Options -> General options -> Custom CSS” field:

@media all and (max-width: 480px) {
    h1, .h1 {
        font-size: 20px !important;
    }
    h2, .h2 {
        font-size: 16px !important;
    }
}

@media all and (max-width: 480px) {

h1, .h1 {

font-size: 20px !important;

}

h2, .h2 {

font-size: 16px !important;

}

You just need to change max-width “480px” to the width that fits you (240px, 320px, …) and then adjust the font-size. It will do the trick ;)

Hope it helps
Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market