As of 28th May 2016, only the most current version of Aarcade themes will receive personal support and updates – read more…

  Back to Top

How do I edit my mobile layout CSS?

Filed in Advanced Customisation

Note that advanced customisation support articles are provided as a courtesy to Aarcade and Big Cartel users. Aarcade does not provide support for advanced customisation. Please read the following related articles:

We do not include mobile layout CSS editing in our standard theme files as our intention is to create a universal mobile layout with a sharp focus on usability. Editing the CSS for this layout without proper testing across mobile devices can easily lead to usability issues for some mobile device users.

If you wish to venture into advanced customisation of your theme, then your mobile layout CSS can be modified via override styles – see How do I create custom override styles? – just like any of your theme CSS.

Not only is it important to understand override styles, but you must also understand how @media queries are used to apply styles to your theme, depending upon the user’s web browser screen size, as follows:

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

/* = = = Styles for screen sizes less than 1000px wide
go here - e.g. applies to an iPad in portrait orientation. */


}


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

/* = = = Styles for screen sizes less than 750px wide
go here - e.g. applies to an iPhone in landscape orientation. */


}


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

/* = = = Styles for screen sizes less than 450px wide
go here - e.g. applies to an iPhone in portrait orientation. */


}

Copying all of the above code into your custom style coding area, and then entering override styles into the correct @media query, will allow you to successfully edit your mobile layout CSS.

Related articles...