Title: Mobile version Storefront
Last modified: March 1, 2019

---

# Mobile version Storefront

 *  [kristinubute](https://wordpress.org/support/users/kristinubute/)
 * (@kristinubute)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/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](https://wordpress.org/support/users/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](https://wordpress.org/support/users/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](https://wordpress.org/support/users/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](https://wordpress.org/support/users/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

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Thread Starter [kristinubute](https://wordpress.org/support/users/kristinubute/)
 * (@kristinubute)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/mobile-version-storefront/#post-11265318)
 * Also what is the best way to edit the MOBILE MENU as there is NO formatting on
   it at all
 * Obviously CSS coding but if I am using no [@media](https://wordpress.org/support/users/media/)
   queries it makes it difficult to edit CSS
 * My Mega Menu on the PC version is too busy on the mobile version so need to edit
   the mobile version.
 * As currently 2 menus are appearing on the Storefront mobile with NO [@media](https://wordpress.org/support/users/media/)
   queries and no other mobile plugins.
 * Thanks
    Kristin
 *  [Ryan Ray, a11n](https://wordpress.org/support/users/ryanr14/)
 * (@ryanr14)
 * [6 years, 10 months ago](https://wordpress.org/support/topic/mobile-version-storefront/#post-11605619)
 * Hi [@kristinubute](https://wordpress.org/support/users/kristinubute/),
 * Thanks for the couple of messages here. I’ll try to separate what you’ve asked
   us about and explain our rationale for the way Storefront works.
 * To begin, Storefront was built with its mobile layout first. It then adapts to
   larger screens. From what I can see we’ve implemented our own parts of a framework
   called Susy. –> [https://susy.readthedocs.io](https://susy.readthedocs.io)
 * ⌊Storefront breakpoints⌉⌊Storefront breakpoints⌉
    Link to image: [https://cld.wthms.co/KoX4db](https://cld.wthms.co/KoX4db)
 * ^ That above is the pixel breakpoints to go from handheld, to a tablet in-between,
   then to the desktop size. 568px is the max width for handheld, then 569-767px
   would be tablet, finally 768px and beyond is desktop.
 * I would continue using those breakpoints in your media queries to target certain
   layouts/devices to customize to your liking. So to answer the part about Galaxy
   S3s, that depends on their screen size which I’m sure you can find out somewhere.
 * Regarding Mega Menus, if you are using our extension for that it doesn’t currently
   work on mobile devices. It falls back to the normal menu in that case. What do
   you mean when you see 2 items? Also, can you help us understand what your MOBILE
   MENU is and what NO formatting means? 🙂

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Mobile version Storefront’ 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/)

## Tags

 * [storefront mobile](https://wordpress.org/support/topic-tag/storefront-mobile/)

 * 2 replies
 * 2 participants
 * Last reply from: [Ryan Ray, a11n](https://wordpress.org/support/users/ryanr14/)
 * Last activity: [6 years, 10 months ago](https://wordpress.org/support/topic/mobile-version-storefront/#post-11605619)
 * Status: not resolved