Mobile version Storefront

  • kristinubute

    (@kristinubute)


    6 years ago

    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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter kristinubute

    (@kristinubute)

    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 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 queries and no other mobile plugins.

    Thanks
    Kristin

    Hi @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

    Storefront breakpoints
    Link to image: 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.