Re: [css-d] make site suitable for mobile/small screens
An iPhone 4/5, for example, in portrait orientation is 320. Many other are similar. On Tuesday, May 26, 2015, Erik Visser e...@erikvisser.net wrote: Tom Livingston schreef op 25-05-15 om 18:21: Looks good. On Monday, May 25, 2015, Erik Visser wrote: Tom Livingston schreef op 25-05-15 om 16:12: Footer width is still not scaling. Even at 480. footer is scaling too now I think so too. From what i can see and test it is already working quite good. It is passing the google test now. Since we don't want to loose google ranking we put it live as it is now. http://www.utrechtsyogacentrum.nl Any comments already? From here on i'll straigthen out the last flaws and issues. And the approach for screens smaller then 480px has to be set. And still a lot of mobile phones have screens smaller then 480px i found out. __ 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/ -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ 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] make site suitable for mobile/small screens
Tom Livingston schreef op 25-05-15 om 18:21: Looks good. On Monday, May 25, 2015, Erik Visser wrote: Tom Livingston schreef op 25-05-15 om 16:12: Footer width is still not scaling. Even at 480. footer is scaling too now I think so too. From what i can see and test it is already working quite good. It is passing the google test now. Since we don't want to loose google ranking we put it live as it is now. http://www.utrechtsyogacentrum.nl Any comments already? From here on i'll straigthen out the last flaws and issues. And the approach for screens smaller then 480px has to be set. And still a lot of mobile phones have screens smaller then 480px i found out. __ 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] make site suitable for mobile/small screens
Hi all, Here is the site i am woring on to make it suitable for mobile/small screens. It should behave from big screen until 480px. Below 480px additional work has to be done. Thats the next step. http://beta.erikvisser.net How does it behave at your (smaller) screens/browsers? Any flaws? Any comments are welcome. Thanks, Erik __ 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] make site suitable for mobile/small screens
May 25 2015 12:31 Erik Visser e...@erikvisser.net: How does it behave at your (smaller) screens/browsers? Wider displays makes Logomap to fall down, which may not be your focus right now. If this isn’t replaced or something I’d place it with absolute positioning. I guess it’s not supposed to move anywhere where it’s placed now? __ 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] make site suitable for mobile/small screens
Footer width is still not scaling. Even at 480. On Monday, May 25, 2015, Erik Visser e...@erikvisser.net wrote: Hi all, Here is the site i am woring on to make it suitable for mobile/small screens. It should behave from big screen until 480px. Below 480px additional work has to be done. Thats the next step. http://beta.erikvisser.net How does it behave at your (smaller) screens/browsers? Any flaws? Any comments are welcome. Thanks, Erik __ 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/ -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ 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] make site suitable for mobile/small screens
I don't think that http://beta.erikvisser.net/images/header1.jpg should scale anamorphically as the window changes width; it would be better (IMHO) if the aspect ratio should remain constant and the viewport onto it change. 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] make site suitable for mobile/small screens
MiB schreef op 25-05-15 om 15:36: Wider displays makes Logomap to fall down, which may not be your focus right now. If this isn’t replaced or something I’d place it with absolute positioning. I guess it’s not supposed to move anywhere where it’s placed now? It was intended but not very consistent. And not a good idea, as your comment confirms. So I changed the lay-out. The logo is now at the same spot on every width. Only at smaller screen widths (below 980 px) the top-banner intentional has less height. __ 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] make site suitable for mobile/small screens
Tom Livingston schreef op 25-05-15 om 16:12: Footer width is still not scaling. Even at 480. footer is scaling too now __ 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] make site suitable for mobile/small screens
On Monday, May 25, 2015, Karl DeSaulniers k...@designdrumm.com wrote: I don't think that http://beta.erikvisser.net/images/header1.jpg should scale anamorphically as the window changes width; it would be better (IMHO) if the aspect ratio should remain constant and the viewport onto it change. Philip Taylor +1 Best, Karl Agreed. Or have the image crop. -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ 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] make site suitable for mobile/small screens
I don't think that http://beta.erikvisser.net/images/header1.jpg should scale anamorphically as the window changes width; it would be better (IMHO) if the aspect ratio should remain constant and the viewport onto it change. Philip Taylor +1 Best, Karl __ 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] make site suitable for mobile/small screens
Philip Taylor schreef op 25-05-15 om 19:14: I don't think that http://beta.erikvisser.net/images/header1.jpg should scale anamorphically as the window changes width; it would be better (IMHO) if the aspect ratio should remain constant and the viewport onto it change. Ok, good point. This is my fix: - moved the elephant logo image from the masthead into the top of the left column - gave the logo image: position relative and top -7.5em - gave the menu box_1: position relative and top -9.5em - gave the header1.jpg: min-height 7.5rem Last fix is a little cheat to keep header1.jpg looking nice and also to avoid the logo might shove above the masthead in any browser. Looks good on my machine. That is Mac Os X Lion, using: Safari 6.1.6 Firefox 38.01. Chrome 4.3.0.2 Hope this does not give any strange effects in any other platforms and browsers or on small screens / mobile browsers. http://beta.erikvisser.net Thanks again, Erik __ 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] make site suitable for mobile/small screens
Erik Visser schreef op 25-05-15 om 23:42: Chrome 4.3.0.2 should be 43.0.2 __ 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/
