Site not showing correctly on mobile device

Resolved andywk
(@andywk)

6 years, 4 months ago

Dear All,

I am using Storefront theme. I have so far made it work on desktop as good as I need. However, it does not work very well on mobile device. I have two problems: 1) the single product page does not show completely on mobile device (I am using iPhone 6). It looks like there is negative margin of the page. 2) On desktop, the products on Shop page are shown in 4 columns, however, on mobile it only shows 1 column. The product shrinks to only 1/4 of the width of the mobile phone screen, but it does not show 4 product in a row back to back.

I have researched about this for a whole night and feel like I have read all online threads with the same topic, but so far got so luck. If anyone can help with this, that would be greatly appreciated.

Kind regards,
Andy WK

The page I need help with: [log in to see the link]

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

Mikey (a11n)
(@mikeyarce)

6 years, 4 months ago
Hi @andywk,

1) the single product page does not show completely on mobile device (I am using iPhone 6). It looks like there is negative margin of the page.

Yeah, it looks like the Bootstrap Customizer is adding some bad CSS causing the problem. I would suggest de-activating that or overriding that CSS.

2) On desktop, the products on Shop page are shown in 4 columns, however, on mobile it only shows 1 column. The product shrinks to only 1/4 of the width of the mobile phone screen, but it does not show 4 product in a row back to back.

Another bootstrap customizer issue, you would need to override this code:
```
.storefront-full-width-content .site-main .columns-3 ul.products li.product.four-per-row {
  width: 23%;
  /* margin-right: 2%; */
  margin-bottom: 2%;
  }
```
It’s setting the width to 23% which is about 1/4th.

Cheers,
Thread Starter andywk
(@andywk)

6 years, 4 months ago

@mikeyarce Thank you Sir. Let me try. Cheers!

Thread Starter andywk
(@andywk)

6 years, 4 months ago

@mikeyarce

Some background – I was trying to create a child theme based on storefront, however, the header background turned to black and no matter what I tried it stayed black. That is why I reverted back to storefront with using the child theme.

I have tried copying your code to the end of the style.css file under domain/wp-content/themes/storefront, it did not work. Also I copied your code to Customizing Additional CSS under dashboard, it did not work either. I am not sure if I did anything wrong. Editing CSS never worked for me, not sure if I have to use child theme to make it work.

I hate to say I am new but I have been working really hard these days (day and night) to get the simple website to work. Can you please give me another hint how exactly I should incorporate your code? Greatly appreciated!

-Andy
Thread Starter andywk
(@andywk)

6 years, 4 months ago
This is what worked to present multi columns on mobile:

@media (max-width: 767px) {
ul.products li.product {
width: 25%;
float: left;
clear: both;
}

ul.products li.product:nth-child(1n) {
clear: none;
float: left;
}
}

I still have the single product page not showing correctly. I tried to Inspect the element and add a left margin of 15px and it looks fine. But I have no idea how to determine if it is a mobile device or desktop (resolution of 768?), and how to write the code for the additional margin. Anyone helps, please?

Take this page for an example (showing on mobile):

http://www.sweetriceking.com/product/sweet-rice-original-flavor/

Many thanks!
- This reply was modified 6 years, 4 months ago by andywk.
Thread Starter andywk
(@andywk)

6 years, 4 months ago

Figured the single product page issue. Thought it might help the other beginners who might be in the same situation:

@media (max-width: 767px) {
.storefront-full-width-content.single-product div.product .summary {
margin-left:10%;
width: 80%;
}

.storefront-full-width-content.single-product div.product
.woocommerce-product-gallery {
margin-left:10%;
width: 80%;
}

.single-product
.woocommerce-breadcrumb {
margin-left: 0px;
}
}

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

The topic ‘Site not showing correctly on mobile device’ is closed to new replies.

Tags