How can I Have Home Page Products Shown in Two Columns on Core Mobile?

By default, the Core themes will display Home Page products in one column due to the narrowed size of the screen.
(Note: Wider screens will display multiple columns, but the standard phone screen will display it in one.)

If you wish to override this behavior and have the Home Page Product displayed in two columns on all phones, you will need to edit the Core theme's default CSS using the following steps:

1. Log into your Shift4Shop Online Store Manager.

2. Using the left navigation menu, go to Settings > Design > Themes & Styles.

3. Once there, click on the More button located at the top right of the page and select Edit Template (HTML).

You will now be in the theme's Template Editor page. Look towards the upper right side of the page and you will see a drop-down menu.

4. Click on the Select Folder... drop-down menu and select template/[your-theme-folder]/css.

If you have followed the above steps properly, you will now be at your theme folder's CSS folder. You should see one file named "default.css" in the list. Click this file to edit it.

5. Scroll all the way down to the very end of the CSS file and copy/paste the following to the end of the CSS file.:

@media (max-width: 767px)
{
.product-items.product-items-1 .product-item, .product-items.product-items-2 .product-item, .product-items.product-items-3 .product-item, .product-items.product-items-4 .product-item, .product-items.product-items-5 .product-item, .product-items.product-items-6 .product-item {
float: left;
width: 50%;
padding: 0 10px;
}
}

6. Once done, click Save at the top right of the page to commit your changes.

The mobile view of your Core theme will now display home page products in two columns.