Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Content Order for Mobile


Karen_Ruby

Question

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;

}

}

Screenshot 2021-10-18 at 17.05.56.png

Screenshot 2021-10-18 at 17.08.02.png

Link to comment
  • Answers 6
  • Created
  • Last Reply

Top Posters For This Question

6 answers to this question

Recommended Posts

  • 0

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

 

Screenshot 2021-10-27 at 16.14.44.png

Screenshot 2021-10-27 at 16.15.47.png

Screenshot 2021-10-27 at 16.15.59.png

Screenshot 2021-10-27 at 16.16.49.png

Screenshot 2021-10-27 at 16.17.02.png

Link to comment
  • 0

Try adding to Design > Custom CSS

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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}  
}
}

Screen Shot 2021-10-30 at 09.28.31.png

Link to comment
  • 0
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}  
}
}

Screen Shot 2021-10-30 at 09.28.31.png

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...