CSS for Submit Button

  • Resolved muree24

    (@muree24)


    6 years, 7 months ago

    Hi everyone,

    I did search the forum and read what I could on this topic, but I still need help. I have applied custom CSS on the submit button that you can see on my landing page (muriha.com) when accessing from a desktop. I can also see the changes when I’m in editing mode. However, when I go to the URL from mobile, I don’t see the CSS being applied there. It is the default grey button with black text. This is the code that I have entered in Theme Customizer:

    .yikes-easy-mc-form .submit-button-inline-label {
    width: 10% !important;
    margin-top: 23px !important;
    color: white !important;
    }

    Based on a forum I read, I tried to add the code below in addition to the code above, and noticed that on mobile, the button changed the background from grey to white, and added a border with a drop shadow on the button. That doesn’t reflect on the desktop site (it still shows the changes that I want). Seems like it’s only not reflecting on mobile?!

    This is the code I got from another forum:

    .yikes-easy-mc-form .yikes-easy-mc-submit-button {
    background-color: #ffffff;
    background: #ffffff;
    font-size: 16px;
    border: none;
    }

    Edit: after tons of refreshing, the grey border with the drop shadow went away. can someone just tell me the easy way to get the button to work on both mobile and desktop. i don’t think i need both sets of code…

    • This topic was modified 6 years, 7 months ago by muree24.

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Contributor Tracy Levesque

    (@liljimmi)

    🏳️‍🌈 YIKES, Inc. Co-Owner

    6 years, 7 months ago

    Hi @muree24,

    Your theme may have media-query styles that are applying CSS to buttons at mobile screen widths.

    You can use a tool like http://www.responsinator.com/ to see where the change occurs and then inspect the styles and change them in your custom CSS.

    Thank you!
    -Tracy

    Thread Starter muree24

    (@muree24)

    6 years, 7 months ago

    Hi @liljimmi,

    Thanks for replying, however I don’t find responsinator helpful. It shows a white button with a black border, which is what I was already seeing through mobile. How do I know if my theme (Divi) has media-query styles? What changes can I make to my custom CSS that I haven’t already and would fix the issue?

    Edit: I found articles on media query styles, hoping this will help:

    /*** Responsive Styles Smartphone Portrait ***/
    @media all and (min-width: 479px) {

    }

    • This reply was modified 6 years, 7 months ago by muree24.
    • This reply was modified 6 years, 7 months ago by muree24.
Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘CSS for Submit Button’ is closed to new replies.