Book Image

Magento 2 Development Essentials

By : Fernando J Miguel
Book Image

Magento 2 Development Essentials

By: Fernando J Miguel

Overview of this book

Magento is the e-commerce software and platform trusted by the world's leading brands. Used by thousands of merchants for their transactions worth billions, it provides the flexibility to customize the content and functionality of your website. By strengthening your fundamentals in Magento development, you can develop the best solutions and take advantage of the growing market. This fast-paced tutorial will provide you with skills you need to successfully create themes, extensions, and solutions to Magento 2 projects. This book begins by setting up Magento 2 before gradually moving onto setting the basic options of the Sell System. You will take advantage of Search Engine Optimization aspects, create design and customize theme layout, develop new extensions, and adjust the Magento System to achieve great performance. By sequentially working through the steps in each chapter, you will quickly explore all the features of Magento 2 to create a great solution. With ample examples and a practical approach, this book will ensure your success with this astonishing e-commerce management system.
Table of Contents (16 chapters)
Magento 2 Development Essentials
About the Author
About the Reviewers

Implementing a new CSS mixin media query

First of all, let's take a look at the current mobile version of the CompStore theme. Using Chrome DevTools or Responsive Web Designer Tester, select an Apple iPhone 5 (portrait) device to test the site. You will probably be redirected to home page:

In spite of the previous adjustment in the CompStore theme, when a mobile device accesses a theme, CSS rules don't apply some important features, such as colors and the positioning of elements. As a suggestion, let's create a standard declaration of color approach and configure CSS to show only one product when the mobile device accesses the site. How can we implement these new features? Using media queries, of course!

In your favorite code editor, open the compstore.less file available under the app/design/frontend/Packt/compstore/web/css/source directory and use the following CSS 3 code:

@color-compstore: #F6F6F6;

  background: @color-compstore;

.media-width(@extremum, @break) when (@extremum...