Mobile product layout has changed?

[Klarity]

Hi Guys,

The shop page layout seems to have changed on a mobile device.

The shop pages used to show products 2 wide on a page and now seems to show only 1 wide?

I would ideally like the layout 2 wide on mobiles please.

Any help on this would be greatly appreciated.

Best
Pete

[mccaul]

Not sure if this is related to you recently fixing an issue with the masonry layout causing the page height to be miscalculated resulting in the footer being placed on top of the images…

It seems like you’ve changed the page structure in a strange way.

Where previously the products were a list… they now seem to simply be divs, but still inside a

, which can’t make much sense?

used to be

<li product><li product>

now it’s

<div product></div><div product></div>

which is’t semantically correct, and is likely to cause funny/unexpected interpretation in different browsers I’d have guessed…

[David Martin – Support]

Hi,

My latest version does not output like that, I get the correct <li> format. How are you building that page?

Can you add a WP login so I can take a closer look.

– David.

[Klarity]

I can see Div’s rather than the List html in the source as Mccaul has explained.
Could this have something to do with the way the Muilt Masonary shop layout is setup? just a thought?

[Klarity]

Also, the products are displayed in 2 columns when you view on a phone in landscape…

[David Martin – Support]

Hi @designward,

Please add a link and WP login to your site so I can take a closer look as I cannot replicate this.

– David.

[Klarity]

This reply has been marked as private.

[David Martin – Support]

Hi,

When you say mobile, assuming you mean mobile phone size such as the iPhone? You would need to use some custom CSS, for example:

@media only screen and (max-width: 479px) {
.woocommerce .products .product {
    width: 50%!important;
    float: left;
}
}

Thanks,
David.

[Klarity]

Hi David,

I think this slightly different css has resolved the issue.
Many thanks,

Pete

[David Martin – Support]

Great, no problem.
– David.