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,

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

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.

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

hi @collins276 please try again code here :

[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