Example – using different layouts to create responsive and nonresponsive content layout for the same view

In this example, we will create a new action in NewsController that will change its layout depending on a value passed in the URL.

First, add a new action in NewsController called actionResponsiveContentTest:

public function actionResponsiveContentTest()
{
  $responsive =  Yii::$app->request->get('responsive', 0);

  if($responsive)
  {
    $this->layout = 'responsive';
  }
  else
  {
    $this->layout = 'main';
  }

  return $this->render('responsiveContentTest', ['responsive' => $responsive]);
}

In this action, we get a responsive parameter from the URL and set the $responsive variable to this value or 0 if not passed.

Then, set the $layout property of Controller to responsive or not according to the $responsive value, and pass this variable to view.

Then, create a new view in views/news/responsiveContentTest.php:

<?php if($responsive) { ?>
  This layout contains responsive content
<?php } else { ?>
  This layout does not contain responsive content
<?php } ?>

This displays a different text block according to the $responsive value.

Finally, make a clone of main layout copying views/layouts/main.php in views/layouts/responsive.php and change in a new file views/layouts/responsive.php:

<div class="container"> in <div class="container-fluid" style="padding-top:60px">

This change makes the div container fluid (responsive), in other words, its content is resized with respect to percentage available in the horizontal space (instead the fixed value).

If we point to http://hostname/basic/web/index.php?r=news/responsive-content-test, we will see content in a fixed layout. Instead, if we pass the responsive parameter with value 1, http://hostname/basic/web/index.php?r=news/responsive-content-test&responsive=1, we will see the content in a full width screen.