Strategy discussion - how to make Danland mobile responsive

Ditto. Just starting to look into this myself...

The best approach would probably be to add an additional style sheet with media queries that resizes the columns based on device width. Danland is a beautiful theme, and making the layout responsive is probably not going to be a lot of work on top what's already done.

That said, there's no guarantee that whatever content is placed into this beautiful, newly responsive layout will also be responsive. Each site owner may need to add their own customizations to handle the changes in resizing/floating of images, and the like.

I still think adding a single additional style sheet will give everyone a leg up on making the site responsive, and if the maintainer isn't interested in supporting that functionality out-of-the box, we could add a single checkbox that would allow the style sheet to be included / excluded per site.

In order to get enough traction for such a relatively big change, I guess it should be aligned with whatever becomes the strategy for the D8 version.

I have added a comment to the D8 release discussion here:

#2377827: Drupal 8 Version Planned?

"Could this issue be a good place to discuss strategy such as whether it would be a good idea to base the theme on for example AdaptiveTheme theme base, or a design variant of for example PixtureReloaded or Mix_and_Match themes?

From my perspective, Danland has the following advantages, but that is only if it adds to other mobile-friendly features etc.:"

Hi, I modified my template Danland to be responsive

I made the following changes:

1- In page.tpl.php and page-front.tpl.php
I added the following meta code after the tag

<meta name = viewport content = "width = device-width, initial-scale = 1">

This is to tell the mobile devices that do not modify the content and use their actual width.

2- In the stylesheet local.css I added at the end the necessary code to display responsive content according to the window width:
The css code is adapted to my needs, but you can play with the values to fit yours.

/* =Responsive Structure
----------------------------------------------- */
/* Smaller than standard 960 (devices and browsers) */

@media screen and (max-width: 960px) {
  /*  ipad */
  #preface-wrapper, #wrapper, #bottom-wrapper, #footer, #footer-wrapper, #header, #menu, #bottom-teaser, .slideshow-inner, #slideshow-bottom, .slideshow  {
    width: 708px;
  }
  /* Simplify the basic layout */
  #wrapper #content {
    margin: 0;
    width: 100%;
	background-color: #fff;
  }
  #wrapper #sidebar-right {
    float: none;
    margin: 0;
    width: auto;
  }
  #header-wrapper #search-box {
	display: none;
  }
  #slideshow-wrapper {
	display: none;
  }
  #authorize {
	display: none;
  }
  /* Menu */
  #menu {
    padding: 14px 0;
	background: none;
	height: auto;
	}
  #superfish .menu a, #superfish .menu a:visited{
	color: #163763;
	background: #FFF;
    font-size: 105%;
	}
  #rounded-menu-left, #rounded-menu-right{
  display: none;
  }
  #superfish{
	float: none;
	height: auto;
  }  
  a > .sf-sub-indicator{
	display: none;
  }
  #superfish .menu li{
      text-align: left;
  }  
  iframe {
	display: none;
  }
  body, input, textarea {
    font-size: 110%;
  }
  #header-middle .logo-name {
    font-size: 110%;
    line-height: 20px;
	padding-left: 5px;
  }
  #header-middle .logo-text {
    font-size: 105%;
    line-height: 25px;
	padding-left: 5px;
  }
  #sidebar-side-1 #sidebar-right
  {
    font-size: 105%;
  }  
  #block-menu-secondary-links ul.menu li a
  {
	font-size: 105%;
	line-height: 105%;
  }
  #subnav-wrapper ul li, #subnav-wrapper ul li a
  {
	font-size: 105%;
	line-height: 105%;
  }
  #footer-wrapper #subnav-wrapper {
	background: none;
  }
}
  
@media screen and (max-width: 767px) {
  /*  small tablet */
  #preface-wrapper, #wrapper, #bottom-wrapper, #footer, #footer-wrapper, #header, #menu, #bottom-teaser, .slideshow-inner, #slideshow-bottom, .slideshow  {
  width: 480px;
  }
  /* @media (max-width: 650px) Reduce font-sizes for better readability on smaller devices */
  body {
      padding: 0;
  }
  body, input, textarea {
    font-size: 120%;
  }
  #superfish .menu a, #superfish .menu a:visited{
    font-size: 110%;
	}  
  #header-middle {
	padding-top: 1px;
	padding-left: 1px;
  }
  #header-middle .logo-name {
    font-size: 120%;
    line-height: 20px;
	padding-left: 5px;
  }
  #header-middle .logo-text {
    font-size: 110%;
    line-height: 30px;
	padding-left: 5px;
  }
  #sidebar-side-1 #sidebar-right
  {
    font-size: 110%;
  }   
  #block-menu-secondary-links ul.menu li a
  {
	font-size: 110%;
	line-height: 110%;
  }
  #subnav-wrapper ul li, #subnav-wrapper ul li a
  {
	font-size: 110%;
	line-height: 110%;
  }

  /* Floated content doesn't work well at this size */
  .alignleft,
  .alignright {
    float: none;
    margin-left: 0;
    margin-right: 0;
  }
}
@media screen and (max-width: 479px) {
  /*  iphone */
  #preface-wrapper, #wrapper, #bottom-wrapper, #footer, #footer-wrapper, #header, #menu, #bottom-teaser, .slideshow-inner, #slideshow-bottom, .slideshow  {
  width: 320px;
  }
  body, input, textarea {
    font-size: 130%;
  }
  #superfish .menu a, #superfish .menu a:visited{
    font-size: 120%;
	}  
  #header-middle {
	padding-top: 1px;
	padding-left: 1px;
  }
  #header-middle .logo-text {
    font-size: 115%;
    line-height: 32px;
	padding-left: 5px;
	width: auto;
  }
  #sidebar-side-1 #sidebar-right
  {
    font-size: 115%;
  }    
  #block-menu-secondary-links ul.menu li a
  {
	font-size: 115%;
	line-height: 115%;
  }
  #subnav-wrapper ul li, #subnav-wrapper ul li a
  {
	font-size: 115%;
	line-height: 115%;
  }
  .sidebars-1 #content{
	padding-left: 5px;
  }
  input[type="text"] {
    width: 98%;
  }
}
@media screen and (max-width: 319px) {
  /* small phone */
  #preface-wrapper, #wrapper, #bottom-wrapper, #footer, #footer-wrapper, #header, #menu, #bottom-teaser, .slideshow-inner, #slideshow-bottom, .slideshow  {
  width: 100%;
  }
  #wrapper {
    margin-top: 0;
  }
  #header {
    border-top: none;
  }
  input[type="text"] {
    width: 98%;
  }
}

Draokon, thank you very much for sharing this. It works perfectly!

Can we make a checkbox inside of the configuration options for Danland to enable this fix so that people can choose to make Danland responsive as other themes have done?

Comment removed, as it was based on a misunderstanding.

Thanks draokon. I've now merged your suggestions. Please do it as a patch next time.

I think this is just the first step in this issue. Once that is done, I'd release danland 7.x-1.1.

Great to see progress in this.

There is a lot of issues related to mobile friendliness and superfish compatibility (many of them just jQuery version problems unrelated to Danland, I have tidied a bit in the queue today.).

Ref. my suggestions in #2377827: Drupal 8 Version Planned?

What about making the next version (7.x-2.x) of Danland work with AdaptiveTheme base theme, so we can get a lot of these features "for free"?

@Leeteq: the way that Drupal works (no module dependencies), I'd rather not require a base theme.. The update system might update the theme (not sure if that works with themes), but because there's no dependency checks, the sites would simply WSOD..

Sorry.

Oh, and thanks a lot for the issue cleanup.. It really helps.

Please test the 8.x branch. It already responsive and mobile first for sidebars and main content.

Tried using the above patch to 7.x branch - it doesn't play well with my phone or tablet: makes a mess.
Tried using 8.x branch on a fresh install and it's quite good on mobile.
Pursuant to the title&version of this thread, any plans to backport the responsiveness to 7.x branch?

If I read this correctly, this went into the D8 version only, and is not backported yet, right?

how to make changes on version 8 as there is no template.php

Bonjour je suis debutante sur drupal j'utilise la version8. Actuellement je veux rendre le site responsive mais les reponses que je vois ici son destines aux versions enterieur du theme Danland. Merci de votre aide.

I really like this Danland theme, and am using it to completely recreate an existing website on Drupal 7 (can't move to Drupal 8 because of compatibility issues with CiviCRM). I like the Preface first, middle, and last blocks, however images in those blocks show up on the desktop but do not show up on mobile. Everything else on the site looks beautiful on mobile (although it is only responsive, not actually adaptive), but only the text in the Preface blocks shows up on my iPhone, both in Safari and Chrome.

I am new to the Drupal project and was trying to get images in the Danland theme mobile adaptive.
I am using Drupal 9 and Danland 8 as standard theme and discovered that this issue was addressed previously.
Content seems to be fully adaptive but not the images (slideshow or any other embedded images).