Space between fields in Product Page

  • Resolved msdesignfoto

    (@msdesignfoto)


    4 years, 1 month ago

    Hello

    I changed the theme of my clients’ site to Shopping Cart, and the forms I have already created with a premium plugin now have an extra space between some fields. I thought this could be an issue with that plugin but in the previous theme, this didn’t happen.

    Is there a way to fix this? I mean, to remove the green space in the image here.
    I looked at padding and margins in Chrome’s inspector, everything is set to 0.

    This ia happening in the product pages where I used the Advanced Product Options plugin to set custom text fields.

    Screenshot here

    Thanks

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

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

  • Hi, @msdesignfoto

    Try adding this in Dashboard – Appereance – Customize – Additional CSS in the Customizer

    input[type="text"], input[type="email"], input[type="search"], input[type="password"], textarea, input[type="reset"], input[type="button"], input[type="submit"] {
    margin-bottom: 10px;
}

@media only screen and (max-width: 767px){
input[type="text"], input[type="email"], input[type="search"], input[type="password"], textarea, input[type="reset"], input[type="button"], input[type="submit"] {
    margin-bottom: 5px;
}}

    The first part handles the margin on devices >767px, the second part is for devices <767px in width.

    You can learn how to use the Chrome Developer Tools or Firefox Developer Tools to help you see and test changes to your CSS.

    Hope this helps,
    Kind regards!

    Thread Starter msdesignfoto

    (@msdesignfoto)

    That is great, I tried that code and it works. The css code for the other issue, I tried already and its perfect.

    Now, I noticed the check boxes further down in the product details are still the same, it seems that code doesn’t affect those. I wonder if we could make them a bit closer?

    Thanks already, you have been a great help!

    Please update the CSS snippet above with this one – this includes checkboxes as well:

    input[type="text"], input[type="email"], input[type="search"], input[type="password"], textarea, input[type="reset"], input[type="button"], input[type="submit"], input[type="checkbox"] {
    margin-bottom: 10px;
}

@media only screen and (max-width: 767px){
input[type="text"], input[type="email"], input[type="search"], input[type="password"], textarea, input[type="reset"], input[type="button"], input[type="submit"], input[type="checkbox"] {
    margin-bottom: 5px;
}}

    Let me know if there is any other fields to be included.
    Regards.

    Thread Starter msdesignfoto

    (@msdesignfoto)

    It worked like a charm!

    Thank you very much ?? That is all. Will mark this as solved.

    Thank you again!

    Happy to help! Glad it works!

    Thread Starter msdesignfoto

    (@msdesignfoto)

    Hello again!

    I’m sorry to bring this back up again, but I tried adding a similar line to the code, but this time for the space between the label and the description / input form just bellow it. But didn’t work.

    How can I add the labels to the list of items to reduce the vertical space? We have some products with a lot of options and so much dead pixels between the elements make the scroll a bit too much.

    Thanks!

    Vlad T

    (@vladytimy)

    Hi, @msdesignfoto

    Try 

    .wapf-field-label.wapf--above {
    margin-bottom:0px;
}

    and if that is not enough, add in addition to the above:

    .wapf-field-description {
    padding-top:0px;
}

    Hope this helps,
    Kind regards!

    Thread Starter msdesignfoto

    (@msdesignfoto)

    Ok I tried the first, then both, and I will leave both in CSS. Makes the whole product fields more compact and readable.

    Thank you again for the quick help!

    Regards

    Vlad T

    (@vladytimy)

    Happy to help! Glad it works! ??

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Space between fields in Product Page’ is closed to new replies.