Jump to content

Creating two portfolio columns in mobile version

Recommended Posts

  • Replies 21
  • Created
  • Last Reply

Top Posters In This Topic

  • 3 weeks later...
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

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

 

Link to comment

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

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!

Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

 

Screenshot_20210622_140337_com.android.chrome.thumb.jpg.c73519b0ef38889e0e456051e0253b57.jpg

 

Screenshot_20210622_140345_com.android.chrome.thumb.jpg.b0acd2a8e550f64f0a8f0b407f592263.jpg

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

You can send me a message to do this

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

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

Link to comment
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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

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.

 

 

Screen Shot 2021-07-05 at 11.25.48.png

Screen Shot 2021-07-05 at 11.25.39.png

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.