custom css showing on tablet/phone but not in browsers

  • Near the bottom of my homepage is my newsletter. I used the html widget in Elementor to add the newsletter code. Below is the before editing image. After adding it I altered some appearance with css styling (code is below). The part that has me completely baffled is when logged in as admin all looks correct, when I preview it looks correct, on my phone and tablet it looks correct. On Chrome, Edge, Explorer it looks like the before pic? I have tried clearing cache, restarting my computer, waited from last night to today and did the same thinking maybe CDN was an issue, but still the same. The newsletter title is an Elementor text widget and has nothing to do with newsletter code. Any help or advice will be greatly appreciated.

    https://imgur.com/ouPM2yc this is the before editing
    https://imgur.com/p9wlTgT this is how it looks on phone/tablet/editor

    Here is the custom css used…

    
.tnp-subscription input.tnp-submit {
  background-color: #134ed7!important;
  width: -webkit-fill-available!important;
}

input[type="submit"]:hover {
  background-color: #02AD00!important;
}

.tnp-subscription input[type=checkbox], .tnp-widget input[type=radio] {
    max-width: 20px;
    display: inline-block!important;
}
    • This topic was modified 6 years, 2 months ago by Jan Dembowski.

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

Viewing 6 replies - 1 through 6 (of 6 total)

  • When I look at your page, I see it like you show in your “before” image. I searched for your custom css, but it is not loaded. Perhaps it is the minifying plugin?
    Also, is your CSS exactly like you posted? There should be a space before the ! everywhere.

    • This reply was modified 6 years, 2 months ago by Joy.
    Thread Starter Michael

    (@famsource)

    Thank you Joy. I am using WP Fastest Cache. And SiteOrigin CSS. I just adjusted to add the space where you mentioned. What would cause this to show on ipad/iphone and the editor but not in the browsers. It would seem the css is somewhere if its showing on the phone and tablet right??

    Thread Starter Michael

    (@famsource)

    The other part that throws me off is the title “Famsource Newsletter” is an Elementor text widget and not part of the css I am trying to change. But somehow it is losing its styling also…of course only in the browsers!

    Thread Starter Michael

    (@famsource)

    I just tried clearing everything again after your mention of the space before ! and it seems like some of the styling has implemented. The submit button is full width in Chrome but not in Edge and IE. Tablet and phone are still correct also. I seem to be good at causing odd errors. Does it look better/different on your end?

    Thread Starter Michael

    (@famsource)

    Seems like the starred line below is the culprit in Edge and IE. I guess they don’t like that code?! Is there another way to code that line so that the submit button will stretch across like in Chrome and the after picture from above? I am new to all of this so any help with the wording would be great!

    .tnp-subscription input.tnp-submit {
    background-color: #134ed7!important;
    ** width: -webkit-fill-available !important; **
    }

    Moderator Jan Dembowski

    (@jdembowski)

    Forum Moderator and Brute Squad

    Moved to Fixing WordPress, this is not a Developing with WordPress topic.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘custom css showing on tablet/phone but not in browsers’ is closed to new replies.