[css-d] Any layout gotchas?
List, Normally the layouts I do have a main content container and an aside or sidebar container which, on mobile, would completely stack one under the other. A typical scenario I think. I am trying a different approach where there is no actual sidebar container element separate from a main container element, but at desktop width, the page would appear to have main area/sidebar area structure. Also, the content areas would shuffle together like a desk of cards (for lack of a better analogy). Here's my sample: http://tomliv.com/shuffle/ I haven't done a layout like this on a production site. My questions are: Are there any big 'gotchas' with this type of layout? Am I doing this correctly/the best way? TIA. -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ 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] Any layout gotchas?
Normally the layouts I do have a main content container and an aside or sidebar container which, on mobile, would completely stack one under the other. A typical scenario I think. I am trying a different approach where there is no actual sidebar container element separate from a main container element, but at desktop width, the page would appear to have main area/sidebar area structure. Also, the content areas would shuffle together like a desk of cards (for lack of a better analogy). Here's my sample: http://tomliv.com/shuffle/ I haven't done a layout like this on a production site. My questions are: Are there any big 'gotchas' with this type of layout? Am I doing this correctly/the best way? TIA. I should mention to narrow up your browser window to see the layout change. Thanks! -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ 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] weirdest wrapping issue
I've got the weirdest wrapping issue going on at this page: http://168.156.9.250:8080/academy05-06.aspx . Currently it is rendering fine, but if I swap out the code blocks for Mari and Randy (put Randy in position 5) the last photo in the group will not render in the left most position. I know that sounds very weird, but I experimented to kingdom come with this thing and it all seems to boil down to randy. I can't figure out why. This page is one of many made from the same template and this is the only page on which I experienced this strange issue. The only reason I discovered this is because I'd like to put the people in alpha order which puts Randy in the 5th position. I had to swap him out with Mary Ellen to get it to work correctly. Angela French Internet Specialist State Board for Community and Technical Colleges 360-704-4316 afre...@sbctc.edu http://www.checkoutacollege.com/ http://www.sbctc.edu __ 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] css-based flyout menu for mobile?
Can anyone point me to a 100% css-based flyout menu for use with mobile devices? By flyout, I mean that when User presses a Menu icon, the menu slides out or otherwise appears, User presses their choice and menu hides, chosen page loads. Thank you! John __ 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] weirdest wrapping issue
hi Angela, it's prety strange, are you generating content via script? Because I'm getting different content in IE10 and FF21 They both break at higher browser window sizes (Dee Olsen stays vertically aligned with Randy Lawrence, and the rest of the second row drops a row) Anyway, firebug on ff shows me this nesting scheme: p class=gallery div id=LauraBrener class=highslide-maincontent p class=gallery div id=MartyCavalluzzi class=highslide-maincontent p class=gallery div id=TomHenderson class=highslide-maincontent p class=gallery div id=MaryOKeeffe class=highslide-maincontent p class=gallery p class=gallery p class=gallery div id=DeeOlson class=highslide-maincontent p class=gallery div id=DaveRector class=highslide-maincontent p class=gallery div id=BruceRiveland class=highslide-maincontent p class=gallery div id=AlexRoberts class=highslide-maincontent p class=gallery div id=RobinYoung class=highslide-maincontent while IE10 shows the source as it should (I'd have to reindent every thing to be perfectly sure, but it seams to be presenting the correct Ps and nested divs). I couldn't find anything on the css files, I would check the scripts to see how are they managing the divs, in particular, if they are relying on nth features or in ids. It does let me curious, if you solve it, please let us know! isabel On Fri, Jun 14, 2013 at 11:38 PM, Angela French afre...@sbctc.edu wrote: I've got the weirdest wrapping issue going on at this page: http://168.156.9.250:8080/academy05-06.aspx . Currently it is rendering fine, but if I swap out the code blocks for Mari and Randy (put Randy in position 5) the last photo in the group will not render in the left most position. I know that sounds very weird, but I experimented to kingdom come with this thing and it all seems to boil down to randy. I can't figure out why. This page is one of many made from the same template and this is the only page on which I experienced this strange issue. The only reason I discovered this is because I'd like to put the people in alpha order which puts Randy in the 5th position. I had to swap him out with Mary Ellen to get it to work correctly. Angela French Internet Specialist State Board for Community and Technical Colleges 360-704-4316 afre...@sbctc.edu http://www.checkoutacollege.com/ http://www.sbctc.edu __ 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-d] media queries chaos for smart phones
I'm running into a chaos with responsive design targeting many devices. The main issue is with different resolutions for smart phone. A year ago below sizes works fine. • 320 px Mobile portrait • 480 px Mobile landscape • 600 px Small tablet • 768 px Tablet portrait • 1024 px Tablet landscape/Netbook • 1280 px greater — Desktop But now we have smart phones with these sizes: • 480 px Mobile portrait (goodbye 320px!) • 720 px Mobile landscape (Samsung Galaxy S2 for example) • 780 px Mobile landscape (Samsung Galaxy S3 I think) • 800 px Mobile landscape (quite many phones are with this size) My media queries for tablets and phones are: @media only screen and (max-width:800px) @media only screen and (max-width:720px) @media only screen and (max-width:600px) @media only screen and (max-width:480px) Between 800px, 768px (e.g., iPad portrait) I am running into issue, for example, in 768px for tablets I need to target floated elements, and then between 480 to 800px for smart phones regardless of portrait and landscape no float element (or 2 columns using inline/inline-block) is needed. Also, between tablet (Kindle Fire) that has the size of 600px is also creating similar problem between 480px to 720px. My first thought is to create a stylesheet targeting tablet portrait for 768px, but this is also not reliable because there is also tablet devices which has 800px for portrait. Thank you! Tee __ 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] weirdest wrapping issue
On Fri, Jun 14, 2013 at 6:38 PM, Angela French afre...@sbctc.edu wrote: I've got the weirdest wrapping issue going on at this page: http://168.156.9.250:8080/academy05-06.aspx . Currently it is rendering fine, but if I swap out the code blocks for Mari and Randy (put Randy in position 5) the last photo in the group will not render in the left most position. I know that sounds very weird, but I experimented to kingdom come with this thing and it all seems to boil down to randy. I can't figure out why. This page is one of many made from the same template and this is the only page on which I experienced this strange issue. The only reason I discovered this is because I'd like to put the people in alpha order which puts Randy in the 5th position. I had to swap him out with Mary Ellen to get it to work correctly. Angela French It boggles the mind. And then some. Does correcting any of the CSS parse errors relevant to that particular page make any difference? Best, David Laakso -- Chelsea Creek Studio http://ccstudi.com __ 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] media queries chaos for smart phones
Le 15 juin 2013 à 10:14, weblist99 weblis...@gmail.com a écrit :
I'm running into a chaos with responsive design targeting many devices. The
main issue is with different resolutions for smart phone.
…..
Instead of thinking to target particular device sizes (impossible in an ever
changing landscape), think about content.
Check when your layout breaks.
Does your layout work fine at width 900px but breaks when narrower ? if yes,
set a breakpoint (an MQ) for that. Repeat. Rinse.
In my present project I use just two MQ's:
@media (max-width: 55em) {}
@media ( max-width: 35em) {}
Thinking about devices is just over engineering.
YMMV.
Philippe
--
Philippe Wittenbergh
http://l-c-n.com
__
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] media queries chaos for smart phones
On 6/14/2013 9:14 PM, weblist99 wrote: I'm running into a chaos with responsive design targeting many devices. The main issue is with different resolutions for smart phone. A year ago below sizes works fine. • 320 px Mobile portrait • 480 px Mobile landscape • 600 px Small tablet • 768 px Tablet portrait • 1024 px Tablet landscape/Netbook • 1280 px greater — Desktop But now we have smart phones with these sizes: • 480 px Mobile portrait (goodbye 320px!) • 720 px Mobile landscape (Samsung Galaxy S2 for example) • 780 px Mobile landscape (Samsung Galaxy S3 I think) • 800 px Mobile landscape (quite many phones are with this size) My media queries for tablets and phones are: @media only screen and (max-width:800px) @media only screen and (max-width:720px) @media only screen and (max-width:600px) @media only screen and (max-width:480px) If your site requires more than a couple of media queries, there could be a benefit in re-thinking the layout. In may cases, a single structural query for smartphones is all that's really necessary. If you use a viewport meta tag in this way: meta name=viewport content=width=device-width Then this might be all you need: @media only screen and (min-width: 0px) and (max-width: 700px) It would help if you posted a link to your page as media queries are not strictly theoretical ;-) -- Al Sparber - PVII http://www.projectseven.com The Finest Dreamweaver Menus | Galleries | Widgets Since 1998 __ 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/
