I have been using the Elated 'Photoshoot' template for quite some time now. Although I have just a moderate knowledge of building websites, I managed to edit the CSS in such a way that the boxes on the right move to the bottom automatically when the viewport gets smaller dan (about) 700 pixels width.
I figured that this would also happen when you see the website on a mobile device, thus making the mainbox relatively bigger and the text easier to read. But it doesn't.
At first I didn't understand this and I tried several min-width and min-device-width code but then I realized this approach would never work as the screen resolution of a modern mobile is the same as that of a large HD screen: 1,280 x 720 pixels.
So, what I would like to know: is there another way for website code to distinguish small from large screens, even if they have the same resolution?
My website: http://www.digitaalfotograferen.net
[Edited by AndrewV on 21-Jan-13 06:37]
--
http://www.andrewvalkenburg.nl
I figured that this would also happen when you see the website on a mobile device, thus making the mainbox relatively bigger and the text easier to read. But it doesn't.
At first I didn't understand this and I tried several min-width and min-device-width code but then I realized this approach would never work as the screen resolution of a modern mobile is the same as that of a large HD screen: 1,280 x 720 pixels.
So, what I would like to know: is there another way for website code to distinguish small from large screens, even if they have the same resolution?
My website: http://www.digitaalfotograferen.net
[Edited by AndrewV on 21-Jan-13 06:37]
--
http://www.andrewvalkenburg.nl
