Creating two portfolio columns in mobile version

Site URL: https://www.monumentalpictures.co.uk/team

Hi there,

I am looking to have two columns on the mobile version for the attached URL.

Please advise 🙂

Hi. What is password?

Apologies its MP123

On 5/19/2021 at 6:27 PM, Billy1996 said:

Apologies its MP123

Do/will you use Personal or Business Plan?

Business plan 🙂

On 6/10/2021 at 4:49 AM, Billy1996 said:

Business plan 🙂

Add to Settings > Advanced > Code Injection > Footer > Then save & check on real mobile

<script>
jQuery(document).ready(function($){
if (jQuery(window).width() < 767) {
// first 2 rows
$('div#page-section-603932b959b9f47abfa16923>.row:nth-child(3)>.span-4:first-child').insertAfter('div#page-section-603932b959b9f47abfa16923>.row:nth-child(2)>.span-4:nth-child(3)');
});
</script>
<style>
  @media screen and (max-width:767px) {
  div#page-section-603932b959b9f47abfa16923 .span-4 {
    width: 50% !important;
    float: left !important;
}
    div#page-section-603932b959b9f47abfa16923 .span-4:nth-child(2n+1) {
    clear: left;
}
  }
</style>

Amazing Tuanphan thank you so much.

I think due to the difference in image sizing its made the mobile version slightly uneven now.

Ideally I would have the formation so that it has two on every line. The bottom 4 images are all even sizes so that should be easier but if you were able to recommend code that ensures there are two images on each line that would be great!

Thanks,

Billy

ah sorry, the code missing a symbol. Remove above & Try this new code > then check again on real mobile

<script>
jQuery(document).ready(function($){
if (jQuery(window).width() < 767) {
// first 2 rows
$('div#page-section-603932b959b9f47abfa16923>.row:nth-child(3)>.span-4:first-child').insertAfter('div#page-section-603932b959b9f47abfa16923>.row:nth-child(2)>.span-4:nth-child(3)');
} });
</script>
<style>
  @media screen and (max-width:767px) {
  div#page-section-603932b959b9f47abfa16923 .span-4 {
    width: 50% !important;
    float: left !important;
}
    div#page-section-603932b959b9f47abfa16923 .span-4:nth-child(2n+1) {
    clear: left;
}
  }
</style>

Hey Tuanphan,

Great thanks for that. It has fixed the portrait images but the square ones are still in a single column below them. Is there any way of fixing this?

Thanks again for your help!

Try new code

<script>
jQuery(document).ready(function($){
if (jQuery(window).width() < 767) {
// first 2 rows
$('div#page-section-603932b959b9f47abfa16923>.row:nth-child(3)>.span-4:first-child').insertAfter('div#page-section-603932b959b9f47abfa16923>.row:nth-child(2)>.span-4:nth-child(3)');
  // next 2 rows
  $('div#page-section-603932b959b9f47abfa16923>.row:nth-child(4)>.span-3').insertAfter('div#page-section-603932b959b9f47abfa16923>.row:nth-child(4)>.span-9>.row>.span-3:nth-child(3)');
} });
</script>
<style>
  @media screen and (max-width:767px) {
  div#page-section-603932b959b9f47abfa16923 .span-4, div#page-section-603932b959b9f47abfa16923>.row:nth-child(4)>.span-9 .span-3 {
    width: 50% !important;
    float: left !important;
}
    div#page-section-603932b959b9f47abfa16923 .span-4:nth-child(2n+1), div#page-section-603932b959b9f47abfa16923>.row:nth-child(4)>.span-9 .span-3:nth-child(2n+1) {
    clear: left;
}
  }
</style>

Amazing thanks so much for your help.

Finally would you be able to do the same thing for the homepage, so that the productions and team are in two columns as well?

Really appreciate it!

On 6/18/2021 at 7:46 PM, Billy1996 said:

Amazing thanks so much for your help.

Finally would you be able to do the same thing for the homepage, so that the productions and team are in two columns as well?

Really appreciate it!

Don't remove any code in above code. Add this to last line in Code Injection Footer

<script>
jQuery(document).ready(function($){
if (jQuery(window).width() < 767) {
$('div#page-section-603d158a9295ad0aaf7d07b8 .span-12>.row:nth-child(4) .span-4').appendTo('div#page-section-603d158a9295ad0aaf7d07b8 .span-12>.row:nth-child(3)');
  $('div#page-section-603d1f94cfad7f5152a710c3>.row:nth-child(2) .span-8 .span-4').appendTo('div#page-section-603d1f94cfad7f5152a710c3>.row:nth-child(2)');
   $('div#page-section-603d1f94cfad7f5152a710c3>.row:nth-child(3) .span-4').appendTo('div#page-section-603d1f94cfad7f5152a710c3>.row:nth-child(2)');
  $('div#page-section-603d1f94cfad7f5152a710c3>.row:nth-child(4)>.span-3').appendTo('div#page-section-603d1f94cfad7f5152a710c3>.row:nth-child(4)>.span-9 .span-3');
} });
</script>
<style>
  @media screen and (max-width:767px) {
  div#page-section-603d158a9295ad0aaf7d07b8 .span-12>.row:nth-child(3) .span-4, div#page-section-603d1f94cfad7f5152a710c3>.row:nth-child(4)>.span-9 .span-3 {
    width: 50% !important;
    float: left !important;
}
    div#page-section-603d158a9295ad0aaf7d07b8 .span-12>.row:nth-child(3) .span-4:nth-child(2n+1), div#page-section-603d1f94cfad7f5152a710c3>.row:nth-child(4)>.span-9 .span-3:nth-child(2n+1) {
    clear: left;
}
  }
</style>

Hey Tuanphan,

Thanks for that.

The captions are now too high and cropped out of the picture frame and it hasn't seemed to work properly for the 'team' on the homepage?

If it is too much don't worry I can revert back to how it was but would be good to have it all cleaned up 🙂
 

Thanks again!

18 hours ago, Billy1996 said:

Hey Tuanphan,

Thanks for that.

The captions are now too high and cropped out of the picture frame and it hasn't seemed to work properly for the 'team' on the homepage?

If it is too much don't worry I can revert back to how it was but would be good to have it all cleaned up 🙂
 

Thanks again!

Don't remove above code. Add this to Code Injection Header

<style>
  /* Homepage-Team */
  @media screen and (max-width:767px) {
  div#page-section-603d1f94cfad7f5152a710c3 .span-4 {
    width: 50% !important;
    float: left !important;
}
    div#page-section-603d1f94cfad7f5152a710c3 .span-8 {
    display: none;
}
    div#page-section-603d1f94cfad7f5152a710c3>.row:nth-child(4)>.span-9 .span-3 {
    width: 100% !important;
    float: none !important;
}
    div#page-section-603d1f94cfad7f5152a710c3>.row:nth-child(4)>.span-9 .span-3 .image-block {
    width: 40% !Important;
    clear: none !important;
    float: left !important;
}
  }
</style>

Hey Tuanphan,

Have done that but it is still off.

The captions are still cropped out of certain images and image size (some have change the original scale and some are really small) is now a bit all over the place.

On 6/22/2021 at 8:07 PM, Billy1996 said:

Hey Tuanphan,

Have done that but it is still off.

The captions are still cropped out of certain images and image size (some have change the original scale and some are really small) is now a bit all over the place.

 

 

Can you add me as a contributor? I can test & add code faster

You can send me a message to do this

Hey Tuanphan,

Have sent you a message adding you as contributor and have left the code in to show the issue.

Let me know if you need anything else 🙂

Thanks again

Hi Tuanphan,

I have now added more team members and as a result the code no longer reflects the layout. 

Could you please advise new code for both the 'team' tab and the homepage so that all team members are in two columns?

(password: MP123)

Thanks so much

On 7/1/2021 at 9:17 PM, Billy1996 said:

Hi Tuanphan,

I have now added more team members and as a result the code no longer reflects the layout. 

Could you please advise new code for both the 'team' tab and the homepage so that all team members are in two columns?

(password: MP123)

Thanks so much

Hi. I think you can try adding with Summary Block or Gallery. Will be easier to make 2 columns on mobile.

Thanks Tuanphan,

I have made a gallery below on the homepage, replicating the 'team' which does achieve the two columns in mobile.

Would you be able to advise code on how I could replicate the two lines and differing font of the team images above?

I have added <span> to the image descriptions but would ideally like to have the two lines of different colours and fonts.

Hi sorry to double up on replies but with the text overlay CSS I have added, the links no longer click through on the mobile version, could you please advise on this?

Thanks again!

On 7/5/2021 at 6:13 PM, Billy1996 said:

Hi sorry to double up on replies but with the text overlay CSS I have added, the links no longer click through on the mobile version, could you please advise on this?

Thanks again!

Hi. Can you share link to page where you used gallery? I don't see it on /team page

MP123

https://www.monumentalpictures.co.uk/team