The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

CSS for mobile to make look better

View previous topic View next topic Go down

Solved CSS for mobile to make look better

Post by ian2000 on April 25th 2015, 11:17 pm

I read that there are ways to edit the CSS to optimize it for mobile.

This looks important:
Code:
#mpage-body

But I dont know how to use this. Could I have a pointer of how to use this to, for example, correctly scale my body width and height?

Right now it looks terrible!
Thanks,

ian2000
Forumember

Posts : 38
Reputation : 3
Language : English

http://onyxlegion.forumotion.net/

Back to top Go down

Solved Re: CSS for mobile to make look better

Post by Ange Tuteur on April 25th 2015, 11:30 pm

Well, when editing the mobile style, you definitely want an idea of how the DOM looks. Otherwise, you're pretty much flying blind by guessing classes, ids, and tagnames. I wrote a small tutorial explaining how you can emulate the mobile version on your browser, this way you can use the DOM inspector in the web console ( F12 ) to select elements from the page.

http://fmdesign.forumotion.com/t249-how-to-emulate-the-mobile-version


Anyway, #mpage-body is an ID used for the main wrapper. You can prefix this ID in your selector set to pretty much define an exclusive style rule for the mobile version. For example :
Code:
#mpage-body .post {
  color:#C33;
  background:#FCC;
}

That would change the posting background and text color ONLY on the mobile version.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: CSS for mobile to make look better

Post by ian2000 on April 25th 2015, 11:37 pm

Great this is very helpful. I don't know why, but when I view the desktop site on my phone it is very messed up but only if there is no account logged in. Once I log in (still on the desktop version on my phone) it looks normal, just not noble optimized. Any thoughts on why this could be?

ian2000
Forumember

Posts : 38
Reputation : 3
Language : English

http://onyxlegion.forumotion.net/

Back to top Go down

Solved Re: CSS for mobile to make look better

Post by Ange Tuteur on April 25th 2015, 11:44 pm

I noticed it redirects, other than that it looks normal. The font size is a bit small, but that can always be adjusted.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: CSS for mobile to make look better

Post by ian2000 on April 29th 2015, 8:10 am

Sorry for not getting back sooner. The display is a bit temperamental sometimes; it will either show the webpage in full or cut it into distorted pieces. Haven't really found a pattern yet.
Example:



Meanwhile, the pointers you gave on the mobile css are helpful.

one more css question: When I activate widgets, this happens....



where can I find the solution to make the widgets go on the outside of the main body instead on being inside it and then pushing everything out of the way?

ian2000
Forumember

Posts : 38
Reputation : 3
Language : English

http://onyxlegion.forumotion.net/

Back to top Go down

Solved Re: CSS for mobile to make look better

Post by Ange Tuteur on April 29th 2015, 8:40 am

I know when the screen gets smaller, content will shrink to fit the screen if set to a percent. That can sometimes cause things to looks a bit messy.

As for the moving the widgets around, you can play with margins or positioning on the main widget container. Here's some CSS for that :
Code:
#left {
  position:absolute;
  left:10px;
}

Change left to right if you're using the widgets on the right side.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: CSS for mobile to make look better

Post by ian2000 on April 29th 2015, 10:42 am

That fixed my problem for the most part. It still doesnt look super nice which is only because my body of my forum is so big so it cant really ever fit in the sidebar. I tried different things and eventually got it up in the corner of my forum. (It's the vote sites and IndieDB link)

Check it out hereOnyxLegion.gq

I think this topic is solved. Thank you so much again Ange Tuteur

ian2000
Forumember

Posts : 38
Reputation : 3
Language : English

http://onyxlegion.forumotion.net/

Back to top Go down

Solved Re: CSS for mobile to make look better

Post by Ange Tuteur on April 29th 2015, 10:20 pm

You're welcome ^^

Topic archived

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum