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