CODEWITHSUNDEEP
cssmobiletextboxheightwidth
Fredrik
Fredrik

Reputation: 764

CSS - Can't change width/height of textbox for mobile devices

I've encountered a problem when I'm trying to adjust my CSS after the user-device dimensions. I'm using the following code:

@media only screen and (max-width: 700px) {
#form input[type=text]
  {
  width: 100px;
  height: 50px;
  margin: 95px -60px 0 15px;
  box-shadow: inset 0px 0px 3px 1px grey;
  border:1px lightgrey solid;
  border-radius: 4px;
  text-align: center;
  font-family: times;
  font-size: 10px;
}
}

All settings apply properly and change the original CSS except the dimensions, which remain the same. How is this even possible? Is this a CSS bug? If some do apply the selector is correct and all, but the dimensions don't. It's not a cache problem, and I've tried on several devices.

I very much appreciate the help, Fredrik

Upvotes: 0

Views: 1553

Answers (1)

Connor Finn McKelvey
Connor Finn McKelvey

Reputation: 540

Can you post a link to your code?

Does the problem only occur on a mobile device? What happens when you resize the browser window to a width less than 700px?

Typically this kind of error is due to having selectors that are too specific somewhere else in your code, which makes them hard to override.

Try adding !important to the end of your declaration to see if the style can be overridden. Beware its generally bad practice to leave !important in there, so if that works for you search your code for the offending selectors and adjust it until your media query can override.

Upvotes: 1

Related Questions