Title: Mobile Version on Storefront Theme Last modified: June 11, 2018 --- # Mobile Version on Storefront Theme * Resolved [kristinubute](https://wordpress.org/support/users/kristinubute/) * (@kristinubute) * [8 years ago](https://wordpress.org/support/topic/mobile-version-on-storefront-theme/) * Hi, I am relatively new to using Storefront for my mobile versions … I am using Woocommerce shopping cart. * I usually use a plugin for mobile version, so I am determined to get MOBILE 100% working with Storefront theme for mobile version now. Usually I have avoided this but not this time !! * I was told last time HOW to make my Woocommerce mobile site 2 columns for products to show properly to use the following code: * /* On screens that are 600px or less, make products two columns */ [@media](https://wordpress.org/support/users/media/) screen and (max-width: 600px) { * ul.products li.product { width: 46%; margin-right:3%; margin-left: 0px; } } * It still shows 3 columns of products all squashed. * Then I tried : * /* On screens that are 600px or less, make products two columns */ [@media](https://wordpress.org/support/users/media/) screen and (max-width: 600px) { * .site-main ul.products li.product { width: 46%; margin-right:3%; margin-left: 0px; } } * Still 3 columns, I think something in my original coding is overruling my coding here ? Or not quite the right coding. * Tried this also : * /* On screens that are 600px or less, make products two columns */ [@media](https://wordpress.org/support/users/media/) screen and (max-width: 600px) { .site-main .columns-2 ul.products li.product { width: 46%; margin-right:3%; margin-left: 0px; } } * Didn’t work also. * Gosh this is frustrating to find the right coding. I know once I have it right I will know if forever! * 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 ? * 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. * I can’t seem to get this right either. * Any help greatly appreciated. * Thanks Kristin Viewing 15 replies - 1 through 15 (of 15 total) * [jessepearson](https://wordpress.org/support/users/jessepearson/) * (@jessepearson) * Automattic Happiness Engineer * [8 years ago](https://wordpress.org/support/topic/mobile-version-on-storefront-theme/#post-10388481) * > 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? * Thread Starter [kristinubute](https://wordpress.org/support/users/kristinubute/) * (@kristinubute) * [8 years ago](https://wordpress.org/support/topic/mobile-version-on-storefront-theme/#post-10394624) * 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](https://wordpress.org/support/users/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 * [jessepearson](https://wordpress.org/support/users/jessepearson/) * (@jessepearson) * Automattic Happiness Engineer * [8 years ago](https://wordpress.org/support/topic/mobile-version-on-storefront-theme/#post-10395896) * 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: [http://cld.wthms.co/xoeBZ1](http://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? * Thread Starter [kristinubute](https://wordpress.org/support/users/kristinubute/) * (@kristinubute) * [7 years, 12 months ago](https://wordpress.org/support/topic/mobile-version-on-storefront-theme/#post-10407712) * 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 * Thread Starter [kristinubute](https://wordpress.org/support/users/kristinubute/) * (@kristinubute) * [7 years, 12 months ago](https://wordpress.org/support/topic/mobile-version-on-storefront-theme/#post-10407727) * 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 * Thread Starter [kristinubute](https://wordpress.org/support/users/kristinubute/) * (@kristinubute) * [7 years, 12 months ago](https://wordpress.org/support/topic/mobile-version-on-storefront-theme/#post-10407732) * ALSO as I’m doing my own coding for STorefront MOBILE version, I was told to use this [@media](https://wordpress.org/support/users/media/) for mobile devices Portrait * [@media](https://wordpress.org/support/users/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](https://wordpress.org/support/users/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](https://wordpress.org/support/users/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 * [jessepearson](https://wordpress.org/support/users/jessepearson/) * (@jessepearson) * Automattic Happiness Engineer * [7 years, 11 months ago](https://wordpress.org/support/topic/mobile-version-on-storefront-theme/#post-10414432) * > 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](https://wordpress.org/support/users/media/) for mobile devices > Portrait > [@media](https://wordpress.org/support/users/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. * Thread Starter [kristinubute](https://wordpress.org/support/users/kristinubute/) * (@kristinubute) * [7 years, 11 months ago](https://wordpress.org/support/topic/mobile-version-on-storefront-theme/#post-10414557) * 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 * [mprice14](https://wordpress.org/support/users/mprice14/) * (@mprice14) * [7 years, 7 months ago](https://wordpress.org/support/topic/mobile-version-on-storefront-theme/#post-10786873) * [@jessepearson](https://wordpress.org/support/users/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](https://wordpress.org/support/users/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? * [jessepearson](https://wordpress.org/support/users/jessepearson/) * (@jessepearson) * Automattic Happiness Engineer * [7 years, 7 months ago](https://wordpress.org/support/topic/mobile-version-on-storefront-theme/#post-10788865) * [@mprice14](https://wordpress.org/support/users/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. * [liss12345](https://wordpress.org/support/users/liss12345/) * (@liss12345) * [7 years, 7 months ago](https://wordpress.org/support/topic/mobile-version-on-storefront-theme/#post-10843632) * [@jessepearson](https://wordpress.org/support/users/jessepearson/) Hello nice to meet you. I use your code on my website [http://www.ropaseverus.com](http://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? * [jessepearson](https://wordpress.org/support/users/jessepearson/) * (@jessepearson) * Automattic Happiness Engineer * [7 years, 7 months ago](https://wordpress.org/support/topic/mobile-version-on-storefront-theme/#post-10849021) * [@liss12345](https://wordpress.org/support/users/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. * [ochilink](https://wordpress.org/support/users/ochilink/) * (@ochilink) * [7 years, 6 months ago](https://wordpress.org/support/topic/mobile-version-on-storefront-theme/#post-10899628) * [@jessepearson](https://wordpress.org/support/users/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](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](https://wordpress.org/support/users/media/) (min-width: 768px) { .site- main ul.products li.product:nth-of-type(2) { margin-right:1%; } } * [ochilink](https://wordpress.org/support/users/ochilink/) * (@ochilink) * [7 years, 6 months ago](https://wordpress.org/support/topic/mobile-version-on-storefront-theme/#post-10899635) * My mobile phone is an iPhone X * [jessepearson](https://wordpress.org/support/users/jessepearson/) * (@jessepearson) * Automattic Happiness Engineer * [7 years, 6 months ago](https://wordpress.org/support/topic/mobile-version-on-storefront-theme/#post-10973625) * 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%; } } ``` Viewing 15 replies - 1 through 15 (of 15 total) The topic ‘Mobile Version on Storefront Theme’ is closed to new replies. * ![](https://i0.wp.com/themes.svn.wordpress.org/storefront/4.6.2/screenshot.png) * Storefront * [Support Threads](https://wordpress.org/support/theme/storefront/) * [Active Topics](https://wordpress.org/support/theme/storefront/active/) * [Unresolved Topics](https://wordpress.org/support/theme/storefront/unresolved/) * [Reviews](https://wordpress.org/support/theme/storefront/reviews/) * 15 replies * 5 participants * Last reply from: [jessepearson](https://wordpress.org/support/users/jessepearson/) * Last activity: [7 years, 6 months ago](https://wordpress.org/support/topic/mobile-version-on-storefront-theme/#post-10973625) * Status: resolved