fudjshop
Forum Replies Created
-
Forum: Themes and Templates
In reply to: [OceanWP] Page layout breaking on product pages on tabletHi Amit,
Hiope you’re well. Just wondering if you had a chance to look at the images I uploaded?
Kind regards,
Oz
Forum: Themes and Templates
In reply to: [OceanWP] Page layout breaking on product pages on tabletHi Amit,
Thanks for the reply. The issue doesn’t appear on desktop or even tablet in landscape mode. It only appears on an iPad held in portrait mode or at certain screen resolutions which I checked on Screenfly.
I’ve uploaded the screenshots here: https://imgur.com/a/Pwv4Rlo
Hope it makes sense, it’s just bizarre that a page works absolutely fine when used anywhere on the site but as soon as it is used as a product page, it appears to break
Hi Amit,
Thanks, I’ve just tried that but the popup stopped appearing altogether :/
Hi Amit,
Thanks for this!
It works great but just one small issue, when I click on the ‘x’, the popup disappears as it should but the screen is still left with a grey overlay. Once I click on the screen, this goes away too.
Is there anyway of having the grey overlay not appear at all?
Thanks Amit, that’s great!
I’ve managed to sort it using the above. At least temporarily anyway
Hi Amit,
Thanks for the reply, I’ve disabled all plugins but the issue still occurs. Is there any way of solving the issue even temporarily through CSS?
Hi,
I’ve tried switching to the Hello Elementor theme but no difference. I’ve also changed to the default Twenty Nineteen WordPress theme – that’s even worse – I only get 3 products per row on desktop even when it’s set to 6 🙁
Hi Amit,
Thanks for the reply – it’s the archive template I’m editing in Elementor but on the Archvive Widget, theres no option to change number of products per row – a message shows stating that it needs to be done through Woocommerce customize
I forgot to add that this was working about 2 months ago when I was working on the site, I’ve just come back to it after a break and found it’s stopped working – I’ve not changed anything since.
Forum: Themes and Templates
In reply to: [OceanWP] Default List View for mobile onlyHi 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!
Forum: Themes and Templates
In reply to: [OceanWP] Default List View for mobile onlyHello 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/nk5rulI 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!
Forum: Themes and Templates
In reply to: [OceanWP] Default List View for mobile onlyHi 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