Dottoro Theme Documentation

Tutorial to get your theme to work

30. Responsive Design

Internet use via mobile devices and cell phones is growing every day. The goal of responsive design is to present content in a way that best suits the device the visitor is using. Technically it means flexible layout, flexible images, CSS media queries and some JavaScript. Media queries allow you to apply changes to your website design based on the size of your visitor's browser window. For instance, you could specify styles that take effect only when the browser window is narrower than a certain width.

Since Dottoro theme provides you a highly flexible environment (you can set the page width, thumbnail sizes, the number of columns in post lists, etc.), it is not possible to create a responsive stylesheet that contains all required styles and works on all sites created with the Dottoro theme. And due to the nature of CSS media queries, we believe that using them in a child theme provides much more freedom than hard-coding them in the stylesheet of the Dottoro theme.
We also use a child theme on our demo site to adapt the layout to the viewing environment. Our demo child theme and the next examples will give you a good starting point to create your own responsive design.

In addition, there are some items that require special handling. These are the menu and the slideshow. Dottoro theme from version 1.13 comes with additional options which help you in making the menu and and slideshow responsive.

First Steps

• If you are building a new website
  just download our demo site content and child theme and install them on your site.
  At the end of the process you will have a mobile friendly website. It is worth to read the whole section, because it covers all the thing you need to know when creating your own responsive design.
• If you already have a website, download our child theme.
  Then, if you don't use child theme yet:

  • install our child theme on your site

  otherwise:

  • unzip our child theme on your local drive
  • open the style.css file located in the unzipped 'dottoro_child' folder with a text editor
  • copy its content and paste it into the style.css file of your child theme

  You need to make some other changes, please continue reading.

Theme options for a responsive design

• Mobile devices resize websites to match the width of the display screen. This feature must be disabled for a responsive design. You can find a Responsive design option under Theme Settings » General » Document Header Settings. Please select this option to tell the browser to use the device width as the viewport width.
• There is an 'auto scale' option for every slideshow. If this option is enabled, the slideshow will be scaled down when there is not enough room for it.
• There is a compressed option under Theme Settings » Header » Navigation Settings. It allows you to select a menu for the compressed menu. The compressed menu is displayed instead of the normal menu on low resolution devices. Check out our demo site and resize your browser window to a small size, and you will see what compressed menu means.

Create your own responsive design

• If you take a look at the first media query:

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

  you can see that it takes effect only when the browser window is not wider than 980 pixels. The default design of the Dottoro theme sets the page width to 980 pixels, but you can change this in the Theme Editor. If you change this, you should also change the value in the media query.
• The first style rule in the first media query makes pages full width on your website.
  The next style rules (below the comment 'fixed width sidebar, fluid content') creates a flexible layout with fixed width (315px) sidebar and a flexible-width content. If your sidebar is not 315 pixels wide, you should modify these rules.
  Let's see how you can create a flexible layout with fluid sidebar and content. Just replace the lines:

  		/* fixed width (315px) sidebar, fluid content */
  	#content_wrapper {width:100% !Important;}
  	.left_sidebar #content_wrapper {margin-left:-315px !Important;}
  	.left_sidebar #content {margin-left:315px;}
  
  	.default_sidebar #content_wrapper {margin-right:-315px !Important;}
  	.default_sidebar #content {margin-right:315px;}
  
  	.right_sidebar #content_wrapper {margin-right:-315px !Important;}
  	.right_sidebar #content {margin-right:315px;}

  with these lines:

  		/* fluid sidebar, fluid content */
  	#sidebar_wrapper {width:32% !Important;}
  	#content_wrapper {width:68% !Important;}
  	.no_sidebar #content_wrapper {width:auto !Important;}

  in the style.css file of your child theme and you are done. In this case, please also remove these lines:

  		/* remove margins added above */
  	.left_sidebar #content_wrapper {margin-left:0px !Important;}
  	.left_sidebar #content {margin-left:0px;}
  	.default_sidebar #content_wrapper {margin-right:0px !Important;}
  	.default_sidebar #content {margin-right:0px;}
  	.right_sidebar #content_wrapper {margin-right:0px !Important;}
  	.right_sidebar #content {margin-right:0px;}

  from the second media query, because these lines are only required for the fixed width sidebar - fluid width content layout.
• There are only a few things left that are worth noting. One of them is the menu related media rules.
  Let's see the first one:

  @media only screen and (max-width: 810px) {
    #header {height:130px !Important;} /* original header height: 90px + menu height: 40px */
    #nav {left:0 !Important; right:0 !Important; bottom:0 !Important; top:auto !Important} /* full width menu at the bottom */
  }

  The default design of the Dottoro theme has a right aligned menu. The menu in the demo content is quite wide so when the viewport is narrower thn 810 pixels, it overlaps the site title.
  This media query increases the height of the header, moves the menu below the site title and description and changes it to full width. The pixel values in this media query are highly dependent on the height and layout of the header and also on the width and the alignment of the menu. For example, if the menu is full-width on your site, you don't need this media query. Or, if the menu is narrower on your site than in our demo, you should change the 810px value.
• The other menu related CSS rules apply to the compressed menu (read more on compressed menu).

  The first two rules:

  .compressed_menu #header {height:90px !Important;}
  .compressed_menu #nav {left:auto !Important; right:0 !Important; width:auto !Important;}

  set the header height back to 90 pixels and move the comressed menu to the right. If you want to place the compressed menu in a different position, you should change these rules.

  The next ones:

  @media only screen and (max-width: 310px) {
  	.compressed_menu #header {height:130px !Important;} /* original header height: 90px + menu height: 40px */
  	.compressed_menu #nav {right:37% !Important;} /* compressed menu position, right aligned because of the back button */
  }

  increase the height of the header and move the compressed menu to a bit left on small screen sizes to prevent the menu to overlap the site title.

  And the two last rules:

  .compressed_menu #nav .sub-menu li.folder > a .submenu_icon_after:after {content:'\f008' !Important;}
  .compressed_menu #nav .sub-menu li.folder:hover > a .submenu_icon_after:after {content:'\f008' !Important;}

  set submenu icons to the compressed menu. Submenu icons make multilevel compressed menus more usable. You might not need these rules if your menu design already uses submenu icons.
  Please note that the menu related media queries are designed for the "Standard" header. This is the default header in the Dottoro theme, but you can also create custom ones. If you are only using custom headers on your site and the Static Positions and Auto Height options are enabled for your custom headers, then you should remove these media queries from your style.css file.

• The last important thing is the media queries for multi-column layouts. There are two types of multi-column layout that need to be handled separately:
  • There are media queries for post lists. You can find them at the bottom of the stylesheet below the comment 'Post Lists - Grid Layout'. Dottoro theme adds several CSS classes to post, news and portfolio lists to help you in designing them (see CSS Classes For Post Lists for details). With the help of these CSS classes you can easily change 4-column layouts to 3-column layouts or even single-column layouts in certain screen sizes. The media queries in our demo stylesheet are ideal for page width of 980 pixels and sidebar width of 310 pixels. If the page or sidebar width is different from these values on your site, you should change the pixel values in the media queries.
  • The last media queries are for custom multi-column layouts. These are the multi-column widget areas and the multi-column layouts created with the [row] and [col] shortcodes. You can find them below the comment "Custom multi-column layouts".
    As you can see, the first two media queries change the layout of the footer. When the browser window is less than 690 pixels wide, the layout is switched to 2-column. When the browser window is less than 485 pixels wide, the layout is switched to single-column.
    The last media queries below them are for multi-column layouts created with the [row] and [col] shortcodes. The "col1_below_510", "col1_below_530", etc. CSS classes mean that change the layout to a single column layout when the view is less then 510, 530, etc. pixels wide. These classes are added to the [row] shortcodes on the home pages to make them responsive.

Important Changes in version 1.37

Some things have changed in the responsive design of our demo site. We recommend you to make the same changes in the style.css file of your child theme to make your site more mobile friendly.

• Responsive sidebars

  What has changed?

  Prior to version 1.37, the sidebar was hidden when the browser window was less than 768 pixels wide. From version 1.37, the sidebar is moved below the content instead of being hidden.

  Why the change was needed?

  The content of the sidebar is an important part of the overall content strategy. There is no reason to be hidden on small screen sizes.

  What changes should I make in my website?

  Replace the lines

  #content_wrapper {width:100% !Important;}
  #sidebar_wrapper {display:none !Important;}

  with these lines

  #content_wrapper {width:100% !Important; float: none !Important;}
  #sidebar_wrapper {width:100% !Important; float: none !Important;}

  in the style.css file of your child theme. There are located in the media query "@media only screen and (max-width: 767px)".
  
  The whole media query should look like this:

  @media only screen and (max-width: 767px) {
  		/* move the sidebar below the content */
  	#content_wrapper {width:100% !Important; float: none !Important;}
  	#sidebar_wrapper {width:100% !Important; float: none !Important;}
  
  		/* remove margins added above */
  	.left_sidebar #content_wrapper {margin-left:0px !Important;}
  	.left_sidebar #content {margin-left:0px;}
  	.default_sidebar #content_wrapper {margin-right:0px !Important;}
  	.default_sidebar #content {margin-right:0px;}
  	.right_sidebar #content_wrapper {margin-right:0px !Important;}
  	.right_sidebar #content {margin-right:0px;}
  }

• Multi-column layouts

  What has changed?

  Prior to version 1.37, all multi-column layouts (except the post lists) were changed to one-column layouts when the browser window was less than 768 pixels wide. From version 1.37, each multi-column layout is handled individually.

  Why the change was needed?

  It depends on the number of columns and content of a multi-column layout as to what screen sizes the layout should be changed to a one-column layout. For instance, if the footer has a 4-column layout, it should be changed to a 2-column layout on small screens and should only be changed to a one-column layout if the browser window is too small for two columns. Furthermore, it most cases a 2-column layout containing large images should be changed to a one-column layout on larger screens than a 2-column layout containing text. Finally, there are cases when the contents of columns don't allow the columns to go below a certain width. Therefore the browser will automatically place them one below the other on small screen sizes. In this case, you don't need any CSS media query at all.

  What changes should I make in my website?

  Remove the following lines from the style.css file of your child theme:

  .no_sidebar .col, #footer .col, #subheader .col, #header .col {
  	width:100% !Important;
  }
  .no_sidebar .row > .col {margin-top:10px;}
  .no_sidebar .row > .col:first-child {margin-top:0;}

  They are located in the media query "@media only screen and (max-width: 767px)" below the comment "change multi-column layouts to single-column layouts".
  
  Also remove these lines from the style.css file of your child theme (this is the next media query in the file):

  /* small screen sizes, no multi-column layout at all */
  @media only screen and (max-width: 479px) {
  		/* change multi-column layouts to single-column layouts
  		   and add some margin to elements that go below each other */
  	.col {
  		width:100% !Important;
  	}
  	.row > .col {margin-top:10px;}
  	.row > .col:first-child {margin-top:0;}
  }

  Now, you have to add some media queries to your style.css file. For instance, we use these media queries for the footer in the demo child theme:

  /* change the 4-column layout to 2-column layout in the footer */
  @media only screen and (max-width: 690px) {
  	#footer .col4 {
  		width:50% !Important;
  	}
  }
  
  /* change the 4-column layout to single-column layout in the footer */
  @media only screen and (max-width: 485px) {
  	#footer .col4 {
  		width:100% !Important;
  	}
  }

  As you can see, when the browser window is less than 690 pixels wide, the layout is switched to 2-column and when the browser window is less than 485 pixels wide, the layout is switched to single-column. If you have a 4-column layout in the footer, just copy and paste these media queries into your style.css file and modify the 690 and 485 values based on your needs. And for instance, if you have a 2-column footer, then you don't need the first media query only the second one.

  The next thing you should check is the multi-column layouts in the content. You don't need to care about the post lists (Blog, News and Portfolio pages, category, tag and date archive pages). They have their own media queries that have not been modified. You should only check the multi-column layouts created with the [row] and [col] shortcodes.
  For instance, of you have a 2-column layout like this:

  [row]
  	[col2]Some content in the first column[/col2]
  	[col2]Some content in the second column[/col2]
  [/row]

  and you want to change it to a one-column layout when the browser window is less than 500 pixels wide, then add a CSS class to the row (e.g. col1_below_500):

  [row class="col1_below_500"]
  	[col2]Some content in the first column[/col2]
  	[col2]Some content in the second column[/col2]
  [/row]

  and add this media query to your style.css file:

  @media only screen and (max-width: 500px) {
  	.col1_below_500 > .col {
  		width:100% !Important;
  	}
  		/* add some vertical space between the columns that are now rows */
  	.row.col1_below_500 > .col {margin-top:30px;}
  	.row.col1_below_500 > .col:first-child {margin-top:0;}
  }

  Similarly, if you have another 2-column layout that you want to change to a one-column layout when the browser window is less than 750 pixels wide, add a CSS class to it:

  [row class="col1_below_750"]
  	[col2]Some content in the first column[/col2]
  	[col2]Some content in the second column[/col2]
  [/row]

  and add this media query to your style.css file:

  @media only screen and (max-width: 750px) {
  	.col1_below_750 > .col {
  		width:100% !Important;
  	}
  		/* add some vertical space between the columns that are now rows */
  	.row.col1_below_750 > .col {margin-top:30px;}
  	.row.col1_below_750 > .col:first-child {margin-top:0;}
  }

  It's that simple. And of course, if you have another 2-columns layout that you want to change to a one-column layout when the browser window is less than 500 pixels wide, you don't need to add the "col1_below_500" media query to your style.css file again. Just add the col1_below_500 class to the row ([row class="col1_below_500"]) and you are done. So in other words, you will need some media queries like these

  @media only screen and (max-width: 500px) {
  	.col1_below_500 > .col {
  		width:100% !Important;
  	}
  		/* add some vertical space between the columns that are now rows */
  	.row.col1_below_500 > .col {margin-top:30px;}
  	.row.col1_below_500 > .col:first-child {margin-top:0;}
  }
  @media only screen and (max-width: 750px) {
  	.col1_below_750 > .col {
  		width:100% !Important;
  	}
  		/* add some vertical space between the columns that are now rows */
  	.row.col1_below_750 > .col {margin-top:30px;}
  	.row.col1_below_750 > .col:first-child {margin-top:0;}
  }

  in your style.css file and you should add one of the col1_below_500, col1_below_750, etc. classes to each of your multi-column layouts.

  We hope that this guide will help you make the necessary changes. If you need any further information, please do not hesitate to ask in our support forum.