Dottoro Theme Documentation

Tutorial to get your theme to work

PrologueFirst StepsFront PageCreating a custom front pageBlog, News and Portfolio post typesPost Type specific settingsGeneral settingsSingle post settingsCategory / Tag / Date archive page settingsPermalink settingsOptions on single post pagesGeneral page optionsImage optionsGallery settingsPage Templates and PagesPage SettingsPage TemplatesPages created from page templatesGeneral page settingsGallery settingsBlog page settingsNews page settingsPortfolio and Imagefolio page settingsContact page settingsArchives page settingsAuthors page settingsBoomarks page settingsSitemap page settingsSpecial pagesCategory and tag page settingsArchive and date page settingsSearch page settingsAuthor page settings404 page settingsHeader and MenuSubheadersSubheader specific shortcodesPredefined SubheadersCreating SubheadersAssigning subheaders to pagesFooterWidgets in the FooterCopyright and other notices in the FooterSidebarWidgets on the SidebarWidth and alignment of the sidebarWidget AreasWidgetsBreadcrumbShortcodesShortcodes In Alphabetical OrderShortcodes By CategoriesNested ShortcodesPost TemplatesOverlaysMedia and External MediaOverview of galleries, gallery listings and slideshowsGalleries and Gallery ListingsAbout Galleries In GeneralCreating And Managing Galleries[gallery_list] shortcodeSlideshows and Popup SlideshowsSlideshowsPopup SlideshowsSlideshow SettingsMost Often Used Slideshow OptionsAll Slideshow OptionsSlideshow Templates - Slideshow Specific ShortcodesStyling Guide For SlideshowsStyling Of Slideshow and Post TemplatesSlidesPopupsSelectorsWeb FontsGeneral Theme SettingsUser RolesExport / Import SettingsCreating theme designsLocalizationHeadingsChild ThemesCSS ClassesResponsive DesignCSS Extension JavaScript ToolkitJavaScript LibraryAction HooksFilter HooksCompatibility Issues
<

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

Theme options for a responsive design

Create your own responsive design

The stylesheet of our demo child theme is well commented, so there is not much need to explain it line by line. But there are a few things that are worth mentioning: We hope that this guide will help you in creating your own responsive design. If you need further information, please do not hesitate to ask in our support forum.

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.