columns Content Order for Mobile

Site URL: https://www.karenyeomans.com/videography-portfolio

I want to order the content on this page so the still image corresponds with the moving piece on both desktop and mobile. Desktop hopscotch style as the first block and on mobile correct moving with still. I've tried the following but want it to look like the screen shots attached.

@media screen and (max-width:640px) {

div#block-yui_3_17_2_1_1634571177259_237+.row {

    display: flex;

    flex-direction: column-reverse;

}

}

Hi,

You want, on mobile, show

image

video

image

video

...

?

Hi @tuanphan

Thanks for coming back to me.  Yes that is what I wanted to do!

I've made do with ensuring content is organised by row not column.

I've managed to remove the padding on desktop (almost) but there are some cracks. In an ideal world maybe I could get the content to display as my other pages, on mobile in 2 rows (see portfolio below as example - 0padding). The code I've been fiddling with screen shot (forgive my kitchen sink approach) but was looking at what worked with galleries.

I've changed the URL as Im going to insert to main menu once finished: https://www.karenyeomans.com/video

Any help gratefully received.
Thx
Karen

Try adding to Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-616d75fb7928e208fa3c41ac .span-6 {
    width: 50% !important;
    float: left !important;
}
}

Wooo-hooo! Fantastic! Thank you!

its almost there - Any ideas for the full page bleed to remove the border on the outside? 

/*Full-Bleed - Video Page*/
section[data-section-id="616d75fb7928e208fa3c41ac"]
.sqs-block {
  padding-right: 0;
  padding-left: 0;
  .sqs-block.image-block {
 padding: 0px 0px 0px 0px;
}
  .sqs-block.media-block {
 padding: 0px 0px 0px 0px;
}
.sqs-block {padding: 0! important}  
}
/*Set galleries 2 columns on small tablets & mobile*/
@media screen and (max-width:767px) {
div#page-section-616d75fb7928e208fa3c41ac .span-6 {
    width: 50% !important;
    float: left !important;
  .sqs-block {padding: 0! important}  
}
}

On 10/30/2021 at 3:33 PM, Karen_Ruby said:

Wooo-hooo! Fantastic! Thank you!

its almost there - Any ideas for the full page bleed to remove the border on the outside? 

/*Full-Bleed - Video Page*/
section[data-section-id="616d75fb7928e208fa3c41ac"]
.sqs-block {
  padding-right: 0;
  padding-left: 0;
  .sqs-block.image-block {
 padding: 0px 0px 0px 0px;
}
  .sqs-block.media-block {
 padding: 0px 0px 0px 0px;
}
.sqs-block {padding: 0! important}  
}
/*Set galleries 2 columns on small tablets & mobile*/
@media screen and (max-width:767px) {
div#page-section-616d75fb7928e208fa3c41ac .span-6 {
    width: 50% !important;
    float: left !important;
  .sqs-block {padding: 0! important}  
}
}

use this new code

@media screen and (max-width:767px) {
div#page-section-616d75fb7928e208fa3c41ac .span-6 {
    width: 50% !important;
    float: left !important;
}
body#collection-615c6a28d85a8e599d97bedb .content-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
}

YES! Thank you Thank you @tuanphan LEGEND 🙌