Responsive Classic Redesign Support thread

[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/belveder...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/belveder...oducts_id=2668

Any suggestions on how to fix these?

Thank you

[chadlly2003]

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/belveder...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/belveder...oducts_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
}

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

[nicksab]

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.

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.

[nicksab]

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

[chadlly2003]

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

[nicksab]

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

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

[nicksab]

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

[chadlly2003]

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?