Mobile Site Problems

Nova includes a new and robust way of skinning the entire system without ever touching the core of the application. If you have questions about how to build a theme for Nova, how to modify a theme or you just want to show off your work, this is the place to do it!

Emily Fri May 15, 2015 7:19 pm

Mobile Site Problems

So, I've figured out how to configure the site to fit mobile platforms and I have all of the correct css for it, I'm just having trouble getting them to transition into each other. I tried...

@media screen and (max-width: 767px) {
CSS Coding
}

Is this the correct formatting to get it into a mobile device?
Image
User avatar

Posts: 69


AgentPhoenix Fri May 15, 2015 7:56 pm

Re: Mobile Site Problems

For the Help Center and the new forums, I'm using Bootstrap's guidelines. I create responsive.css stylesheet and call it after the main stylesheet so that all my stuff for mobile phones and tables and such is in one place. I'd encourage you to check out Bootstrap's documentation to see what the breakpoints are meant for.

Here's how my responsive stylesheet is set up...

Code: Select all
/* xs */
@media (max-width: 767px) {
}

/* sm */
@media (min-width: 768px) and (max-width: 991px) {
}

/* md */
@media (min-width: 992px) and (max-width: 1199px) {
}

/* lg */
@media (min-width: 1200px) {
}

You likely wouldn't have anything in the "lg" one because usually that'll all be taken care of in the main stylesheet. You could, however, do the reverse and start by coding for the smallest screen first and then make modifications to it as the resolution goes up. Really up to you.

It's also important to note that these are just what Bootstrap uses. You're free to use as many (or as few) breakpoints as you want to make sure it's reacting exactly like you want on different devices.
User avatar

Posts: 7576


Emily Fri May 15, 2015 8:59 pm

Re: Mobile Site Problems

Is there a particular way I should put it? For some reason it isn't working.
Image
User avatar

Posts: 69


AgentPhoenix Fri May 15, 2015 9:12 pm

Re: Mobile Site Problems

Try putting it into a responsive.css file and changing the color of some text first. Make sure you call the responsive stylesheet after the main stylesheet in your template though. There's nothing in particular that I do to make it work, just dump my code in there and go.
User avatar

Posts: 7576



Return to Skinning

Who is online

Users browsing this forum: No registered users and 4 guests