Re: Responsive pages

Well it doesn’t have three columns in Safari 7.1 Brad - this is a screen capture of what I see.

http://screencast.com/t/i8TV2o0i6

I have now also tried in in Chrome and I see what you are saying.


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

I don't know what you mean by that, Jon.

The site has 3 columns for recent posts, popular posts and news.

Below that are 4 rss feeds. If you shrink your browser or use a mobile
device with a small display, the RSS feeds (at the bottom) disappear and
the 3 columns should go to one on top of another and the font should go
bigger.

You didn't mention what you were using either to view it (browser, tablet,
phone...). Unless you're using something archaic it should work. :)

Braed
www.bvstools.com

On Thu, Aug 6, 2015 at 3:32 PM, Jon Paris <jon.paris@xxxxxxxxxxxxxx> wrote:

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

--
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