Help with code

by 4 replies
5
Does anyone know why this code isn't displaying correctly on mobile devices -

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
.fild input[type="submit"]
{width:110px; height:113px; color:transparent; cursor:pointer; background:none;
background:transparent;
border:0; background-image:url(http://XXX.png); background-repeat:no-repeat;
position:relative; }
}


Here is what is the HTML:

<div class="green_bg">

<h3 style="color:white;">XXXXX</h5>

<form class="fild" accept-charset="utf-8" action="https://app.getresponse.com/add_contact_webform.html" method="post" onsubmit="return subscribe_praise('name_third', 'email_third')">

<input name="name" style="padding: 3px" id="name_third" type="text" value="Your First Name" onfocus="if (this.value==&quot;Your First Name&quot {this.value=&quot;&quot;}" onblur="if (this.value==&quot;&quot{ this.value= &quot;Your First Name&quot; }"> <input name="email" style="padding: 3px" id="email_third" type="text" value="Your Email Address" onfocus="if (this.value==&quot;Your Email Address&quot {this.value=&quot;&quot;}" onblur="if (this.value==&quot;&quot{ this.value= &quot;Your Email Address&quot; }">

<input type="hidden" name="webform_id" value="664966" />

<input name="" type="submit" value="">

</form>

<div class="clear"></div>

</div>
#website design #code
  • I'm not sure what are you trying to do, what do you want to achieve, what is wrong?
  • Device-width refers to the display's resolution (for example 1024 from 1024x768), while width refers to the width of the browser itself (which will be different from the resolution if the browser isn't maximized).

    Unless you have a legitimate reason to restrict the style sheets based on the resolution and not the size of the viewport, then just use min-width/max-width and avoid min-device-width/max-device-width.
  • Omit

    (min-device-width : 320px)
    and (max-device-width : 480px)
  • Change your code to this

    Code:
    @media (max-width: 480px) {

 .fild input[type="submit"] {
    width:110px;
    height:113px;
    color:transparent;
    cursor:pointer;
    background:none; 
    background:transparent;
    border:0;
    background-image:url('http://XXX.png');
    background-repeat:no-repeat;
    position:relative;
  }
}
Join the discussion

Next Topics on Trending Feed