Mobile Version on Storefront Theme

I was told last time HOW to make my Woocommerce mobile site 2 columns for products to show properly to use the following code:

By default Storefront is responsive. If you have your store displaying 4 columns by default, once the screen size is below 768px, it will automatically only display a single column. If you’re wanting to target sizes below that, media queries are not needed since it is also mobile first, meaning the css relates to mobile before it relates to desktop. Try the rules without media queries.

ALSO how do I get the Site Header in proportion for mobile version for Portrait and Landscape from the original site ? ie. minimised so it fits in properly. What is the correct coding for this ?

I don’t follow here, can you elaborate on what you mean? The header itself changes according to what is needed for mobile devices.

ALSO as I have tabs in the website, info from tabs are displaying 50%, then on the other 50% of mobile view it is showing the Product Title and $$$ and short description.

I need to get them showing 100% width and Tabs info underneath the Product Title, $$$ and Short description.

Can you provide a link to a product that has this problem?

Hi

Yes I understand Storefront is responsive but it is not defaulting and changing the mobile version to 1 or 2 columns of products.

My client needs it 2 columns.

Site is showing on PC as 3 columns with left sidebar which is how it should be on PC and laptop.

Even on my other test client website with STorefront it seems to read the coding for the normal PC & Laptop version to make it 3 or 4 columns, but when it gets to mobile version it tries to fit it all into a small mobile screen. Hence previously I have used separate mobile plugin which is much easier sometimes.

But I am determined to get the coding correct for these to display correctly on mobile version.

Therefore I need to add in extra coding to get 2 columns ONLY showing on the mobile version as for now it is trying to show 3 columns of products all squashed up

This is what someone had suggested but not showing changes to 2 columns:

/* On screens that are 600px or less, make products two columns */
@media screen and (max-width: 600px) {

ul.products li.product {
width: 46%;
margin-right:3%;
margin-left: 0px;
}
}
Please advise coding to use for this.

The site header is displaying half cut off , not being responsive on mobile version. I could easily do a workaround like my last site and upload a site-header in css that will fit the mobile version properly but apparently I shouldn’t have to upload another site-header or logo and theme should adjust itself to view properly.

But it doesn’t/

Therefore if I can just put in some suitable CSS coding that should rectify it.

Any advice would be great with some css coding.

Site is not yet live in development final stages ready to go live in 1 week.

Thanks
Kristin

Here is what I used to get two columns in the mobile view:

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

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

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

And here’s my result: https://cld.wthms.co/xoeBZ1

The site header is displaying half cut off , not being responsive on mobile version. I could easily do a workaround like my last site and upload a site-header in css that will fit the mobile version properly but apparently I shouldn’t have to upload another site-header or logo and theme should adjust itself to view properly.

We would have to see this to be able to work on it. Can you provide a link to a testing site?

HI

Yes I modified it slightly and it worked.

How do I limit the number of products displayed on the screen in Storefront on MOBILE ONLY ?

Also the .storefront-sorting on the MOBILE seems to be quite a big gab between the display “Showing 1–15 of 91 results” and the pages numbers, how can I reduce this ?

I can’t seem to find direct coding for this only the
.storefront-sorting which I can change the height but NOT the height between these 2 items.

ALSO the MOBILE MENU I prefer to slide out the left or right side rather than going over the page content.

How can I achieve this ?

Sorry as I have mentioned I am very used to a particular plugin for mobile versions which I am trying not to use as much these days for this particular Theme Storefront.

Any help greatly appreciated.

Thanks
Kristin

Also how do I get Related Products that are on the bottom of the Single Page to display in 2 columns also on the MOBILE for Storefront ?

Thanks
Kristin

ALSO as I’m doing my own coding for STorefront MOBILE version, I was told to use this @media for mobile devices Portrait

@media screen and (max-width: 600px) {

So the coding I put in here, HOW can I have it display across all mobiles whether Portrait or Landscape ?

Or do I do 2 sets of coding 1 for Portrait, and 1 for Landscape ?

What is the Max-width for landscape for all types of phones ?

AND I found these but haven’t put any coding in these Phone versions ..

/* ———– iPhone 6, 6S, 7 and 8 ———– */

/* Portrait and Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {

}

/* ———– iPhone X ———– */

/* Portrait and Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3) {

}

How does the webkit-min-device-pixel-ratio: work if someone could explain how it works in relation to mobile ?

Sorry for all the questions ….
Need to get this fully working 100% with Storefront on mobile **

Thanks
Kristin

How do I limit the number of products displayed on the screen in Storefront on MOBILE ONLY ?

This is only possible through advanced PHP coding, as there would need to be some sort of mobile detection to return only X number of results.

Also the .storefront-sorting on the MOBILE seems to be quite a big gab between the display “Showing 1–15 of 91 results” and the pages numbers, how can I reduce this ?

Can you provide a link where this is happening? Most likely there is some sort of padding or margin around these areas.

ALSO the MOBILE MENU I prefer to slide out the left or right side rather than going over the page content.

How can I achieve this ?

This is more advanced than we are able to help with here.

Also how do I get Related Products that are on the bottom of the Single Page to display in 2 columns also on the MOBILE for Storefront ?

We would need an example to see if/what can be done.

ALSO as I’m doing my own coding for STorefront MOBILE version, I was told to use this @media for mobile devices Portrait

@media screen and (max-width: 600px) {

So the coding I put in here, HOW can I have it display across all mobiles whether Portrait or Landscape ?

Or do I do 2 sets of coding 1 for Portrait, and 1 for Landscape ?

What is the Max-width for landscape for all types of phones ?

This is more advanced than we are able to assist with here. Different sites will display differently across different devices, no sites are the same. Storefront was designed to be generic and flow well across different devices, but as modifications are done, things change. The 600px media query you mentioned would target certain devices.

It’s suggested you either find a tutorial, course, or book about CSS and responsive design, or find a developer that can help you modify Storefront to be what you want it to be. We are able to help with small changes here and there, not completely redesign the theme to fit the needs of a specific site.

OK

I appreciate your reply Jesse.

Therefore that is why I am best to use a separate Mobile Plugin like I have always used because I get stuck and have certain limitations for Themes to be fully mobile friendly. Yes we are told they are mobile friendly and yes they are to a degree, but when coding is changed to the child theme to make certain features or requirements work for certain websites, hence I guess this changes the automatic friendliness of the responsive mobile version to work without a lot of extra coding required.

And other coding is required to make it mobile friendly against all the other types of mobiles out there.

I think I might revert back to what I have been doing for years. I was determined to get this working, but I think I will keep getting to dead ends on certain things.

At least a mobile plugin, will cover all types of mobiles so I don’t have to do individual coding for all mobile phones across the board. And there are many types of phones out there …

Not worth the hassle of coding if I don’t have any template guide …

If anyone has any other ideas to help me would be great. Maybe someone has already come across this issue and limitation, I am sure I am not the only one that has had this issue.

Thanks anyway that has answered my question.

Thanks
Kristin

@jessepearson – im having the same issue and i used your code:

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

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

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

but it only showed the first row in 2 columns. everything else below as in single file but smaller – can you suggest anything?

@mprice14 Can you create a new thread referring to this one, the issue you are having, and a link to the site where you’ve added the CSS? Either myself or another support member will be able to help you from there.

@jessepearson Hello nice to meet you. I use your code on my website https://www.ropaseverus.com
but in the mobile version the two columns appear but in the second column there is only one product.
Please help me. what I do?

@liss12345 Hey there ??

Can you create your own thread outlining the issue, what you’ve done and what you are looking to do? Someone will then be able to assist you. This thread is already marked resolved and will not be looked at, I only saw it because you included my username directly.

@jessepearson i have the same issue and i used your code but some of my products are off. Here is my website: https://www.okeif.com. Please can you help me to correct this issue. Here is the code i used with adjustments

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

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

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

My mobile phone is an iPhone X

My above code is incorrect, please use:

.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%;
	}
}