Mobile-specific styling

The last thing I'll cover in this chapter is some specific mobile styles that I applied to the layout. You will need to insert these styles at the bottom of theme.less in the /css directory. Before I explain the code, here's a preview of what the mobile version will look like on a phone:

Now, let's review the custom styles that go into the making of this layout:

@media (max-width: 768px) {
  .container {
    padding-right: @padding;
    padding-left: @padding;
  }

  .add-content {
    float: left;
    margin-top: @margin;
  }

  li.desktop-only {
    display: none;
  }

  .modal a {
    font-size: (@font-size * 2);
  }
}

Let me explain how the mobile specific styles work for this project:

• I'm using the value of 768px in the media query to target tablets and phones with these mobile-specific styles.

• The styles in the .container class reset the left and right padding. I've added more padding to our desktop containers to squeeze the layout.

• I want the Add Content button to...