[Resolved] Woocommerce Grid View

[Arnd]

Hi there,

Firstly, Generatepress is a fantastic theme – simply the best!

I have some problem with the update to 1.8 though. I noticed that after updating to GP Premium 1.8 the products in the woo grid view do not align responsively anymore. In desktop view desktop everything looks like I wanted it to look and all products are vertically aligned bottom. On tablet view, this doesn’t work anymore. It did with GP Premium 1.7 though.

Could you please help with it?

Many thanks,

Andy

[Tom]

Hi there,

What do you mean by vertically aligned to the bottom? Any chance you can show me an example?

We started using CSS Grid in GPP 1.8, which is likely why things changed for you. Were you using custom CSS?

[Arnd]

Hi Tom,

Here is an image how it used to look https://drive.google.com/open?id=1V999Apat2Xm4S–Q-8CVVIsdoK6i1tbr

This is how it is looking now on tablets or smaller screen sizes https://drive.google.com/open?id=1Bmikw3ip_-C3W4o3fq93imliT1iw5FiT

I have also just realised that the drop menus from the primary menu do mot work on tablets. These do work in responsive design view on desktop though, but do not open on the iPads itself. If there is a menu button, like on mobile phones, the drop down mens do work.

I could also give you access to the site if this helps

Cheers Andy

[Arnd]

Hello again, I forgot to mention CSS. It is only the following:

.woocommerce div.product div.images img {
max-width:80%;
height: auto;
}
.woocommerce ul.products small.woocommerce-price-suffix{
display:none
}
.woocommerce ul.products li.product .button {
display: none;
}
.woocommerce ul.products li.product .price {
color: #008ac9;
font-weight: 400;
font-size: .857em;
}

[Tom]

That looks like the images lost their sizing. I tried to take another look but it looks like you reverted back to 1.7.8? Any chance you can create a staging site and update so I can see the issue?

What about the dropdowns aren’t working, exactly? Nothing happens when you tap the menu item with a sub-menu?

[Arnd]

Hi Tom,

Firstly, thanks for looking into it.

That was a coincidence. I just restored an older backup.

On <MyDomain>.com (live site) I have installed GPP 1.8.2 (It is back now)
On demo.<Mydomain>.eu I am using GPP 1.7.7

On the front page, I have a similar problem

https://drive.google.com/open?id=18zNoza6OOHJF4a07Qqge9IR_STCtQLj-

This is how it should be:

https://drive.google.com/file/d/1ugMlc2UpGXLzbT8sIG8P6i40OWtxvsZ3/view?usp=sharing

As before, on desktop it looks good with GPP 1.8.2
It is only the tablet view that gets a bit messy

The dropdowns do work in a responsive view on desktop. However, on an actual iPad they do not drop out at all.

Cheers Andy

[Tom]

Hi there,

I just took a look using my iPad and Chrome and didn’t notice any issues. The home page categories looked good, and the navigation worked nicely (first tap open sub-menu, second tap go to link).

Are you using Chrome or another browser? Have you cleared your browser cookies on the iPad?

[Arnd]

Hi Tom,

Thanks for checking.

The home page categories look good when you are using an 10.5 inch iPad or larger. when I use my older iPad air which is 9.7 inch, the images are all smaller like in the screenshots I sent.

I cleared the cache and cookies on both devices. On first tap, I get straight to that page without the submenu opening. When I press it for long, it does open but disappears immediately when I get off the top menu. This is in landscape.

In portrait view, I am getting the menu button which works fine.

On desktop, I am using Safari and Firefox Developer. The desktop views are all alright though. Even in responsive mode the submenus work. Just not on the iPads itself.

[Arnd]

Hi Tom,

Sorry to bother you again 🙂

I tried with my old iPad 2 and submenus do work. The iPad Pro and the iPad Air are both on iOS 12.2 and it does not as described above.

Cheers Andy

[Arnd]

If I don’t use just a ‘#’ instead of a link in the top menu, the submenus will work on all my devices.

[Tom]

Thanks! I’ll test on 12.2 and will get back to you ASAP.

So when # exists as your menu items, it doesn’t do anything? If you switch it to a real URL, it works? Appreciate the extra info, will help me debug 🙂

[Arnd]

Hi Tom,

When # is the top menu item, the sub menus dropout work. See demo.<mydomain>.eu where I added a menu ‘test’ in the German default version.

All other top menu items contain a real URL – these do not work on my iPad

After you mentioned that these menus work with no problem on your iPad, I checked the woocommerce grid view on my old iPad 2 with iOS 9.3 and these look good there. Not on the newer iPads or in responsive mode on the desktop.

Hope this helps.

Cheers Andy

[David]

Hi there,

any chance you can flush and disable Autoptimize?

[Arnd]

Hi David ,

Autopizimed is flushed and disabled.

Cheers Andy

[Arnd]

Hi David,
It kinda works occasionally but is not consistent.
Andy

[Author]

Posts