Multicolumn id issue

collins276
Trailblazer
213 1 32

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,

 

09c6c3aa0f50a00ef941 (1).jpg

 

 

Replies 24 (24)
collins276
Trailblazer
213 1 32

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
Shopify Partner
1156 205 232

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

collins276
Trailblazer
213 1 32

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

PageFly-Noah
Shopify Partner
1156 205 232

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>

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

collins276
Trailblazer
213 1 32

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
Shopify Partner
1156 205 232

Screen Shot 2024-04-08 at 14.51.53.png

Hi you only want add code apply to section here?

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

collins276
Trailblazer
213 1 32

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

 

Screenshot (2).png

 

The above code is Multicolumn 1 section's.

PageFly-Noah
Shopify Partner
1156 205 232

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
  }

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

collins276
Trailblazer
213 1 32

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

 

Screenshot (7).pngScreenshot (4).png

PageFly-Noah
Shopify Partner
1156 205 232

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.

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

collins276
Trailblazer
213 1 32

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

Screenshot (8).pngScreenshot (3).png

PageFly-Noah
Shopify Partner
1156 205 232

Yes. Look good. hehe !

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

collins276
Trailblazer
213 1 32

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

 

09c6c3aa0f50a00ef941 (1).jpg

 

PageFly-Noah
Shopify Partner
1156 205 232

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

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

collins276
Trailblazer
213 1 32

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
Shopify Partner
1156 205 232

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

collins276
Trailblazer
213 1 32

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
Shopify Partner
1156 205 232

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.

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

collins276
Trailblazer
213 1 32

This is the result after adding the code

 

Screenshot (3).pngScreenshot.png 

 

PageFly-Noah
Shopify Partner
1156 205 232

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
  }



Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

collins276
Trailblazer
213 1 32

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

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

 

1426770d90993fc76688.jpgdb2369028e9621c87887.jpg

 

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

 

70ca7588981c37426e0d.jpgc03e0f70e2e44dba14f5.jpg

 

3. This is after adding both codes

 

1426770d90993fc76688.jpgdb2369028e9621c87887.jpg

Whatever I add, they will affect each other.

 

4. This is the look I want to achieve.

c03e0f70e2e44dba14f5.jpgdb2369028e9621c87887.jpg

 

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

PageFly-Noah
Shopify Partner
1156 205 232

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

collins276
Trailblazer
213 1 32

I've got it covered, thank you😊

PageFly-Noah
Shopify Partner
1156 205 232

Wow. Great. Thank you !

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.