Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • January 20, 2022 at 2:12 pm #1336360
    TakiwaSoulArt

    Hi,

    I have added the newsletter signup form for Mailchimp on one page. Unfortunately, it does not adapt to the screen width on the mobile devices under 767px width. What code would I need for this.

    A second question would be: on my I-Phone 7 the headline fonts are displayed with a different font than I saved them.

    Thanks for the help and links to screenshots and website are in private content.

    Many greetings, Sabine

    Translated with http://www.DeepL.com/Translator (free version)

    January 21, 2022 at 5:06 am #1336454
    Rikard

    Hey Sabine,

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

    @media only screen and (max-width: 479px) {
.responsive .avia_ajax_form .form_element {
    width: 90%;
}
}

    Could you post a screenshot of the problem you are seeing on your phone please?

    Best regards,
    Rikard

    January 21, 2022 at 10:57 am #1336519
    TakiwaSoulArt

    Hi Rikard,

    1. thank you, it works with 70% – but now, the text in the text in the “send – button” is not completely – like in the screenshot before.
    2. A second question would be: on my I-Phone 7 the headline fonts are displayed with a different font than I saved them.

    Thank you so much for the first help and it would be wonderful if you could help me by the rest.

    Kind regards
    Sabine

    January 24, 2022 at 3:55 am #1336807
    Nikko

    Hi Sabine,

    1. Please modify the code so it looks like this:

    @media only screen and (max-width: 479px) {
  .responsive .avia_ajax_form .form_element {
    width: 70%;
  }

  .responsive .avia_ajax_form .form_element.av-last-visible-form-element {
    width: 100%;
  }
}

    2. Are you using Safari? if yes, what version? try including a .woff font file when you upload the custom font.

    Best regards,
    Nikko

    January 25, 2022 at 3:03 pm #1337090
    TakiwaSoulArt

    Hi Niko,

    I tried the .woff font and it works perfect – thank you so much.

    The code for the “send” field of the newsletter-form didn’t work. Actually, there should be a line break so that the text appears complete. The button itself is adjusted to the smartphone width with 70%, but the text is not wrapped.

    I would need help again please.

    Thank you so much.

    Best regards, Sabine

    January 26, 2022 at 3:45 am #1337190
    Ismael

    Hi,

    According to the following thread, wrapping a long text will not work in an input element. Adding a line break will not work either. You may need to shorten the input value or text, or adjust its font size on mobile view.

    // https://stackoverflow.com/questions/5286663/wrapping-text-inside-input-type-text-element-html-css

    To adjust the font size, use this css.

    .modified_width .button {
    font-size: 11px;
}

    Best regards,
    Ismael

    January 26, 2022 at 11:01 am #1337242
    TakiwaSoulArt

    Hi,

    thank you, I adjusted the font size and it worked.

    You can close the topic. Thank you so much

    and kind regards, Sabine

    January 26, 2022 at 2:44 pm #1337300
    Rikard

    Hi,

    Great, I’m glad that you got it working, and thanks for the update. I’ll go ahead and close this thread for now then, please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Responsive newsletter signup customization’ is closed to new replies.