Make form fields inline

  • Resolved timothyquinlan

    (@timothyquinlan)


    3 years, 2 months ago

    To view the page you need:

    username: msvkwhpcew
    password: nKv8WwxeED123

    You will see that the form fields are a bit of a mess. That is because the theme uses the display:flex properly for the add to cart buttons on the store. This is causing the gift card fields unusable.

    My question is, can I target the gift card product area ONLY to use display:inline without affecting the add to cart buttons throughout the rest of the website?

    Any ideas would be so helpful!

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Support Christian Rodríguez

    (@christianrh)

    Hello there,

    hope you are doing well! ??

    Add the following CSS code in “Appearance > Customize > Additional CSS”

    .product.product-type-gift-card form.gift-cards_form.cart {
	flex-flow: row wrap;
}

.product.product-type-gift-card form.gift-cards_form.cart h3{
    flex: 1 0 100%;
}

.product.product-type-gift-card form.gift-cards_form.cart input{
    flex: 1 0 100%;
    min-width: 100%;
}

.product.product-type-gift-card form.gift-cards_form.cart h5{
    margin-top: 7em;
}

.product.product-type-gift-card form.gift-cards_form.cart .gift_card_template_button.variations_button {
	display: flex;
}

.product.product-type-gift-card form.gift-cards_form.cart .gift_card_template_button.variations_button .quantity.mkd-quantity-buttons div div {
	width: 146px;
    display: flex;
    margin: 0 35px;
    align-items: center;
    padding-right: 50px;
}

    Let us know any news.

    Have a good day!

    Thread Starter timothyquinlan

    (@timothyquinlan)

    That is AMAZING, it looks absolutely perfect. Thank you so much Christian!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Make form fields inline’ is closed to new replies.