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]

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]

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.