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
768pxin the media query to target tablets and phones with these mobile-specific styles.The styles in the
.containerclass 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...