Product page styling broken

crazyd943
(@crazyd943)

4 years, 6 months ago

Hello,

I’m having trouble formatting the gift card product page. With both the default hook placement and placing via Elementor elements, the formatting is really off.

Firstly the layout is squashed and inline, the text and buttons also ignore site defaults so the ability to style those also would be great.

Please see link – the issue is apparent.

Any help you could offer in fixing the styling would be much appreciated!

Kind regards

The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)

Juan Coronel
(@juaancmendez)

4 years, 6 months ago
Hi there,
we hope you’re doing well!

From what we can see, Elementor adds extra styles that intervene with ours. In order to correct the display error, add this CSS in Appearance > Customize > Additional CSS:
```
.woocommerce div.product.elementor form.cart:not(.grouped_form):not(.variations_form) {
  flex-direction: column !important;
}
```
Give it a try and let us know any news, please.

Have a nice day!
Thread Starter crazyd943
(@crazyd943)

4 years, 6 months ago
Hi Juan,

Thanks for getting back to me.
The above CSS has fixed the layout of the Gift Card product form, thanks!

Could you also please suggest css for styling the headings and buttons in the form so I can style them more in line with the rest of the site? If you could give a rough framework or similar I can substitute in the existing styling css used elsewhere.

Much appreciated!
- This reply was modified 4 years, 6 months ago by crazyd943.
Juan Coronel
(@juaancmendez)

4 years, 6 months ago

Hi there,

Could you send us an image explaining in more detail the changes you want? We will gladly help you.

We will be attentive to your response.

Have a nice day!

Thread Starter crazyd943
(@crazyd943)

4 years, 6 months ago

Hi Juan,

Please see this image: https://ibb.co/XjHgc1V

Cheers!
Plugin Support Christian Rodríguez
(@christianrh)

4 years, 6 months ago
Hello there,

hope you are doing well 🙂

For the image aspect ratio try the following CSS code:
```
.product.product-type-gift-card form.gift-cards_form.cart .ywgc-design-list .ywgc-preset-image img {
	height: unset;
}
```
You can change the font with this rule and your desired font-family:
```
.product.product-type-gift-card form.gift-cards_form.cart h3, .product.product-type-gift-card form.gift-cards_form.cart h5 {
	font-family: ;
}
```
The button styles can be changed with this CSS rule (set your desired values):
```
.product.product-type-gift-card form.gift-cards_form.cart .gift-cards-list button.ywgc-predefined-amount-button {
	background-color: !important;
  	color: !important;
        font-family: ;
  	font-size: ;
  	padding: !important;
}
```
About the checkbox positioning you can fix it with this code:
```
.product.product-type-gift-card form.gift-cards_form.cart .ywgc-delivery-notification-checkbox-container {
	display: flex;
 	align-items: center;
    justify-content: right;
}

.product.product-type-gift-card form.gift-cards_form.cart .ywgc-delivery-notification-checkbox-container  .gift-card-content-editor.step-content input {
  	width: auto;
  	margin-right: 10px;
}
```
Let us know any news, please.

Have a nice day!
Thread Starter crazyd943
(@crazyd943)

4 years, 6 months ago

Hi Christian,

Thank you very much, that has worked like a charm!

The only exception is the notification checkbox I’m afraid – https://ibb.co/sRRGrVL
Héctor.G
(@hectorgc)

4 years, 6 months ago
Hi there,

Please, try this new CSS
```
.gift-card-content-editor.step-content input{
   width: 20px;
}
```
Let us know, please.

Have a nice day!