Hello,
Try to add the below code to the Customize > Custom CSS section and check it works or not. It seems there is some code conflict with the Elementor stylesheet –
@media only screen and (max-width: 480px) {
.elementor-element.elementor-wc-products ul.products li.product {
width: 50% !important;
}
}
Hi Amit,
That’s fantastic, it worked a treat! Thank you so much.
It’s working great on mobile but not so great on tablet. I amended the code changing the max width to 1024px (as the tablet breakpoint on my setup is 1025px) and changed the width to 25% as I needed to display 4 columns on my tablet and only 2 on mobile.
This also worked great on iPad but it looks like I can only use one or the other. As in if i use the mobile code, it’s great on mobile but not great on iPad and vice versa. I tried putting both codes in but that didn’t work so I assume I need a min and max width option with 25% and 50% set respectively?
I’ve never coded so I’d really appreciate any help!
Thank you
Hello again!
I’ve just managed to crack it by taking a guess at the min-width function. I used te following:
`@media only screen and (max-width: 480px) {
.elementor-element.elementor-wc-products ul.products li.product {
width: 50% !important;
}
}
@media only screen and (max-width: 1024px) and (min-width: 481px) {
.elementor-element.elementor-wc-products ul.products li.product {
width: 20% !important;
}
}`
I decided to go with 5 columns on mobile hence the 20%. It works perfectly except for one issue. In portraint mode when using the iPad it works perfectly however, when the iPad is in landscape mode, it splits the products into 6. As in, it will display 5 products in a row, then a single product with 4 gaps next to it then 5 products in the row below again.
I’ve uploaded these screenshots to show what I mean:
Portrait mode: https://prnt.sc/nk5qf0
Landscape mode: https://prnt.sc/nk5rul
I have a feeling I know what the problem could be: I’m using elementor and the OceanWP theme. The product archives are set to show 6 columns on desktop, 5 on tablet and 2 on mobile. I think OceanWP must have a different responsive breakpoint than my Elementor breakpoint which is 1025px.
I can’t find anywhere to change this breakpoint however. Is this something anyone could help with?
Thanks in advance!
Try to follow the link to fix it for the landscape and portrait mode – https://www.w3schools.com/css/css3_mediaqueries_ex.asp
Hi Amit,
Thanks for that link.
I’ve managed to ‘fix it’ now by using the following code:
@media only screen and (orientation: landscape) {
.elementor-element.elementor-wc-products ul.products li.product {
width: 16.666667% !important;
}
}
It’s nt exactly fixed the problem, it still shows 6 columns in landscape mode on an iPad but at least they are now central. I’m not sure if it will still look okay on other tablets though as I haven’t any others to test.
I think the core issue is that the Products Archive has a different mobile breakpoint than the one set in Elementor which is 1025px for Tablet. What I think is happening is Elementor is loading the page in Tablet mode correctly but the Archive is loading in desktop mode.
Is there a way to change the responsive breakpoints Sitweide in OceanWP? The only place I can see to change this is the mobile menu but I’m looking to change it sitewide.
Thanks in advance!
Currently, there is no option to change the breakpoint in the OceanWP theme.
