CSS Media queries not working on custom css

  • Resolved javpb

    (@javpb)


    1 year, 8 months ago

    I’m using this code in custom css for a mailpoet form on my local web development:

    .mailpoet_text,
    .mailpoet_textarea {
    width: 80%;
    margin-left: auto!important;
    margin-right: auto!important;
    font-family: “JetBrains Mono”,”Roboto Mono”,sans-serif;
    font-size: 14px;
    line-height: 18px;
    font-weight: 500;
    text-transform: uppercase;
    }

    @media?screen and (min-width: 768px) and (max-width: 1023px) {
    .mailpoet_text,
    .mailpoet_textarea {
    width: 70%;
    }
    }

    But Mailpoet is avoiding the media query tag, causing that only 70% width is represented, even qhen the condition is outside the media query.

    Mailpoet is inserting the code inside a style text/css tag an deleting media queries. Like that:

     #mailpoet_form_1 .mailpoet_form { margin-bottom: 4em; }

    mailpoet_form_1 .mailpoet_column_with_background { padding: 10px; } mailpoet_form_1 .mailpoet_form_column:not(:first-child) { margin-left: 20px; } mailpoet_form_1 .mailpoet_paragraph { line-height: 20px; margin-bottom: 20px; } mailpoet_form_1 .mailpoet_segment_label, #mailpoet_form_1 .mailpoet_text_label, #mailpoet_form_1 .mailpoet_textarea_label, #mailpoet_form_1 .mailpoet_select_label, #mailpoet_form_1 .mailpoet_radio_label, #mailpoet_form_1 .mailpoet_checkbox_label, #mailpoet_form_1 .mailpoet_list_label, #mailpoet_form_1 .mailpoet_date_label { display: block; font-family: “JetBrains Mono”,”Roboto Mono”,sans-serif; font-size: 14px; line-height: 18px; font-weight: 500; text-transform: uppercase; } mailpoet_form_1 .mailpoet_text, #mailpoet_form_1 .mailpoet_textarea, #mailpoet_form_1 .mailpoet_select, #mailpoet_form_1 .mailpoet_date_month, #mailpoet_form_1 .mailpoet_date_day, #mailpoet_form_1 .mailpoet_date_year, #mailpoet_form_1 .mailpoet_date { display: block; } mailpoet_form_1 .mailpoet_text, #mailpoet_form_1 .mailpoet_textarea { width: 80%; margin-left: auto !important; margin-right: auto !important; font-family: “JetBrains Mono”,”Roboto Mono”,sans-serif; font-size: 14px; line-height: 18px; font-weight: 500; text-transform: uppercase; } mailpoet_form_1 .mailpoet_checkbox_label { width: 80% !important; margin-left: auto !important; margin-right: auto !important; } mailpoet_form_1 .mailpoet_submit { padding: 15px 30px 15px 30px !important; font-family: “Unica One”,sans-serif; font-size: 16px; font-weight: bold; color: black; -webkit-writing-mode: horizontal-tb !important; -ms-writing-mode: lr-tb !important; writing-mode: horizontal-tb !important; letter-spacing: normal; word-spacing: normal; text-indent: 0px; text-shadow: none; display: inline-block; text-align: center; align-items: flex-start; box-sizing: border-box; border: 2px solid black; border-color: black !important; -o-border-image: initial; border-image: initial; background-color: transparent; text-decoration: underline; margin-left: 10% !important; } mailpoet_form_1 .mailpoet_submit:hover { background-color: #b2b2b2; color: white; border-color: white !important; } mailpoet_form_1 .mailpoet_divider { } mailpoet_form_1 .hr-newsletter-separador { margin-bottom: -2px; } mailpoet_form_1 .mailpoet_message { } mailpoet_form_1 .mailpoet_form_loading { width: 30px; text-align: center; line-height: normal; } mailpoet_form_1 .mailpoet_form_loading > span { width: 5px; height: 5px; background-color: #5b5b5b; } mailpoet_form_1 .mailpoet_text, #mailpoet_form_1 .mailpoet_textarea { width: 70%; }#mailpoet_form_1{border-radius: 0px;text-align: left;}#mailpoet_form_1 form.mailpoet_form {padding: 0px;}#mailpoet_form_1{width: 100%;}#mailpoet_form_1 .mailpoet_message {margin: 0; padding: 0 20px;}#mailpoet_form_1 .mailpoet_paragraph.last {margin-bottom: 0} @media (max-width: 500px) {#mailpoet_form_1 {background-image: none;}} @media (min-width: 500px) {#mailpoet_form_1 .last .mailpoet_paragraph:last-child {margin-bottom: 0}} @media (max-width: 500px) {#mailpoet_form_1 .mailpoet_form_column:last-child .mailpoet_paragraph:last-child {margin-bottom: 0}}

    Can you please provide me help with this? I need to stylize my form depending on screen size. I need to use media queries.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter javpb

    (@javpb)

    I’ve found that, when I write the media queries on the mailpoet-public.css file using !important on the rules, these media queries seem to work. But I think that maybe this is not the most elegant solution and also I have doubts about if an update could break the changes on that css file

    • This reply was modified 1 year, 8 months ago by javpb.
    Plugin Support Ojoma a11n

    (@geraltrivia)

    Hello there @javpb ,

    Thank you for reaching out to us.

    I understand that you are experiencing issues with adding custom CSS to your Mailpoet form in WordPress and wanting to utilize media queries to style your form based on screen size.

    To add your Mailpoet custom CSS to your WordPress site, you can follow these steps:

    • Log in to your WordPress admin dashboard.
    • Navigate to “Appearance” and then click on “Customize”.
    • In the Customizer panel, look for the “Additional CSS” option.
    • Click on “Additional CSS” and a text field will appear.
    • Add your custom CSS code to this text field.
    • Please copy and paste your CSS code into the “Additional CSS” field and click on the “Publish” button to save your changes.

    Your CSS code should look like this:

    /* CSS code for your Mailpoet form */
    @media screen and (min-width: 768px) and (max-width: 1023px) {
    .mailpoet_text,
    .mailpoet_textarea {
    width: 70%;
    }
    }

    .mailpoet_text,
    .mailpoet_textarea {
    width: 80%;
    margin-left: auto!important;
    margin-right: auto!important;
    font-family: “JetBrains Mono”,”Roboto Mono”,sans-serif;
    font-size: 14px;
    line-height: 18px;
    font-weight: 500;
    text-transform: uppercase;
    }


    Please let me know if you have any further questions or need any additional assistance.

    Have a great day.

    Plugin Author Bruna a11n

    (@bruberries)

    Hey @javpb,

    We haven’t heard back from you in a while, so I’m going to mark this as resolved – we’ll be here if and/or when you are ready to continue.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘CSS Media queries not working on custom css’ is closed to new replies.