Responsive Classic Redesign Support thread

While I am still trying to figure out the whole checkout layout when using the plugin One Page Checkout, I have 2 more display problem

• I replaced the "...more info" by the Buy Now button since most of my products have attribute. However, when the product is on sale, the button don't line up.

https://www.royal-fleur.com/belvedere/index.php?main_page=index&cPath=25

• My product have a text input attribute for delivery date. However, the text ("desired delivery date") is not display the same way as the other attribute ( bold blue text vs regular

https://www.royal-fleur.com/belvedere/index.php?main_page=product_info&cPath=25&products_id=2668

Any suggestions on how to fix these?

Thank you

nicksab:

While I am still trying to figure out the whole checkout layout when using the plugin One Page Checkout, I have 2 more display problem

• I replaced the "...more info" by the Buy Now button since most of my products have attribute. However, when the product is on sale, the button don't line up.

https://www.royal-fleur.com/belvedere/index.php?main_page=index&cPath=25

• My product have a text input attribute for delivery date. However, the text ("desired delivery date") is not display the same way as the other attribute ( bold blue text vs regular

https://www.royal-fleur.com/belvedere/index.php?main_page=product_info&cPath=25&products_id=2668

Any suggestions on how to fix these?

Thank you

The misalignment is happening because sale items include additional text, like the 'Save 20% off' message. You could try hiding that line, but even then, long product titles will still cause layout issues. So it's not just the sale text—lengthy titles will create the same problem.

Just need to style the input for the product page to get the date style your looking for
line:2613

find

#productAttributes input[type="text"] {
     margin-bottom: 0px;
 }

change it to

#productAttributes input[type="text"] {
     margin-bottom: 0px;
     color: #761bc9;
     font-weight:900;
 }

this is to center your buy now button on the product listing page **(just a suggestion)

line 1104
find

#productListing .gridlayout .list-more {
	margin: auto;
	width: 30% 
}

replace with

#productListing .gridlayout .list-more {
	width: 30% 
        display:flex;
        justify-content:center;
}

line 3996
this is the re-size the "buy now button on product listing". **(just a suggestion)
to make button smaller you can change the flex style 1 to 0.7 or your desired size

find

 #productListing .gridlayout .button_buy_now {
     float: none;
}
  

change to

 #productListing .gridlayout .button_buy_now {
     float: none;
     flex-grow:1
}

I said " long product titles will still cause layout issues."

I meant to say... It not a layout issue. It the flex style wrapping around your content. Any website template will do the same....

chadlly2003:

Just need to style the input for the product page to get the date style your looking for
line:2613

find

#productAttributes input[type="text"] {
margin-bottom: 0px;
}

> 
> change it to
> ```
#productAttributes input[type="text"] {
     margin-bottom: 0px;
     color: #761bc9;
     font-weight:900;
 }

Not quite it. It changes the text within the input box. I was referring to the option name above it.

Not sure but somehow this on line 2257 from stylesheet_zcustom.css

  .optionName {
     color: #761bc9;
     margin-bottom: 0.3rem !important;
 }

gets overwritten by the label class css on line 264 in stylesheet_color.css

label {
	font-size: 0.9rem;
	font-weight: 400;
	line-height: 1.5;
	color: #000;
	text-align: left;
	margin-bottom: .5rem;
	display:block;
}

I can't change the color there or all label will be affected obviously.

chadlly2003:

this is to center your buy now button on the product listing page **(just a suggestion)

line 1104
find

#productListing .gridlayout .list-more {
margin: auto;
width: 30%
}

> replace with
> 
> ```
#productListing .gridlayout .list-more {
	width: 30% 
        display:flex;
        justify-content:center;
}

line 3996
this is the re-size the "buy now button on product listing". **(just a suggestion)
to make button smaller you can change the flex style 1 to 0.7 or your desired size

find

#productListing .gridlayout .button_buy_now {
float: none;
}

> 
> change to 
> 
> ```
 #productListing .gridlayout .button_buy_now {
     float: none;
     flex-grow:1
}

Thank you for the suggestion. I will try and see how it looks.

chadlly2003:

I said " long product titles will still cause layout issues."

I meant to say... It not a layout issue. It the flex style wrapping around your content. Any website template will do the same....

I understand that. I just thought maybe the "buy now" button could have a fixed position at the bottom of the product card.

Kind of like glue to the bottom regardless of the content between image and button. Honestly not sure that s even possible though. Just an idea

nicksab:

I understand that. I just thought maybe the "buy now" button could have a fixed position at the bottom of the product card.

Kind of like glue to the bottom regardless of the content between image and button. Honestly not sure that s even possible though. Just an idea
I think i can come up with something that might work. Let me play around too be continued. I look at it as a challenge. My theory is anything can be accomplished.

to change the color of Desired Delivery Date
stylesheet_zcustom.css

add this to the top of stylesheet_zcustom.css

.attribsInput {
 color:#761bc9;
 font-size:1.1em;
 font-weight:bold;
} 

chadlly2003:

I think i can come up with something that might work. Let me play around too be continued. I look at it as a challenge. My theory is anything can be accomplished.

to change the color of Desired Delivery Date
stylesheet_zcustom.css

add this to the top of stylesheet_zcustom.css

.attribsInput {
color:#761bc9;
font-size:1.1em;
font-weight:bold;
}

thank you

Nick try this and let me know if it works. This should align all buttons at the bottom of the container

path: stylesheet.css
line:1104

find

#productListing .gridlayout .list-more {
	margin: auto;
	width: 30% 
}
#indexCategories .gridlayout .list-more {
	margin: auto;
	width: 30% 
}

replace with

#productListing .gridlayout .list-more {
	margin: auto;
	width: 30% 
	margin-top:auto;
	margin-bottom:0px 
}
#indexCategories .gridlayout .list-more {
margin: auto;
	width: 30% 
	margin-top:auto;
	margin-bottom:0px;
}


.centerBoxContentsProducts.centeredContent.back.gridlayout {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  min-height: 100%; /* or set a fixed height like 500px if needed */
  box-sizing: border-box;
}

.centerBoxContentsProducts.centeredContent.back.gridlayout .moreinfoLink {
  margin-top: auto;
}

chadlly2003:

Nick try this and let me know if it works. This should align all buttons at the bottom of the container

path: stylesheet.css
line:1104

find

#productListing .gridlayout .list-more {
margin: auto;
width: 30%
}
#indexCategories .gridlayout .list-more {
margin: auto;
width: 30%
}

> 
> replace with 
> ```
#productListing .gridlayout .list-more {
	margin: auto;
	width: 30% 
	margin-top:auto;
	margin-bottom:0px 
}
#indexCategories .gridlayout .list-more {
margin: auto;
	width: 30% 
	margin-top:auto;
	margin-bottom:0px;
}


.centerBoxContentsProducts.centeredContent.back.gridlayout {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  min-height: 100%; /* or set a fixed height like 500px if needed */
  box-sizing: border-box;
}

.centerBoxContentsProducts.centeredContent.back.gridlayout .moreinfoLink {
  margin-top: auto;
}

it looks so much better for regular and on sale product.

Only the "call for price" and "sold out" would need some retouching but that's because I am using a "buy now" button instead of "...more info" link.

For these particular product, i will to find a way to hide that "buy now" if the product in call for price or sold out.

In regards to my One Page Checkout display issue on desktop, I belive I find the issue.

It has something to do with this code in zcustom.css

 @media (min-width: 992px) {

line 3892

     #contentMainWrapper {
         display: grid;
         grid-template-columns: auto 1fr auto;
     }

Is it necessary for the template to work?

It displays fine if I set it to ```
grid-template-columns:100%

or 

grid-template-columns:auto

However, I have no idea if it is safe or if it would create issues somewhere else or under other viewport

Thanks for the help

nicksab:

it looks so much better for regular and on sale product.

Only the "call for price" and "sold out" would need some retouching but that's because I am using a "buy now" button instead of "...more info" link.

For these particular product, i will to find a way to hide that "buy now" if the product in call for price or sold out.

In regards to my One Page Checkout display issue on desktop, I belive I find the issue.

It has something to do with this code in zcustom.css

@media (min-width: 992px) {

> 
> line 3892
> 
> ```
     #contentMainWrapper {
         display: grid;
         grid-template-columns: auto 1fr auto;
     }

Is it necessary for the template to work?

It displays fine if I set it to ```
grid-template-columns:100%

> 
> or 
> 
> ```
grid-template-columns:auto

However, I have no idea if it is safe or if it would create issues somewhere else or under other viewport

Thanks for the help

try this it wont impact any other pages
just add this to the very top of styleheet_zcustom.css

 #loginBody #contentMainWrapper {
	grid-template-columns:auto !important;
}

With OPC checkout what do you want it to look like? Or what is the issue?

chadlly2003:

try this it wont impact any other pages
just add this to the very top of styleheet_zcustom.css

#loginBody #contentMainWrapper {
grid-template-columns:auto !important;
}

Thank you I will give that a try

> With OPC checkout what do you want it to look like?  Or what is the issue?

Here is 2 screenshots ( still can't upload image on ZC, I get a quota exceed error):

1)[https://www.dropbox.com/scl/fi/keqswlp5bijm1lv6supc5/Screenshot\_30-9-2025\_154843\_www.royal-fleur.com.jpeg?rlkey=3tyeb6dgeow51l7ijju7jdxkn&st=02ojoj81&dl=0](https://www.dropbox.com/scl/fi/keqswlp5bijm1lv6supc5/Screenshot_30-9-2025_154843_www.royal-fleur.com.jpeg?rlkey=3tyeb6dgeow51l7ijju7jdxkn&st=02ojoj81&dl=0)

2)[https://www.dropbox.com/scl/fi/nlz5vil2zlzpw0svcoren/Screenshot\_30-9-2025\_154820\_ppcp.zctest.com.jpeg?rlkey=w2zmsbkibido2w4spu21n3nla&st=lmk3g8fn&dl=0](https://www.dropbox.com/scl/fi/nlz5vil2zlzpw0svcoren/Screenshot_30-9-2025_154820_ppcp.zctest.com.jpeg?rlkey=w2zmsbkibido2w4spu21n3nla&st=lmk3g8fn&dl=0)

#1 is my actual site where you can see the checkout being restricted to hal the page somehow.

#2 is a sample site ( courtesy of lat9 sample site using ZC original responsive template) where you can see the checkout take the full page and centered. 

so basically I would like to reproduce #2 display into my site. Just haven't figure out yet what s happening in # 1

I just noticed also the cart layout gets a bit messed when using OPC

https://www.dropbox.com/scl/fi/f9woscy1f8exq2faewc4f/Screenshot-2025-09-30-at-16-24-06-Same-Day-Flower-Delivery-by-your-Local-Florist.png?rlkey=6z60d25vxymria6t05vjeyi1y&st=edtx9psr&dl=0

nicksab:

I just noticed also the cart layout gets a bit messed when using OPC

https://www.dropbox.com/scl/fi/f9woscy1f8exq2faewc4f/Screenshot-2025-09-30-at-16-24-06-Same-Day-Flower-Delivery-by-your-Local-Florist.png?rlkey=6z60d25vxymria6t05vjeyi1y&st=edtx9psr&dl=0

Nick

I TRIED TO USE THE PRODUCT IMAGE YOU SHOWED IN THE EXAMPLE TO TRY AND REPLICATE THE ISSUE IN THE CHECKOUT WHERE YOU SAID IT DOES NOT LOOK CORRECT. i WAS UNSUCCESSFUL.

AS FAR AS OPC You are correct it looks horrible. i AM BUSY FOR THE NEXT DAY OR SO BUT my plan is to just download opc to the template and style it up to the correct format. This way no one will have the issue you are facing.

Give me a few days and I will give you the css needed to make it look good. TOO BE CONTINUED.

chadlly2003:

Nick

I TRIED TO USE THE PRODUCT IMAGE YOU SHOWED IN THE EXAMPLE TO TRY AND REPLICATE THE ISSUE IN THE CHECKOUT WHERE YOU SAID IT DOES NOT LOOK CORRECT. i WAS UNSUCCESSFUL.

AS FAR AS OPC You are correct it looks horrible. i AM BUSY FOR THE NEXT DAY OR SO BUT my plan is to just download opc to the template and style it up to the correct format. This way no one will have the issue you are facing.

Give me a few days and I will give you the css needed to make it look good. TOO BE CONTINUED.

Thank you. I did a few css mods as well but it is a work in progress.

Nick lets start with the login page.

I need you to replace your login.css with this with the code below.
That should make OPC look nice via the login page. I will send you the opc section shortly.

.opc-block-2 {
	width: 48%;
	float: left;
}
.opc-block-3 {
	width: 33.33%;
	float: left;
}
.opc-block > div, .opc-block > label {
	padding: 7px;
}
.opc-block hr {
	width: 95%;
}
.opc-head {
	font-size: larger;
	font-weight: bold;
}
.opc-label {
	padding-top: 5px;
}
@media (max-width:992px){
	.opc-block {
		width: 100%;
	}
	.opc-block-2 {
		width: 100%;
		margin-left:0rem;
	}
	.opc-block-2:nth-child(3) {
		width: 100%;
		float: none;
		margin-left:0rem;
	}
}
#loginBody #contentMainWrapper {
	grid-template-columns:auto !important;
	justify-content:center;
}
@media (min-width:992px){
	.opc-block-2:nth-of-type(1){
		float: left;
		margin-right:2rem;
	}
}
@media (min-width:1200px){
	.opc-block-2:nth-of-type(1){
		float: left;
		margin-right:3rem;
	}
}

Nick,

For the OPC guest login here is the css. Please note it wont look good just yet. We need to make a couple of more adjustments in the html. Put this up and let me know oncer complete so i could finish this up for you. Just need to see what it looks like on your site before i make the next change.

add this to the very bottom of you stylesheet_zcustom.css

#contentMainWrapper {display:flex !important;}

.opc-view {
 position: relative;
 z-index: 2;
 box-shadow: 3px 3px 5px 6px #ccc;
 margin-bottom: 2rem;
 border: solid 1px #ccc;
 background: #fff;
 padding:1rem;
 padding-bottom: 2rem;
}

#checkoutOneShipto {margin:1rem;}
#checkout_payment .clearBoth {display:none !important;}




@media (min-width: 992px) {
#checkoutoneBody .floatingBox {width:49%;}
#checkoutOneShoppingCart {float:left;width:49%; margin-left:1rem;}

}

In doing this, are you not bypassing the settings that are part of OPC's optional login page layout settings?

dbltoe:

In doing this, are you not bypassing the settings that are part of OPC's optional login page layout settings?

He already configured the login page layout through the admin panel. We're simply making it work with the customizations he made to match his website’s design.

However, on the OPC checkout page, when selecting "Guest Checkout," we’ll need to adjust some HTML to achieve the look he's going for—unless it's something that can be handled through the backend, which I don’t believe is possible but could be wrong.

chadlly2003:

Nick,

For the OPC guest login here is the css. Please note it wont look good just yet. We need to make a couple of more adjustments in the html. Put this up and let me know oncer complete so i could finish this up for you. Just need to see what it looks like on your site before i make the next change.

add this to the very bottom of you stylesheet_zcustom.css

#contentMainWrapper {display:flex !important;}

.opc-view {
position: relative;
z-index: 2;
box-shadow: 3px 3px 5px 6px #ccc;
margin-bottom: 2rem;
border: solid 1px #ccc;
background: #fff;
padding:1rem;
padding-bottom: 2rem;
}

#checkoutOneShipto {margin:1rem;}
#checkout_payment .clearBoth {display:none !important;}

@media (min-width: 992px) {
#checkoutoneBody .floatingBox {width:49%;}
#checkoutOneShoppingCart {float:left;width:49%; margin-left:1rem;}

}

nick made one small error i just noticed.  Use this instead

#checkoutoneBody #contentMainWrapper {display:flex !important;}

.opc-view {
position: relative;
z-index: 2;
box-shadow: 3px 3px 5px 6px #ccc;
margin-bottom: 2rem;
border: solid 1px #ccc;
background: #fff;
padding:1rem;
padding-bottom: 2rem;
}

#checkoutOneShipto {margin:1rem;}
#checkout_payment .clearBoth {display:none !important;}

@media (min-width: 992px) {
#checkoutoneBody .floatingBox {width:49%;}
#checkoutOneShoppingCart {float:left;width:49%; margin-left:1rem;}

}

chadlly2003:

nick made one small error i just noticed. Use this instead

#checkoutoneBody #contentMainWrapper {display:flex !important;}

.opc-view {
position: relative;
z-index: 2;
box-shadow: 3px 3px 5px 6px #ccc;
margin-bottom: 2rem;
border: solid 1px #ccc;
background: #fff;
padding:1rem;
padding-bottom: 2rem;
}

#checkoutOneShipto {margin:1rem;}
#checkout_payment .clearBoth {display:none !important;}

@media (min-width: 992px) {
#checkoutoneBody .floatingBox {width:49%;}
#checkoutOneShoppingCart {float:left;width:49%; margin-left:1rem;}

}

Chad,

Thank you for doing  all the work and sorry for the delay response. I was in bed sick for the last couple days.

I made the changes and it  looks much  better now. 

The cart part is still a bit "awkward" looking specially the total price line

How can i get the input field a bit smaller so they don t over-extend. 

Thank you for all the great help with this