Comment on Stallion Responsive WordPress SEO Theme by SEO Dave.

Stallion WordPress SEO Package Good question and should be relatively easy to achieve since all the responsive code is in one css file.

Best way to do this is via the Stallion Responsive Child Theme which all Stallion Responsive Theme users should install as a matter of course.

If you don’t have the child theme, download it from the main article, install and activate like any other theme after installing Stallion Responsive (that’s a parent theme).

From the main (parent) Stallion Responsive theme make a copy of the mobile.css file, on your server it will be under

/wp-content/themes/stallion-responsive/colors/mobile.css

Make a copy that after editing we’ll be uploading to:

/wp-content/themes/stallion-responsive-child/colors/mobile.css

The Stallion Responsive Child Theme is more advanced than a general WordPress Child Themes, your average child theme does NOT override ALL parent theme files, with Stallion almost all files can be over wrote simply by adding a copy to the equivalent location within the child theme folder as shown above.

When you upload the mobile.css file to the child theme folder, WordPress will only use the child theme version of mobile.css: means no editing the main parent theme. You should do this with any files you plan to modify, copy them to the child theme so the parent theme is never modified (makes your updates smoother).

Anyway, load your copied mobile.css file in a text editor and on line 9 you’ll find:

@media only screen and (max-width: 800px) {

This is the start of the CSS code for screens of 800px and less (is not used for screens 801px+), it ends on line 116 with }, next line is for screens smaller than 768px and if you scroll further you’ll find rules for other screen sizes (11 of them).

For example for a mobile device with a screen size of 360px the first 494 lines of CSS code in the mobile.css file is ignored because of the max-width settings.

What “@media only screen and (max-width: 800px) {” does is ALL screen sizes smaller than 800px use this CSS, so that CSS isn’t used for screens 801PX or larger. When you get to the next @media it tells the browser to use this CSS for screen sizes smaller than 768px and so on….

You will see some of the CSS rules are repeated with different settings, like you’ll find multiple instances of

#wrap_stallion {
width: 780px;
}

With a different width for each @media size, 800px is above and 768px below

#wrap_stallion {
width: 748px;
}

If you aren’t familiar with how CSS works when you have the same CSS rule with different settings the browser reads the CSS rules in order and the last CSS rule read is the one that’s used. But, because we have the max-width setting for screen sizes between 768px and 800px only the top 800px rules will be used, lines 117 onwards will be ignored.

Hopefully that’s enough info to understand how the mobile.css file works, it in effect over rides the CSS of the other Stallion CSS files (the Desktop PC screen size) when a screen is smaller than 800px, for screen 801px plus the entire mobile.css file does nothing.

To achieve what you want should be a simple case of deciding what size you want as your starting point as NOT Desktop (I set not Desktop at 800px) and delete everything above it.

Say you wanted screens with width above 720px to still load your sidebars you’d delete lines 9 through to 162.

That would delete CSS rules for 800px and 768px, those screen sizes would load the full Desktop version.

You might have realized from the above you could also add your own screen sizes, if you wanted a 900px screen size you could add one, I’d make a copy of the 800px CSS rules an modify them.

David Law