Upgrading Storefront Theme – issue

Hi Kristin!

You would need to alter the CSS and on mobile view make the products 50% (or less) width rather than 100%.

In a quick test something like this will work:

/* On screens that are 600px or less, make products two columns */
@media screen and (max-width: 600px) {
  ul.products li {
    width: 47%;
    margin-right: 10px;
    float: left;
  }
}

You can change the 600px to something else of course.

If you’re not sure about CSS, take a look at this guide:

https://cssworkshop.wordpress.com/

Thanks Joel

Also with regards to using your Storefront theme for mobile being responsive .. as I am new to using this theme for mobile as I have always used the separate plugin for mobile, my other question is it seems to show completely whatever you see on the PC version is the same on the mobile version.

Usually a mobile version will NOT show the footer in full for example etc.
And the header doesn’t fit properly. Do I just add in extra coding and upload a new mobile header separately and put it in the CSS for your theme ?
Portrait view
eg

.site-header {
background-image: url(filelocation.jpg) !important;
position: relative;
max-width: 100%;
background-size:100% 100%;
}

Would that do the job properly ?

And do the same for the landscape version, upload a different header for the landscape version compared to Portrait version.

What is the best way if I am not using a plugin for mobile, best way to visualise the changes for the mobile phone when working on a local computer (as I don’t upload until near the end of a website completion, I need to be able to view it as I go and make appropriate CSS changes. I am used to a little screen like the mobile that I can see what it looks like and adjust CSS as required.

Regards
Kristin

Hi Kristin!

Do I just add in extra coding and upload a new mobile header separately and put it in the CSS for your theme ?

Personally I would use CSS media queries to resize the current header image or if that doesn’t work, do what you say and change the image on mobile devices.

What is the best way if I am not using a plugin for mobile, best way to visualise the changes for the mobile phone when working on a local computer (as I don’t upload until near the end of a website completion, I need to be able to view it as I go and make appropriate CSS changes. I am used to a little screen like the mobile that I can see what it looks like and adjust CSS as required.

If you’re using a browser developer tools (F12 on a PC or Ctrl+Option+i on a Mac) you can usually see a mobile icon. This is Chrome for example:

https://joelwills.com/jHNJcd

That will open the device viewer and you can change different sizes of device/screen to see how it looks.

Safari has a User-Agent option where it will load the site as if e.g aniPhone 6 was connecting. You can also re-size the browser like you’re doing.

Hope that helps!

HI

Thanks for your reply.

Sorry for the next few questions, but as I haven’t used Storefront for mobile version previously without a separate plugin I have some things to be fixed in my css and need some advice and help.

OK when viewing the website via mobile, it is picking up the PC version of Menu and not the Mobile Menu. How do I link the MOBILE MENU created separately in Woocommerce Menu and link that within Storefront theme for ONLY Menu ?

How do I remove the entire footer ?

.site-footer { display: none}

Also the left sidebar is not required in the mobile version. How do I remove this ? I can’t find the relevant coding for this.

THanks
Kristin

HI

ALSO I have added the coding to allow 2 products per row, sometimes I have 3 rows with 2 products on each line, then on the next line only 1 product will show on the right side, then 2 more on the next row.

What causes this ? It would be a bit of coding required to fix this ?
I have it as align: left also

Also the visual of the Mobile MENU. Usually the mobile has 3 lines down for the icon and then usually extends the site to the left to see the full menu items, how can I achieve this on this theme ?

I prefer not to have the Menu items display over the website, but a lot of sites these days has the Icon that you click and then moves the menu to the left and displays it clearly. Usually a mobile plugin that I am used to does this, but I am hoping I can achieve this effect using this theme.

Any ideas and advice ?

Thanks
Kristin

And the “Add to Cart” buttons have disappeared throughout the mobile version of the site.

How do I fix this ?

Thx
Kristin

I have added in coding to get the “Add to Cart” buttons back on the site for mobile.

At the moment the Single Product Page is not showing the Product picture and information on mobile also etc …

Coding on original PC version of the site is
col-full for these pages

Could this be causing the issue that I can’t see anything on the MOBILE version for the Individual Product once clicked on them ?

Once I iron out these issues I will be fine for future jobs.
It’s only because I am used to a particular plugin for many years for the mobile devices and now having to recode quite a bit for the mobile version differently.

Thanks
Kristin