Questions tagged [device-width]

57 questions
1
vote
1 answer

Media query max-width: 767px is not applied even though the width is 767px

Here is codesandbox link: https://codesandbox.io/s/767px-problem-u9temt?file=/style.css I have made a CSS query rule: @media screen and (max-width: 767px) { div { display: none; } } which should mean that the div will be gone if device…
1
vote
1 answer

How to manipulate screen-size/viewport size, so desktop will display mobile version of website?

Sorry for the ambiguous question, coding noob here. Essentially, I have a site where the entire container is set to 100vw, and then font-sizes also set in vw. This works so that no matter how I scale the site, on mobile or desktop, it'll display…
hayakaweis
  • 11
  • 2
1
vote
0 answers

Why won't my viewport tag properly use device width on most mobile devices?

I am using following meta tag.
user6391799
1
vote
1 answer

CSS media query orientation and portrait device-width logic

I have two divs, which I'll refer to as A & B. The desired behaviour is: If the screen width is less than 400px, only A should be visible. If the screen in landscape, greater than 400px in width, but less than 400px in portrait orientation, only B…
tommarshall
  • 2,038
  • 5
  • 23
  • 36
1
vote
1 answer

Phonegap Android screen.height and screen.width returning black system bar space

I develop apps with Phonegap for Android. In some of those apps I use javascript to make some dynamic calculations and place elements on screen. The app uses Fullscreen preference in config.xml So far that has been working well, but today I noticed…
Vero
  • 1,742
  • 3
  • 15
  • 29
1
vote
2 answers

Handling device-width on a fixed-width website

I have a website that has a fixed width of 1024px and is centered on desktop. On mobile devices, the width should match the size of the phone or tablet. When using device-width, like this
bytecode77
  • 14,163
  • 30
  • 110
  • 141
1
vote
0 answers

Different style depending on device's width and height

I have to define different textarea heights, depending on the device: if the user is using an iPhone 4, the textarea's height must be 62px, if the user is using an iPhone 5, the textarea's height must be 106px. This is my current CSS. It works for…
Andres SK
  • 10,779
  • 25
  • 90
  • 152
1
vote
2 answers

not working

I'm making responsive website with bootstrap 3, and it works when I resize my browser. But when I open website from mobile (Nokia lumia 920 internet explorer), it is not responsive at all. Bootstrap columns are not working, breakpoints are not…
Alex
  • 129
  • 1
  • 2
  • 15
1
vote
0 answers

ie9 media query device-width

I am working with media query, for a desktop version of a website. The behavior that I was looking for was: - Full screen rendering - No redimensionning when minimizing the viewport (the right sided content is hidden) So I defined ranges of…
1
vote
1 answer

Bootstrap - why minimum media query 768px?

My phone (LG G2) has a viewport size of 360px 598px. Col-xs aims devices smaller than 768px, so that means that wether the user is in portrait or landscape mode, he will have the same result, even though in landscape mode i could display more…
Matthew
  • 10,988
  • 11
  • 54
  • 69
1
vote
1 answer

Mobile Screen Device Width

I have done my research on mobile screen widths but there is something I can't quite have a direct answer too. Take the iPhone 4 for example, at this site it has a width of 640px and a height of 960px. However it has a device width of 320px. What is…
Jack Trowbridge
  • 3,175
  • 9
  • 32
  • 56
1
vote
3 answers

Mobile content witdh(body) = media width, but user can still scroll

I overlooked all the web ( i guess) and tried to find the solution for this task: I have all requirements to show a correct content on mobile(I mean meta media and css media and so on), but on my android phone I can scroll to the right. I checked…
Vasilii Burlacu
  • 180
  • 1
  • 8
1
vote
0 answers

wordpress menu mobile placement issue

I have an issue with my main menu on iPhones and possibly android phones. The menu width is set to 100vw up to 600px. However, on a 320px or 480px screen, when the menu button is clicked and when one enters the page, the page zooms out a little bit…
1
vote
3 answers

CSS: I always seem to need multiple identical media queries

So I always seem to do two identical media queries for smartphones, one being the min- or max-width, and the other being the min- or max-DEVICE-width (to target the iPhone and stuff)... @media only screen and (min-device-width : 320px) and…
1
vote
1 answer

Meta viewport - Device-width need to be a minimum

We have created a website that is optimized to 480px. But if we set the meta viewport to device-width with initial scale = 1 then on the iPhone the width is 320px and the site is to wide. When setting the initial scale on 0.65 the site is good on…
BastB
  • 11
  • 2