Custom CSS not working on mobile

  • Hi everyone.

    I’m having trouble customizing the contact form submit button on mobile.

    I use the following code on the additional CSS in the WordPress panel, which is working just fine on pc. 

    .wpcf7 input[type="submit"] {
	width: 200px;
	color: #242424;
	font-size: 15px;
	font-weight: 700;
  background: #29C7B3;
  padding: 15px 25px 15px 25px ;
  border: 2px solid #29C7B3 ;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
 }

    It should work on mobile as well as I can see with the mobile layout preview on firefox console :

    https://i.postimg.cc/HkctN1r5/cf7-btn-style-firefox-devtool.jpg

    But on actual mobile devices I get this result :

    https://i.postimg.cc/RZkT5ptY/cf7-btn-style-mobile.jpg

    Any ideas where the problem could come from ?

    Thanks.

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

  • Hi,
    You caan add code
    @media (max-width: 767px) {
    .wpcf7 input[type=”submit”] {
    width: 200px;
    color: #242424;
    font-size: 15px;
    font-weight: 700;
    background: #29C7B3;
    padding: 15px 25px 15px 25px ;
    border: 2px solid #29C7B3 ;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    }
    }
    or add !important to every code.

    Regards
    Mateusz

    Thread Starter guillaumegournay

    (@guillaumegournay)

    Hey.

    I’ve tried both of this solutions already and it didn’t work.

    Thanks anyway !

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Custom CSS not working on mobile’ is closed to new replies.