Css question

  • Resolved AmberRose612

    (@amberrose612)


    6 years, 10 months ago

    Hi!

    I love your plugin, but am having one small problem with editing the styling. When I use Dev Tools and view the mobile view (iphone 6/7/8/X), the mailchimp easy form in the center of the homepage of my website doesn’t align properly, extends onto two lines and makes the background image I’ve set repeat which doesn’t look good.

    In my stylesheet, I’ve assigned the following:

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

    .yikes-easy-mc-form .submit-button-inline-label {
    width: 10%;
    min-width: 65px;
    float: left;
    }

    But for some reason it seems to be being overwritten by the default of:

    .yikes-easy-mc-form .submit-button-inline-label {
    width: 20%;
    min-width: 90px;
    float: left;
    }

    as the css that I’ve put in is crossed out in Chrome Dev Tools and displays the latter on the mobile view.

    Am I doing something wrong, or just missing something simple? How can I style just the mobile version of Easy Forms for Mailchimp?

    Thanks so much!

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Contributor yikesitskevin

    (@yikesitskevin)

    Hello @amberrose612,

    Very nice to hear someone familiar with using Chrome’s DevTools!

    I checked out your website but I think you’ve temporarily changed the form.

    In terms of your styles, I think you’re just missing a pair of {}. Media queries should be wrapped in curly braces like this:

    @media only screen and (max-width: 480px) {
    .yikes-easy-mc-form .submit-button-inline-label {
        width: 10%;
        min-width: 65px;
        float: left;
    }
}

    If you’re still having issues, change the form back to how it was and I can help you style it.

    Cheers,
    Kevin.

    Thread Starter AmberRose612

    (@amberrose612)

    Hi Kevin!

    Thanks for your fast reply. Dev Tools is the best ??

    I haven’t temporarily changed the form, and also, I’m sorry, I forgot the put in the extra set of curly brackets in my above post, but in my CSS they are there.

    I’ve attached a screenshot of the issue, with the devtools css that is appearing, and below (the crossed out styles) are the ones I’ve written in and would like to be appearing for mobile view.

    I’ve hosted the screenshot here, on a mockup site of the one I’m actually working on:
    https://thevanproject.foxiestudio.com/wp-content/uploads/2018/04/Screen-Shot-2018-04-25-at-12.20.55-pm.png

    Again, link to the original site I want the changes to appear is: https://thevanproject.com

    Hope that’s more helpful! Thanks for any direction you can give!

    -Amber

    Plugin Contributor yikesitskevin

    (@yikesitskevin)

    Agh, I see the form now. Not sure what was happening there.

    By using a more specific selector, we can override the styles without needing to use the !important flag.

    Try this:

    @media only screen and (max-width: 480px) {
    .empty-form-inline-label.submit-button-inline-label {
        width: 10%;
        min-width: 65px;
        float: left;
    }
}

    Cheers,
    Kevin.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Css question’ is closed to new replies.