Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • February 10, 2024 at 10:19 pm #1433950
    designmek

    I can’t figure out how to fix the overlap title text int he woocommerce cart address change form:

    View post on imgur.com

    I’m ok with one of two options, having the text outside of the box, or making the field taller so that the input text does not overlap. any suggestions?

    shortwave.coffee is the webpage

    February 11, 2024 at 11:40 am #1433976
    Rikard

    Hey designmek,

    Please try the following in Quick CSS under Enfold->General Styling:

    .wc-block-components-combobox .wc-block-components-combobox-control label.components-base-control__label {
  top: -27px;
}

    Best regards,
    Rikard

    February 11, 2024 at 5:57 pm #1434004
    designmek

    Hi Rikard,
    Thanks for your help. i had to add !important; however it only fixed the country and state fields. City and Zipcode still show as an overlay.

    View post on imgur.com

    February 12, 2024 at 3:38 am #1434044
    Ismael

    Hi,

    Thank you for the screenshot.

    Is the issue only visible on mobile view? If so, then you can try this css code to hide the label when the input field is active. 

    @media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  .wc-block-components-form .wc-block-components-text-input.is-active label,
  .wc-block-components-text-input.is-active label {
    opacity: 0;
  }
}

    If the issue is also happening on desktop view, remove the css media query.

      .wc-block-components-form .wc-block-components-text-input.is-active label,
  .wc-block-components-text-input.is-active label {
    opacity: 0;
  }

    Best regards,
    Ismael

    February 12, 2024 at 6:23 am #1434050
    designmek

    It was on desktop too. The code below did the trick.

    If the issue is also happening on desktop view, remove the css media query.

    .wc-block-components-form .wc-block-components-text-input.is-active label,
    .wc-block-components-text-input.is-active label {
    opacity: 0;
    }

    Thanks!

    February 12, 2024 at 8:22 am #1434057
    Rikard

    Hi,

    Great, I’m glad to hear that Ismael could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.