Answer:

Responsiveness or “Adaptive design” is a core design concept in our themes that allows them to dynamically resize to fit common screen-sizes. This design structure is responsible for re-arranging content, scaling down images, scaling up text and changing how some features behave in order to optimize their readability and usability on mobile devices. To learn more about responsive design and why it is used, visit Ethan Marcott’s flagship article here.

Responsiveness in a theme cannot be turned off or removed, as the adaptability is driven by percentages and other dynamic units within the theme’s main stylesheet, paired with specially built media queries, which tell the browser at which screen width to apply specific styles to an element.

Customizing the mobile view requires you to evaluate the existing styling of the element when viewed at the screen size you want to customize, then applying your custom CSS using the same media queries in the Custom CSS of the theme.

Learn more about Media Queries

Firefox comes with a Code Inspector with an amazing Responsive Design view to help you test in a variety of mobile screen sizes.

How to use Inspect Element to get CSS styles of an element in the browser

The media queries for your theme are found in the responsive.css document, which you can view locally or from Appearance > Editor, linked at bottom-right. Don’t edit this file, but copy the media query and any relevant styles into your Custom CSS field in theme options. Below is an example of how a media query for a standard hand-held smartphone looks:

 

/*------------------------------------------------*/
/* layouts smaller than 600px, iPhone and mobiles */
@media only screen
and (max-width : 600px){
.logo{float: none; width: 80%; height: auto;} }

 

Following is a media query template you can use which corresponds to the test views over at http://www.responsinator.com. Your Custom CSS goes between the green brackets of each query.

 

/* ==========================================================================
   Media Queries
   ========================================================================== */
/*------------------------------------------------*/
/* portrait layouts smaller than 600px, most mobiles */
 
@media only screen
and (max-width : 600px){
 
 
}
 
/*------------------------------------------------*/
/* general layouts smaller than 480px, iPhone and older mobiles */
@media only screen
and (min-width : 320px)
and (max-width : 480px){
 
}
 
/*------------------------------------------------*/
/* Androids and most newer phones, does not cover older iphone portrait views of 320px or smaller*/
@media only screen and (min-width : 384px) and (max-width : 600px) {
 
 
 
}
 
 
/*------------------------------------------------*/
/* General 480 and up */
/*------------------------------------------------*/
 
@media only screen and (min-width: 480px) {
 
 
 
}
 
 
/*------------------------------------------------*/
/* General 768 and up */
/*------------------------------------------------*/
@media only screen and (min-width: 768px) {
 
 
 
 
}
 
 
/*------------------------------------------------*/
/* Desktop resets */
/*------------------------------------------------*/
@media only screen and (min-width: 1140px) {
 
    .wrapper {
        width: 1000px; /* 10% for margins */
        margin: 0 auto;
    }
 
 
 
}