Skin issue when browsed from smartphones

Hi

So I'm working on this new skin. It all looks nice and organized when I use my Laptop to view it. However, when I use my smartphone it all looks out of place, half the things doesn't appear the way they should do.

Is there a way to have the way a forum theme is displayed to be exactly as it does when browsed from a computer?

Hi @Anzo,

Unfortunately this comes down to the capabilities of the device and its browser. Most things will render different on mobile than they do on desktop since they have less space to display the website. The only thing you could do is use Media Queries to adjust the content for smaller devices.

I have no experience with media query and lack time to learn about it.

Is it OK if i just post here when I'm done with the skin and then point out the areas/CSS that needs to have media query applied on?

It's actually pretty easy. If you want to simplify it you can go by screen width only.

For example, the following styles will take affect if the screen width is at or below 320px.

Code:

@media (max-width:320px) {
  body {
    background:red;
  }
}

You just place your mobile rules inside the media query rule.

Alright, I'll give it a shot and come back to you