Here’s a guide:
XS: (below 480px) [mobile portrait icon]
SM: (480px and 766px) [mobile landscape icon]
MD: (767px and 978px) [tablet icon]
LG: (979px to 1199px) [laptop icon]
XL: (1200px and up) [computer icon]
On the edit mode, you’re editing in
LG size, you can see on one of your screenshots that the
LG on Cell Layout is the one highlighted.
But when you preview the page on the frontend it previews the
XL that is why you’re still seeing the first cell not spanning across 2 columns, try to reduce the size of your browser under 1199px and you will see your
LG layout. If you have not yet, please watch the video #3 and #4 of this playlist to understand how the Cell Placement works.
Regarding the Image responsive issue, we need to consider the Aspect Ratio of your image the 600x300 (
2:1) and 300x300 (
1:1) will respond differently.
That is the option in the Image element called object-fit you can set that to
cover, that is not going to squished or stretch your image, but it will crop. You need to compromise.
Please see this article to understand how image responsive works.
Hope that helps,