C9 Blocks conflict on Checkout page

  • Resolved charliesjc

    (@charliesjc)


    4 years, 1 month ago

    Hi,
    I discovered a small issue with C9 Blocks (Or it could even be the theme I’m using, but I’ll post the issue for them as well):

    I use KadenceWP theme. With C9 Blocks enabled the woocommerce checkout page gets messed up and squashes everything in the left column all the way to the left. I have worked out that it is likely a specificity problem with the .col-1 and .col-2 classes that have their max-width set at 8.33%. This overrides the normal setting on the checkout page of 100%. The problem goes away as soon as I disable C9 blocks and seems to be unchanged if I disable the additional Kadence blocks plugin.

    My temporary fix which seems to work is this:

    div#customer_details > div.col-1, div.col-2 {
    flex: unset;
    max-width: 100%;
}

    I included the flex property because it also is set to 8.33% and although it doesn’t seem to make a difference I disabled it anyway just in case something else tries to modify it for the page.

    Loving these blocks otherwise!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author covertnine

    (@ttoomey)

    Yo Charles!

    Excited to hear that you are using C9 Blocks with Kadence theme cause I hadn’t tested that one.

    I have come across this exact issue awhile back. We have some code in our themes that fixes this issue as it’s a conflict of column names coming from Bootstrap + WooCommerce. (IIRC)

    
.woocommerce-page .col-1,
.woocommerce-page .col-2 {
	max-width: none;
}

.woocommerce-checkout .col-1,
.woocommerce-checkout .col-2 {
	padding-left: 0;
	padding-right: 0;
}

    We have that line of code in our themes should you want to give one of our starter themes a shot, but it does make sense to add that to the blocks plugin and keep it in compliance with WooCommerce, so look for that in a future release.

    If you haven’t, check out our starter themes that all work 100% with C9 Blocks.

    Starter Themes
    https://c9.covertnine.com – C9 Starter
    https://work.covertnine.com – C9 Work
    https://music.coertnine.com – C9 Music Single Page concept
    https://togo.covertnine.com – C9 Togo should be on www.ads-software.com in the next week or so

    We have child themes and an animation plugin if you sign up for our early access list–it’s all free.

    https://www.covertnine.com/form/beta

    -Tim

    Thread Starter charliesjc

    (@charliesjc)

    Hey Tim,
    Thanks for the reply.

    Ah I see. When I removed the .col-1 or .col-2 in developer tools that also solved the problem.

    I’ll be giving the C9 themes a go for my next couple of projects. I would’ve used it for the site I discovered the problem on, but I only found you guys after I’d basically finished everything on Kadence!

    I’m already on your early-access and have downloaded the whole lot.

    Cheers,
    Dale

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘C9 Blocks conflict on Checkout page’ is closed to new replies.