Re: [css-d] Two Phones one problem
On Mon, Feb 16, 2015 at 9:54 PM, Crest Christopher crestchristop...@gmail.com wrote: There is a bit of a conundrum. When I view the page using Chromes device emulation tools, specifically the Samsung Galaxy Tab 7.7,8.9,10.1. The page looks fine in landscape, horrible in portrait, viewing the page on my Lumia 1520 the page looks fine in portrait, horrible in landscape. Reversing the MQ has the possibility of reversing this problem, as it appears it's the only problem I face with the page, with regards to styling. Christopher Put the page on a public server and provide a link to it in your post to the list. Best, David Laakso -- Chelsea Creek Studio http://ccstudi.com desktop | laptop | tablet | mobile __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two Phones one problem
Here is the page http://www.thecreativesheep.ca/wdp/wip/cs_regular_tutorial_WIP_2.htm. Christopher David Laakso mailto:laakso.davi...@gmail.com Monday, February 16, 2015 7:12 AM On Mon, Feb 16, 2015 at 12:18 AM, Crest Christopher The specs for the screen size of the three phones you listed are: 1/ iPhone/4 3.5 inches corner-to-corner 2/ iPhone/5 4 inches corner-to-corner 3/ Nokia Lumina 1520 6 inches corner-to-corner Try revising your mq break-point to accommodate the wider Nokia Lumina screen? Best, David Laakso Crest Christopher mailto:crestchristop...@gmail.com Monday, February 16, 2015 12:18 AM I've run into an odd problem with a MQ between two different phones that have the same width when in landscape mode which is 480px. Those two phones are iPhone 4 and my Lumia 1520, the page I'm working on looks, for the most part, fine, when viewed on a iPhone 5, when I preview on my Lumia, the page breaks and I don't understand why ? Christopher __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two Phones one problem
On Tue, Feb 17, 2015 at 7:28 PM, Crest Christopher
crestchristop...@gmail.com wrote:
Here is the page
http://www.thecreativesheep.ca/wdp/wip/cs_regular_tutorial_WIP_2.htm.
Christopher
On line numbers 334-341 try changing this:
/* Media {Landscape}*/
@media (max-height:600px) and (orientation:landscape) {
#wrap {
width:100%;
background:#b7b7b7;
margin:auto;
}
To read this:
/* Media {Landscape}*/
@media only screen and (min-width:0px) and (max-width:600px){
#wrap {
width:100%;
background:#b7b7b7;
margin:auto;
}
On line numbers 363-370 try changing this:
p.imgbox {
position:relative; /*containg block for AP paperclip*/
width:300px; /*BG image width*/
height:350px; /*BG image height*/
background: url(images/background.gif) no-repeat;
border:5px dashed red;
right:-75px;
}
To read this:
p.imgbox {
position:relative; /*containg block for AP paperclip*/
width:300px; /*BG image width*/
height:350px; /*BG image height*/
background: url(images/background.gif) no-repeat;
border:5px dashed red;
/* right:-75px; delete*/
}
Best,
David Laakso
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two Phones one problem
Did you set portrait or landscape on those media queries? Or are you going
by pixels alone?
@media screen and (max-height:600px) {}
@media screen and (max-height:600px) and portrait {}
These work somewhat differently.
Best,
Karl
Sent from losPhone
On Feb 16, 2015, at 9:01 AM, Tom Livingston tom...@gmail.com wrote:
Imo, unless the content suffers horribly at landscape, sounds like you
could just move your breakpoint. You may be able to get away with no
breakpoint until somewhere around 600px or em equivalent (recommended).
On Mon, Feb 16, 2015 at 12:18 AM Crest Christopher
crestchristop...@gmail.com wrote:
I've run into an odd problem with a MQ between two different phones that
have the same width when in landscape mode which is 480px. Those two
phones are iPhone 4 and my Lumia 1520, the page I'm working on looks,
for the most part, fine, when viewed on a iPhone 5, when I preview on my
Lumia, the page breaks and I don't understand why ?
Christopher
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two Phones one problem
Yes Chris, sorry.
... and (orientation: portrait)
Was typing quickly.
Best,
Karl
Best,
Karl DeSaulniers
Design Drumm
http://designdrumm.com
On Feb 16, 2015, at 1:34 PM, Crest Christopher crestchristop...@gmail.com
wrote:
@media (min-width:533px) and (orientation:landscape) !
Karl DeSaulniers wrote:
Did you set portrait or landscape on those media queries? Or are you
going by pixels alone?
@media screen and (max-height:600px) {}
@media screen and (max-height:600px) and portrait {}
These work somewhat differently.
Best,
Karl
Sent from losPhone
On Feb 16, 2015, at 9:01 AM, Tom Livingstontom...@gmail.com wrote:
Imo, unless the content suffers horribly at landscape, sounds like you
could just move your breakpoint. You may be able to get away with no
breakpoint until somewhere around 600px or em equivalent (recommended).
On Mon, Feb 16, 2015 at 12:18 AM Crest Christopher
crestchristop...@gmail.com wrote:
BR
I've run into an odd problem with a MQ between two different phones that
have the same width when in landscape mode which is 480px. Those two
phones are iPhone 4 and my Lumia 1520, the page I'm working on looks,
for the most part, fine, when viewed on a iPhone 5, when I preview on my
Lumia, the page breaks and I don't understand why ?
Christopher
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http:/ /css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two Phones one problem
I cannot help but feel that the current need, apparently experienced by many, to attempt to cope with an exponentially increasing number of smart'phone and tablet variants by writing ever-more-complex media queries, is essentially analogous to the need to flagellate oneself with nettles, brambles and similar as experienced by mystics and others in previous centuries. The pleasure to be experienced when you finally have the sense to stop will surely far outweigh the anguish and pain that you are currently experiencing ... Philip Taylor Good point. And that point is probably when the primary content is of sufficient contrast and at least at user default,so as to be readable and legible by children of all ages in phone portrait mode. Best, David Laakso -- Chelsea Creek Studio http://ccstudi.com desktop | laptop | tablet | mobile __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two Phones one problem
There is a bit of a conundrum. When I view the page using Chromes device emulation tools, specifically the Samsung Galaxy Tab 7.7,8.9,10.1. The page looks fine in landscape, horrible in portrait, viewing the page on my Lumia 1520 the page looks fine in portrait, horrible in landscape. Reversing the MQ has the possibility of reversing this problem, as it appears it's the only problem I face with the page, with regards to styling. Christopher David Laakso mailto:laakso.davi...@gmail.com Monday, February 16, 2015 8:25 AM Good point. And that point is probably when the primary content is of sufficient contrast and at least at user default,so as to be readable and legible by children of all ages in phone portrait mode. Best, David Laakso Philip Taylor mailto:p.tay...@rhul.ac.uk Monday, February 16, 2015 7:26 AM David Laakso wrote: The specs for the screen size of the three phones you listed are: 1/ iPhone/4 3.5 inches corner-to-corner 2/ iPhone/5 4 inches corner-to-corner 3/ Nokia Lumina 1520 6 inches corner-to-corner Try revising your mq break-point to accommodate the wider Nokia Lumina screen? I cannot help but feel that the current need, apparently experienced by many, to attempt to cope with an exponentially increasing number of smart'phone and tablet variants by writing ever-more-complex media queries, is essentially analogous to the need to flagellate oneself with nettles, brambles and similar as experienced by mystics and others in previous centuries. The pleasure to be experienced when you finally have the sense to stop will surely far outweigh the anguish and pain that you are currently experiencing ... Philip Taylor David Laakso mailto:laakso.davi...@gmail.com Monday, February 16, 2015 7:12 AM On Mon, Feb 16, 2015 at 12:18 AM, Crest Christopher The specs for the screen size of the three phones you listed are: 1/ iPhone/4 3.5 inches corner-to-corner 2/ iPhone/5 4 inches corner-to-corner 3/ Nokia Lumina 1520 6 inches corner-to-corner Try revising your mq break-point to accommodate the wider Nokia Lumina screen? Best, David Laakso Crest Christopher mailto:crestchristop...@gmail.com Monday, February 16, 2015 12:18 AM I've run into an odd problem with a MQ between two different phones that have the same width when in landscape mode which is 480px. Those two phones are iPhone 4 and my Lumia 1520, the page I'm working on looks, for the most part, fine, when viewed on a iPhone 5, when I preview on my Lumia, the page breaks and I don't understand why ? Christopher __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two Phones one problem
David Laakso wrote: The specs for the screen size of the three phones you listed are: 1/ iPhone/4 3.5 inches corner-to-corner 2/ iPhone/5 4 inches corner-to-corner 3/ Nokia Lumina 1520 6 inches corner-to-corner Try revising your mq break-point to accommodate the wider Nokia Lumina screen? I cannot help but feel that the current need, apparently experienced by many, to attempt to cope with an exponentially increasing number of smart'phone and tablet variants by writing ever-more-complex media queries, is essentially analogous to the need to flagellate oneself with nettles, brambles and similar as experienced by mystics and others in previous centuries. The pleasure to be experienced when you finally have the sense to stop will surely far outweigh the anguish and pain that you are currently experiencing ... Philip Taylor __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two Phones one problem
Imo, unless the content suffers horribly at landscape, sounds like you could just move your breakpoint. You may be able to get away with no breakpoint until somewhere around 600px or em equivalent (recommended). On Mon, Feb 16, 2015 at 12:18 AM Crest Christopher crestchristop...@gmail.com wrote: I've run into an odd problem with a MQ between two different phones that have the same width when in landscape mode which is 480px. Those two phones are iPhone 4 and my Lumia 1520, the page I'm working on looks, for the most part, fine, when viewed on a iPhone 5, when I preview on my Lumia, the page breaks and I don't understand why ? Christopher __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two Phones one problem
On Mon, Feb 16, 2015 at 12:18 AM, Crest Christopher crestchristop...@gmail.com wrote: I've run into an odd problem with a MQ between two different phones that have the same width when in landscape mode which is 480px. Those two phones are iPhone 4 and my Lumia 1520, the page I'm working on looks, for the most part, fine, when viewed on a iPhone 5, when I preview on my Lumia, the page breaks and I don't understand why ? Christopher The specs for the screen size of the three phones you listed are: 1/ iPhone/4 3.5 inches corner-to-corner 2/ iPhone/5 4 inches corner-to-corner 3/ Nokia Lumina 1520 6 inches corner-to-corner Try revising your mq break-point to accommodate the wider Nokia Lumina screen? Best, David Laakso -- Chelsea Creek Studio http://ccstudi.com desktop | laptop | tablet | mobile __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Two Phones one problem
I've run into an odd problem with a MQ between two different phones that have the same width when in landscape mode which is 480px. Those two phones are iPhone 4 and my Lumia 1520, the page I'm working on looks, for the most part, fine, when viewed on a iPhone 5, when I preview on my Lumia, the page breaks and I don't understand why ? Christopher __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
