Now that you understood how media queries work, let’s apply some fix to our theme. In this topic, we will mostly use the default Bootstrap classes to fix minor bugs.
1. Testing the responsiveness of a website
First, we need a tool to test the responsiveness. There are many tools to test the responsiveness of a website. You can simply resize the browser window or you can test directly on the devices. Alternatively, you can use a great tool called Viewport Resizer.
Viewport Resizer is a responsive design bookmark script created by Malte Wassermann. This script generates a very useful toolbar in your page that allows you to select the device to test and automatically resizes the page you are viewing into an iFrame with the required width.
You can download and save this useful bookmark from the author’s website at http://lab.maltewassermann.com/viewport-resizer. It only takes 2 seconds! Simply click on the big button CLICK OR BOOKMARK to save the bookmark as shown in the following screenshot:
Once you save the bookmark, open your theme page and click on the Resizer bookmark. Now the toolbar will appear with a neat dropdown effect, as shown in the following screenshot:
In the following screenshot, on the left you can see buttons that will resize the page to the width of common devices such as iPad, iPhone, and iPad mini. You can also set your own size to test by clicking on Customize:
2. Optimizing the top bar of the header
Now that we’ve got this great tool in our browser, let’s begin to optimize the theme for tablets and smartphones, beginning from the top of the screen view.
If you try to resize the theme to different resolutions, you will see that the design is not so good and the elements are not aligned; however, with some simple tricks we will fix all the problems.
If you click on the Tablet button, you can see that it almost looks fine. This is because Bootstrap is already responsive and the classes we added to the columns are good.
But as you can see in the following screenshot, some things need to be fixed. In fact, the user links that should be placed on the right are on the left and other elements too look misaligned.
We need to put the customer area on the right of the large screen. To do this, we only need to add the col-sm-7 class to the left of div that already has the col-md-8 class. In this way, we are telling the theme to have div of seven columns on tablet devices.
Note: The col-md-X class is used for the columns of desktop devices, and col-sm-X is used for tablet devices. For small devices, you can use col- xs. For more information, you can read the Bootstrap documentation at http://getbootstrap.com/css/#grid-example-basic.
To do the modifications, find the following code snippet in the header.phtml file:
<div class=”col-md-8″>
<?php echo $this->getChildHtml(‘topbar_cmslinks’) ?>
</div>
Replace this with the following code snippet:
<div class=”col-md-8 col-sm-7″>
<?php echo $this->getChildHtml(‘topbar_cmslinks’) ?>
</div>
Also, change the user block on the right from <div class=”user-links col- md-4″> to <div class=”user-links col-md-4 col-sm-5″>.
As you can see in the following screenshot, we fixed this problem for a tablet:
To see how the theme looks on a mobile phone, click on the button with an iPhone icon. To optimize it, you can use the same principle with the class prefix col-xs- instead of col-sm-.
2.1. Fixing the logo row
The logo and the cart are now too big. We can simply fix this in the same manner: add the col-sm-5 class to the logo, changing
<div class=”logo col-md-4″> to
<div class=”logo col-md-4 col-sm-5″>.
Then, add the col-sm class to the cart and the empty div blocks as well:
<div class=”logo col-md-4 col-sm-5″>
<div class=”col-md-4 col-sm-2″>
<div class=”col-md-4 col-sm-5″>
In this way, we changed the width of the columns for small devices, changing the columns of the first logo box from 4 to 5, the second box from 4 to 2, and the last from 4 to 5. In this way, we are making the main div blocks (the logo and cart boxes) larger because they are very important.
Note: Remember that the grid is made up of 12 columns.
2.2. Fixing the menu bar
For tablets, the menu only needs to change the padding within the links.
So, add the following CSS code into your CSS file style.css that will overwrite the Bootstrap CSS:
@media(min-width:768px) {
.navbar-nav > li > a {
padding: 15px 10px;
}
}
For smartphone devices, we need to make some other modifications, giving the links a full width of the device and moving the dropdown arrow to the right, as follows:
@media(max-width:767px) {
.navbar-nav > li {
border-bottom: 1px solid #DDDDDD;
display: block;
}
.nav .caret {
display: block;
float: right;
margin-top: 10px;
}
}
In the following screenshot, you can check out the final result on tablet:
In the following screenshot, you can see the final result on the smartphone with the expanded menu:
2.3. Fixing the main content column
Scrolling down the screen, the slider and banners will seem ok, so we can leave them like this. However, we need to fix the main content area that contains the sidebar and the products grid.
To fix this area, open the 2columns-lef.phtml file located in app/design/ frontend/bookstore/default/template/page/ and add the col-sm-3 class to the sidebar div of <aside> as follows:
<aside class=”col-left sidebar col-md-3 col-sm-3“>
Also, add the col-sm-9 class to the col-main element of the div tag as follows:
<div class=”col-main col-md-9 col-sm-9“>
2.4. Fixing the products grid
The products grid looks good on smaller and medium resolutions. Now we only need to fix a small issue for a mini tablet by adding a new class col-xs, used for resolutions between smartphones and tablets.
The only modification that we are going to do now is adding the col-xs-6 class to the product item generated inside the <?php foreach . . . ?> statement with the following code:
<li class=”item<?php if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?> col-md-4 col-sm-4 col-xs-6“>
The file of products grid in the home page is list-home.phtml located in app/design/frontend/bookstore/default/template/products/.
2.5. Adjusting the footer
The footer needs some modifications. Let’s begin from the block footer-cmslinks static and modify the footer by performing the following steps:
- Replace the code of the footer.phtml file present in app/design/frontend/bookstore/default/template/page/html with the following to fix the responsiveness of the columns for the tablet:
<div class=”row”>
<div class=”col-sm-3″>
<h4>About Us</h4>
<ul>
. . .
</ul>
</div>
<div class=”col-sm-3″>
<h4>Customer Service</h4>
<ul>
. . .
</ul>
</div>
<div class=”col-sm-3″>
<h4>Customer Services</h4>
<ul>
. . .
</ul>
</div>
<div class=”col-sm-3″>
<h4>User Area</h4>
<ul>
. . .
</ul>
</div>
</div>
As you can see, all the col-md-3 classes are replaced with col-sm-3.
- Now, open the phtml file and change the class of the newsletter container and the class of the social box container from col-md-6 to col-sm-6. The footer on tablets will look like what is shown in the following screenshot:
For smartphone resolutions, we don’t need to do the modifications because every box will take the full width of the device.
Source: Sacca Andrea (2014), Mastering Magento theme design, Packt Publishing; Illustrated edition.