While it would be difficult to format RN in it's current state (v2.5) for mobile devices using responsive design alone, there are still viable applications for responsive layouts within your themes. I've become a big fan of fixed-width responsive layouts, which can help format your site for large displays. I've used this to a small degree with the current theme, expanding the 980px layout to 1200px if the visitor has a min-wdth of 1399px. The basic concept is fairly straight forward
At this point you just need to nest the desired CSS statements that need adjusting within your theme. They will take effect automatically, if the min-width is greater than 1399px.
Although you need to make sure to load this after any of the declarations you are overriding. This example would fail because declaring
is the same as saying "for any resolution" and is declared after the
declaration and would override it.
So now that you know where to load it, you can override anything your theme declared using this method. But wait! What about all of the CSS files that are loaded after your style.css file? How do you override those? Once again the objective will be to load the CSS as late in the load order as possible. The most practical solution at this time is to use a
file. The only CSS files which can possibly be loaded after that would be those loaded via
which is only used by a few modules.
So first, move your responsive CSS into a file of it's own and save it in the style directory of your theme.
Now let's create a
file. Since the
files are loaded alphanumerically, title your
file so that it will load last. For sake of argument let's save it as
. Your code might look something like this, make sure to replace
with your theme name, and adjust the path
to the actual location of your CSS file; that contains the responsive code.
and upload your newly created CSS file, and use should be ready to make responsive adjustments to your theme and almost all CSS declared afterward. At current
(the only CSS files which could be loaded after head-xxx.php files) is not used within the RN distro; but is used in some 3rd party addons, such as Highchart Statistics
So now you can feel free to get your feet wet with responsive design! One last note, be aware these methods will be changing (improving) for our next major release, RN 3.0; and will need to be adjusted when that day comes.
Stay tuned for a future post which will help you with the next hurdle you will likely face; balancing your content and filling available space as your layout expands. Enjoy!
You cannot post new topics in this forum You cannot reply to topics in this forum You cannot edit your posts in this forum You cannot delete your posts in this forum You cannot vote in polls in this forum You cannot attach files in this forum You cannot download files in this forum