Multicolumn id issue

[collins276]

Hi,

I've created 2 Multicolumn sections. I edit code of Multicolumn 1 on mobile and it also affects Multicolumn 2.

How can I fix that (add id to Multicolumn 1 code?)

Please check my url: https://189ee3-2.myshopify.com 

Thank you,

[collins276]

Hi @Kaiya 

This is the code for Multicolumn 1 section in Mobile view

   .multicolumn-list li:nth-child(2), .multicolumn-list li:nth-child(3) {
    max-width: calc(50% - 2px) !important;
  } 

And this code also affects the Multicolumn 2 section cause they have the same structure, classname. The screen shoot above is Multicolumn 2 section's, its images have uneven heights due to this code. 

[PageFly-Noah]

This is Noah from PageFly - Shopify Page Builder App

I understand if you want only edit multicolumn 1 and not effect multicolumn 2 on mobile. please add code follow here:

<style>
@media screen (max-width: 767px){
    .multicolumn-list .multicolumn-list__item:nth-child(1){
      //your code
   }
    .multicolumn-list .multicolumn-list__item:nth-child(2){
      //your code
   }
   .multicolumn-list .multicolumn-list__item:nth-child(3){
      //your code
   }
   .multicolumn-list .multicolumn-list__item:nth-child(4){
      //your code
   }
}

</style>

Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly

[collins276]

It didn't work because both Multicolumn sections have the same classnames.

[PageFly-Noah]

hi @collins276  please try again code here :

<style>
@media screen (max-width: 767px){
    .multicolumn-list:last-child .multicolumn-list__item:nth-child(1){
      //your code
   }
    .multicolumn-list:last-child .multicolumn-list__item:nth-child(2){
      //your code
   }
   .multicolumn-list:last-child .multicolumn-list__item:nth-child(3){
      //your code
   }
   .multicolumn-list:last-child .multicolumn-list__item:nth-child(4){
      //your code
   }
}

</style>

[collins276]

I added it to the Multicolumn 1 and Multicolumn 2 still got affected🙁. 

How can I add id to Multicolumn 1 code?

  .multicolumn-list li:nth-child(2), .multicolumn-list li:nth-child(3) {
    max-width: calc(50% - 2px) !important;
  } 
  .multicolumn-list:not(.slider) {
    padding-left: unset !important;
    padding-right: unset !important;
  }
  .multicolumn-list li:nth-child(2){
    padding-left:15px;
    padding-right:5px
  }
  .multicolumn-list li:nth-child(3){
    padding-right:15px;
    padding-left:5px
  }

[PageFly-Noah]

Hi you only want add code apply to section here?

[collins276]

Sorry for not clarifying my issue. I want to fix the Multicolumn 1 section so it will not affect Multicolumn 2 section.

The above code is Multicolumn 1 section's.

[PageFly-Noah]

Hi @collins276  Please add code here:

  .multicolumn-list:nth(1) li:nth-child(2), .multicolumn-list li:nth-child(3) {
    max-width: calc(50% - 2px) !important;
  } 
  .multicolumn-list:nth(1):not(.slider) {
    padding-left: unset !important;
    padding-right: unset !important;
  }
  .multicolumn-list:nth(1) li:nth-child(2){
    padding-left:15px;
    padding-right:5px
  }
  .multicolumn-list:nth(1) li:nth-child(3){
    padding-right:15px;
    padding-left:5px
  }

[collins276]

This code also changes the Multicolumn section 1 from the left pic into the right pic🙄

[PageFly-Noah]

Iam sorry. I mean you can use code    .multicolumn-list:nth(1)    to be able to edit multicolumn-list 1 without affecting multicolumn-list 2.

[collins276]

That's all good. I meant the Multicolumn 1 and Multicolumn 2 Sections

[PageFly-Noah]

Yes. Look good. hehe !

[collins276]

But this is how Multicolumn 2 looks in Mobile view☹️. That's why I want to add Id to Multicolumn 1 section code.

[PageFly-Noah]

You want fix it in Multicolumn 2. If you want i can help you ? please explain more .

[collins276]

Multicolumn 2 got that look due to Multicolumn 1 code. So I want to add Id to Multicolumn 1 section so it would not affect Multicolumn 2.

This is Multicolumn 1 code

  .multicolumn-list li:nth-child(2), .multicolumn-list li:nth-child(3) {
    max-width: calc(50% - 2px) !important;
  } 
  .multicolumn-list:not(.slider) {
    padding-left: unset !important;
    padding-right: unset !important;
  }
  .multicolumn-list li:nth-child(2){
    padding-left:15px;
    padding-right:5px
  }
  .multicolumn-list li:nth-child(3){
    padding-right:15px;
    padding-left:5px
  }

Because they are the both Multicolumn, so they have the same classnames. Hope that's clear enough to you.

[PageFly-Noah]

Oke this is code Multicolumn 1. and what code you want add to Multicolumn 2?

[collins276]

I don't want to add any code to the Multicolumn 2, because any code added to the Multicolumn 2 , it would hit Multicolumn 1 too. (Multicolumn 1 & 2 have the same classnames). So I just want to add Id to Multicolumn 1.

[PageFly-Noah]

Yes. if you want add code only multicolumn 1. you need change  .multicolumn-lis to .multicolumn-list:nth-child(1) ,  and if you want add code multicolumn 2.  you need chang  .multicolumn-list to .multicolumn-list:nth-child(2)

The value :nth-child(1)  or :nth-child(2) it will set    .multicolumn-list  in position 1 or or position 2
So code only apply in multicolumn-list 1 is here:

  .multicolumn-list:nth-child(1) li:nth-child(2), .multicolumn-list:nth-child(1) li:nth-child(3) {
    max-width: calc(50% - 2px) !important;
  } 
  .multicolumn-list:nth-child(1):not(.slider) {
    padding-left: unset !important;
    padding-right: unset !important;
  }
  .multicolumn-list:nth-child(1) li:nth-child(2){
    padding-left:15px;
    padding-right:5px
  }
  .multicolumn-list:nth-child(1) li:nth-child(3){
    padding-right:15px;
    padding-left:5px
  }

 Please try again, thank you.

[collins276]

This is the result after adding the code

 

[PageFly-Noah]

Yes.  code above will help you set .multicolumn-list 1,  it will apply css for multicolumn-list 1 and  multicolumn-list 2 will error.

if you want set to multicolumn-list 2 you need add code here:

  .multicolumn-list:nth-child(2) li:nth-child(2), .multicolumn-list:nth-child(2) li:nth-child(3) {
    max-width: calc(50% - 2px) !important;
  } 
  .multicolumn-list:nth-child(2):not(.slider) {
    padding-left: unset !important;
    padding-right: unset !important;
  }
  .multicolumn-list:nth-child(2) li:nth-child(2){
    padding-left:15px;
    padding-right:5px
  }
  .multicolumn-list:nth-child(2) li:nth-child(3){
    padding-right:15px;
    padding-left:5px
  }

[collins276]

Sorry but I think I'm not that clear to you.

1. This is after adding your code for Multicolumn 1 section

2. This is after adding your code for Multicolumn 2 section

3. This is after adding both codes

Whatever I add, they will affect each other.

4. This is the look I want to achieve.

That's why I only want to add Id (not just classnames) to Multicolumn 1 section. Sorry for wasting your time.

[PageFly-Noah]

Hi @collins276  There may be some problems here. I'm really sorry. because yesterday I was on leave. so I can't reply to your message early

[collins276]

I've got it covered, thank you😊

[PageFly-Noah]

Wow. Great. Thank you !