Mobile customizing

Aviram

Hey, after customizing my site some functions have broke on mobile view. I was wondering how I can emulate a mobile view. I tried one of the "mobile emulator" sites but they display the desktop version of the site..

Anyone has an idea how to accomplish it? and any tips for customizing mobile view are welcome!

peregrine

for firefox...

http://vanillaforums.org/discussion/comment/171197/#Comment_171197

http://vanillaforums.org/discussion/comment/171199/#Comment_171199

peregrine

for firefox...

good emulators:

http://vanillaforums.org/discussion/comment/171197/#Comment_171197

http://vanillaforums.org/discussion/comment/171199/#Comment_171199

check for isMobile

also for plugins to make them mobile friendly:

http://vanillaforums.org/discussion/comment/196078/#Comment_196078

locale and mobile:

http://vanillaforums.org/discussion/25641/how-to-tutorial-theme-specific-definitions-mobile-vs-non-mobile

see vrijvlinders themes for mobile e.g.

http://vanillaforums.org/addon/yellowmobile-theme

http://vanillaforums.org/addon/mobile-theme

and search for "mobile" on the forum lots of discussions.

vanillaforums.org/search?&search=mobile

Aviram

Hey @peregrine , Thanks for the help

I managed to fix some of my issues and also getting my plugin to work on mobile thanks to your post.

But there's one issue that still happens and there's horiziontal scroll , when I emulate mobile view from my PC it doesn't happen but on my Android it does. I found out it disappears if I make direction:ltr but that's not a solution as the site's language is Hebrew P:

If anyone could take a look on my site and maybe find what's wrong.. cog.co.il

vrijvlinder

Does this also happen on iPhone?

You can try to change this in the custom.css of mobile theme

from this

#Body {
padding: 3px;
position: relative;
width:auto;
clear: right;
}

to this

#Body {
padding: 3px;
position: relative;
width:100%;
clear: right;
overflow-x:hidden;
}

Aviram

@vrijvlinder , nope it doesn't help Thanks anyway P:

UnderDog

So it does or does not happen on the iPhone? Are you sure it takes the mobile theme and not the normal theme? That site you referred to... the forum is not embedded in some way, is it? My hebrew is a bit ... rusty.

Aviram

@UnderDog , hehe sorry for vague reply. I'm not sure if it happens on iPhone but on Galaxy S3 on all browsers it happens.

and yes I'm sure it takes the mobile theme and not the normal theme, and it's not embedded in some way

UnderDog

Try playing with these 3 settings:

width:100%;
clear: right;
overflow-x:hidden;

My guess will be that it's clear: right; or clear: left; but let V-Doc or P-Doc give the final verdict on that one.

vrijvlinder

I don't have a gallaxy to test on I use the user agent browser extension , but it does not show. It does not happen on iPhone.

It can also be possible that you may need to adjust other elements inside the #Body with percentages.

check that all the widths are 100% . Clear property is ok as far as I see

http://www.w3schools.com/cssref/pr_class_clear.asp

http://www.w3schools.com/cssref/css3_pr_overflow-x.asp

Does this same happen with other themes?

You can try adding

min-width

max-width

width is set to 100% to always touch the edge of the window