Mobile version Storefront

Hi, I Have Storefront on a few client sites.

Therefore sometimes I have to change CSS to get things looking correctly on the PC/Laptop version, therefore it affects the mobile version as you guys have said I shouldn’t need to have separate @media coding as Storefront will pick things up automatically.

The mobile version never looks like it should so I always use a separate plugin to get it looking right.

I know that Storefront is fully responsive for mobile but never looks properly at my end.

This is for a client site.

Currently it is showing only 1 column.

The last coding that you guys gave us was this below (but obviously I need to put that into @media coding to cover all mobile types. What is the best media query for that as my Test MObile Samsung Galaxy Tab 3 is NOT showing any changes with different media queries I try to display 2 columns on the mobile version.

.site-main ul.products li.product {
width: 46.411765%;
float: left;
margin-right: 5.8823529412%;
}

.site-main ul.products li.product:nth-of-type(2n) {
margin-right: 0;
}

@media (min-width: 768px) {
.site-main ul.products li.product:nth-of-type(2n) {
margin-right: 5.8823529412%;
}
}

Also on the mobile version – the Top Header logo doesn’t show the whole header so I need to reduce it.

AND it shows 2 menu items as I am using Mega Menu also…

I really need to get my @media queries correct to reflect any changes I make to the mobile version only, but I’m getting frustrated.

Hence I always end up back using a separate Mobile plugin because of time constraints.
Therefore I am trying again now to get things working properly without a separate mobile plugin and using your Storefront completely across the board for all devices including mobile viewing properly …

THanks in advance.

Thanks
Kristin