Responsive Classic Redesign Support thread

[nicksab]

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/keqsw...=02ojoj81&dl=0

2)https://www.dropbox.com/scl/fi/nlz5v...=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

[nicksab]

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

https://www.dropbox.com/scl/fi/f9wos...=edtx9psr&dl=0

[chadlly2003]

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

https://www.dropbox.com/scl/fi/f9wos...=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.

[nicksab]

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.

[chadlly2003]

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;
	}
}

[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;}

}

[dbltoe]

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

[chadlly2003]

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;}

}

[nicksab]

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