Calendar popup border and “send” button negative margin

  • Resolved carcayu80

    (@carcayu80)


    2 years, 11 months ago

    the page were I am practising with your plugin:

    https://www.sientemarruecos.viajes/viajar/marruecos-magico-copy/

    Even making CSS customs by my own, there are still some design issues I cannot fix. Could you please help me?

    1. In the head of the calendar, there is no border. I mean, it is like the whole of the border interrupts just when it pass through the weekdays part. Also, it seems in the head that the background is a little grey. Screenshot:

    https://i.imgur.com/35NYhAB.jpg

    2. The “send” button seems fine in desktop, but not in smartphone. It seems it creates, only in smartphone, a negative margin, so it “floats” over the next part of the web. Screenshot.

    https://i.imgur.com/A24PcMX.jpg

    3. Finally, I’m pretty sure it is not a issue, but: Theres any way to make the popup calendar the same width than the rest of the fields? In desktop it is like 1 px bigger, and in smartphone it is much smaller. Screenshot (left, desktop, right, smartphone)

    https://i.imgur.com/bEO1dow.jpg

    Thanks a lot in advance.

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

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Support Kris – WPMU DEV Support

    (@wpmudevsupport13)

    Hi @carcayu80

    It seems that Forminator conflicts with your theme or another plugin on the site. I also see that the site uses autoptimize plugin. Could you temporarily disable autoptimize and see does issue will be gone?

    If not please add this code into Appearance -> Customize -> Additional CSS to fix 2 reported issues:

    /*calendar fix*/
#ui-datepicker-div .ui-datepicker-calendar thead th {background:none !important;}
#ui-datepicker-div .ui-datepicker-calendar thead th span {background:#f5f5f5; border-radius:0;}

/*formiator button mobile issue*/
@media all and (min-width:320px) and (max-width: 768px) {
#forminator-module-33062 {overflow:hidden;}
}

    3rd issue is not an issue as this width is fixed to be square all the time. However, please consider this code:

    /*calendar mobile width 100%*/
@media all and (min-width:320px) and (max-width: 768px) {
#ui-datepicker-div {width:95% !important;}
#ui-datepicker-div .ui-datepicker-calendar {width:105% !important;}
}

    Kind Regards,
    Kris

    pro-tip; you can disable Autoptimize on a per-request basis by adding ?ao_noptimize=1 to the URL.

    if the problem is not there at that point, some autoptimize (re-)configuration might be needed to fix this. there are troubleshooting tips and info on how to exclude in the AO FAQ.

    hope this helps debugging,
    frank (ao dev)

    Thread Starter carcayu80

    (@carcayu80)

    Thanks both!

    It seems it is not an autoptimize conflict. I have also tried deactivating two more plugins with no results.

    Anyway, I need all my plugins and the css custom code fix it very well.

    Thanks a lot. Really, support is surprisingly fast and efficient even for a paid plugin, but in this case it is also free.

    Thread Starter carcayu80

    (@carcayu80)

    Sorry, an update. This kind of code:

    /*formiator button mobile issue*/
    @media all and (min-width:320px) and (max-width: 768px) {
    #forminator-module-33062 {overflow:hidden;}
    }

    Is only useful if the number of the contact form is “33062”. As soon as I duplicate this, then it is not useful

    How can I do to enable this fix for ALL forms?

    Hello @carcayu80 !

    In this case you can change the selector to:

    .forminator-custom-form {overflow:hidden;}

    This will cause the code to be applied to all Forminator forms regardless of the ID.

    Best regards,
    Pawel

    Thread Starter carcayu80

    (@carcayu80)

    Thanks!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Calendar popup border and “send” button negative margin’ is closed to new replies.