We cloned a site today that uses Elementor, our intention to use Oxygen Builder.
Pages created using Toolset and Gutenburg should be unchanged however our grid no longer scales. CSS and everything is the same and I can't work out why.
This the original site - the grid scales down fine: hidden link
This the new site - the grids wont scale down in size: hidden link
I'm frustrated not to see something obvious however I just can't see why Toolset Grids wont scale.
Thank you for contacting us and I'd be happy to assist.
I'm not sure exactly what you meant from "the grid scales down", but the only thing I noticed different on the new page is that on the smaller screens, the grid images extend beyond the available width.
The reason for that is the following CSS code, which is included in the old page, but not the new one:
The image thumbnail size selected for that view's images is not wide enough that it can cover the available width.
To fix this, you can:
1. Select a different image thumbnail size, which has more width.
OR
2. You can change the wrapping grid class from "col-sm-4 col-sm-6" to "col-sm-6 col-md-4".
This will make sure that on medium screens that grid shows in three columns and only switches to two columns, on smaller screens.
(right now, it switches to 2 columns even on medium screens)
There is another option of using custom CSS code to force the images to cover the full available width, but that will result in stretching and pixelation, so I'll not recommend that.
I can't think of any update from Toolset plugins that could affect this.
What's happening is that the view's output is switched to two columns when the screen becomes smaller than 1280 px.
And the image is not able to cover the full width starting from the screen width of 1279 px up to 1025 px.
(from 1024 px the container is narrowed down enough that the images are wide enough to cover the full-width)
As shown in the attached screenshot, the available width to cover the container at the widest point of this problem (i.e. 1279 px) is 575 px, which means to naturally solve this, you'll have to change the image's thumbnail width from 373 px to 575 px.
( this much increase in the image's size shouldn't significantly affect the page speed )
If you'd like to keep the image's thumbnail size and the column numbers the same as they're now, then you'll have to include some custom CSS code in the view to force the images to cover the full-width:
"you'll have to change the image's thumbnail width from 373 px to 575 px."
When I did this the images were not right on desktop? Happy to change them on your recommendation however what is it I need to do so it works on desktop 'and' smaller screens please?
It seems that you've shared the example link with me from the actual website but the last screenshot which showed the images stretching beyond the container from this development website, whose access details you've shared now.
If you'll try the larger image thumbnail size on the actual website, you won't see the images stretching the same as they're on the development website. The reason is that some safety CSS styles are being loaded on the actual website just to avoid this, but not on the development one: