Re: Responsive pages

[Bradley Stone <bvstone@xxxxxxxxx>]

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.