CODEWITHSUNDEEP
htmlcssmobilewidth
Vince
Vince

Reputation: 2646

Resizing div based on device

So I'm having trouble getting my div to resize based on if it's a mobile (specifically smartphone) device. Now the mobile device I'm using is the iPhone7plus. So I'm not sure if the dimensions I have are for this device.

my original css (for desktop) is this:

div#allContent div#mainContent div#contentText {
  width:50%;
  /*other styles*/
}

So the text on the screen is on one half of the page and the signup form will be on the other half. Now when I view in my iPhone the drop down items from the form are too big and I can't see the text inside the drop down boxes. So I'm trying to get the width of the contentText div to be 100% then also the form div to be 100%.

I added this to the bottom of my css file

I've tried this first line to:

/*@media only screen and (min-device-width:320px) and (max-device-width:480px) {
@media screen and (min-device-width:320px) and (max-device-width:480px) {
  div#allContent div#mainContent div#contentText {
    width:100%;
  }
  div#allContent div#mainContent div#signupContent {
    width:100%;
  }
}

Is it because I have a larger mobile device that it's not working? Should i increase the max values? I'm just learning mobile device support.

Upvotes: 0

Views: 229

Answers (3)

pradeep jha
pradeep jha

Reputation: 11

Mobile device max-width can be 767 after that i pad and notepad device width starts.

@media screen and (min-device-width:320px) and (max-device-width:767px) {
  //code comes here
 }

Upvotes: 1

MHD Alaa Alhaj
MHD Alaa Alhaj

Reputation: 3163

Maybe your problem is a syntax or you are not selecting the target correctly, if you post your full code (HTML and CSS) we could be more helpful.

Regardless, you could use min-width and max-width instead of *-device-width.

I have created example on CodePen, check it out it will help you.

Upvotes: 0

Pons Purushothaman
Pons Purushothaman

Reputation: 2261

I think the media query syntax is different in your code

@media screen and (max-width: 480px){

}

I hope this media query will work for iphone portrait mode.

Upvotes: 0

Related Questions