5 {{ upvoteCount | shortNum }}
5 {{ upvoteCount | shortNum }}

Help with code

by imsolutionsgroup
4 replies
  • WEB DESIGN
    • |
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>
#code
  • Profile picture of the author WPcrew
    I'm not sure what are you trying to do, what do you want to achieve, what is wrong?
    {{ DiscussionBoard.errors[8945763].message }}
  • Profile picture of the author clickbump
    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.
    Signature
    {{ DiscussionBoard.errors[8947368].message }}
  • Profile picture of the author MillionDollarBucks
    Omit

    (min-device-width : 320px)
    and (max-device-width : 480px)
    {{ DiscussionBoard.errors[8957460].message }}
  • Profile picture of the author jpweb
    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;
  }
}
    {{ DiscussionBoard.errors[8957564].message }}

Trending Topics