Re: Responsive pages

[Jon Paris <jon.paris@xxxxxxxxxxxxxx>]

Thanks Brad - but I’m not sure it works the way I need.  I went to the home page and scrolled down to the forum feeds and it is just showing the entries in a teeny tiny column.


On Aug 6, 2015, at 1:56 PM, Bradley Stone <bvstone@xxxxxxxxx> wrote:

> Jon,
>
> Look into using CSS to control the layout depending on the screen size.
> Here's an example that I use at http://www.fieldexit.com
>
> From a browser on a PC with a big screen it's three columns.
>
> When you narrow the screen it will become one on top of another:
>
> @media only screen and (min-width: 800px) {
> /*css for big screens */
> #mainContent, .entirePost, #rssFeeds {
> display:flex;
> }
> #rssFeeds {
> font-size: 85%;
> }
> #latestPostsContainer, #popularPostsContainer, #fieldExitNews {
> width: 33%;
> }
> #midrangel, #itjungle, #code400rpg, #code400freshers {
> width: 25%;
> }
> #postAuthor {
> width: 10%;
> }
> #articleConents {
> width: 90%;
> }
> body {font-size: 80%;}
> #menuNav {white-space: nowrap;}
> }
>
> So you can see, when the screen is wider than 800px it makes the DIVs
> "flex" and changes the size to 1/3 the screen and some other things (as
> well as shrinking the font which when set for a small display is way too
> big IMHO.
>
> Brad
> www.bvstools.com
>
>
> On Thu, Aug 6, 2015 at 12:31 PM, Kelly Cookson <KCookson@xxxxxxxxxxxx>
> wrote:
>
> > Hi Jon,
> >
> > I'm no guru, but I know they refer to responsive columns as responsive
> > grids.
> >
> > Here's a couple of links you might find useful:
> > http://www.sitepoint.com/easy-responsive-css-grid-layouts/
> > https://css-tricks.com/dont-overthink-it-grids/
> >
> > The online, video Pluralsight class I took on responsive web design
> > contained a section on responsive grids. You can get a free trial and view
> > this section of the class entitled " Responsive Columns Using a 12-column
> > Grid." Here's the link to the class:
> > http://www.pluralsight.com/courses/hands-on-responsive-web-design
> >
> > Thanks,
> >
> > Kelly Cookson
> > IT Project Leader
> > Dot Foods, Inc.
> > 1.217.773.4486 ext. 12676
> > kcookson@xxxxxxxxxxxx
> >
> >
> >
> > -----Original Message-----
> > From: WEB400 [mailto:web400-bounces@xxxxxxxxxxxx] On Behalf Of Jon Paris
> > Sent: Thursday, August 06, 2015 12:17 PM
> > To: Web400@Midrange. Web400
> > Subject: [WEB400] Responsive pages
> >
> > We're using a responsive layout for an HTML newsletter and have two
> > questions for you HTML gurus.
> >
> > 1) Right now it looks fabulous on phones and tablets. But when viewed on a
> > high-res screen like my Mac (for example) it is way too wide unless I
> > manually reduce the width of the email window.  Is there a way to say that
> > it should never be allowed to get wider than X?
> >
> > 2) Has anyone come across a two column responsive layout?  I can't find
> > any good examples of that.
> >
> >
> > Jon Paris
> >
> > www.partner400.com
> > www.SystemiDeveloper.com
> >
> > --
> > This is the Web Enabling the IBM i (AS/400 and iSeries) (WEB400) mailing
> > list To post a message email: WEB400@xxxxxxxxxxxx To subscribe,
> > unsubscribe, or change list options,
> > visit: http://lists.midrange.com/mailman/listinfo/web400
> > or email: WEB400-request@xxxxxxxxxxxx
> > Before posting, please take a moment to review the archives at
> > http://archive.midrange.com/web400.
> >
> > --
> > This is the Web Enabling the IBM i (AS/400 and iSeries) (WEB400) mailing
> > list
> > To post a message email: WEB400@xxxxxxxxxxxx
> > To subscribe, unsubscribe, or change list options,
> > visit: http://lists.midrange.com/mailman/listinfo/web400
> > or email: WEB400-request@xxxxxxxxxxxx
> > Before posting, please take a moment to review the archives
> > at http://archive.midrange.com/web400.
> -- 
> This is the Web Enabling the IBM i (AS/400 and iSeries) (WEB400) mailing list
> To post a message email: WEB400@xxxxxxxxxxxx
> To subscribe, unsubscribe, or change list options,
> visit: http://lists.midrange.com/mailman/listinfo/web400
> or email: WEB400-request@xxxxxxxxxxxx
> Before posting, please take a moment to review the archives
> at http://archive.midrange.com/web400.

Jon Paris

www.partner400.com
www.SystemiDeveloper.com