Re: [css-d] Sizing for different viewers/devices
Tom I think I am started on the road you suggested. It has been 2 or 3 years since I have had the opportunity to develop a website. I am rusty and there have been significant changes in CSS, HTML, and JavaScript. So I am a bit behind the curve right now. Will someone take a look at http://www.drdelmath.com/study_aids/flash_cards_revisons/flash_card_presenter.html (The colors are to help me trace the divs.) How does it look on small devices? It presents reasonably well on my Galaxy S4. My ultimate goal is a page that looks like http://www.drdelmath.com/study_aids/flash_cards/flash_card_presenter.html on all devices. I now expect to start inserting media queries to deal with larger screen sizes. At this point I am concerned about my use of the position style for the various divs. Does anyone have any suggestions, corrections, etc. On 10/13/2014 3:10 PM, Tom Livingston wrote: On Mon, Oct 13, 2014 at 3:47 PM, Del Wegener d...@delweg.com wrote: Aside from having to deal with layout issues on a phone/small table as it is, you could have the flashcard's container have width: 95%; (or whatever you need) as a base style (mobile-first), then within a media query for your large widths, add a max-width: 600px; (or whatever you need). HTH __ 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] Sizing for different viewers/devices
On Tue, Oct 14, 2014 at 4:05 PM, Del Wegener d...@delweg.com wrote: Tom I think I am started on the road you suggested. It has been 2 or 3 years since I have had the opportunity to develop a website. I am rusty and there have been significant changes in CSS, HTML, and JavaScript. So I am a bit behind the curve right now. Will someone take a look at http://www.drdelmath.com/study_aids/flash_cards_revisons/flash_card_presenter.html (The colors are to help me trace the divs.) How does it look on small devices? It presents reasonably well on my Galaxy S4. My ultimate goal is a page that looks like http://www.drdelmath.com/study_aids/flash_cards/flash_card_presenter.html on all devices. Del, It appears you are missing this: meta name=viewport content=width=device-width, initial-scale=1.0 which will render the page as I think you wish on devices. Take a look at it on your small device with and without this line. Here's reference: http://www.quirksmode.org/mobile/metaviewport/ -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] Sizing for different viewers/devices
Del Wegener wrote: Will someone take a look at http://www.drdelmath.com/study_aids/flash_cards_revisons/flash_card_presenter.html Once Current Card and Flip Card wrap, the latter cannot be fully seen, nor can the text following. 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/
