× The internal search function is temporarily non-functional. The current search engine is no longer viable and we are researching alternatives.
As a stop gap measure, we are using Google's custom search engine service.
If you know of an easy to use, open source, search engine ... please contact support@midrange.com.



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.



As an Amazon Associate we earn from qualifying purchases.

This thread ...

Follow-Ups:
Replies:

Follow On AppleNews
Return to Archive home page | Return to MIDRANGE.COM home page

This mailing list archive is Copyright 1997-2024 by midrange.com and David Gibbs as a compilation work. Use of the archive is restricted to research of a business or technical nature. Any other uses are prohibited. Full details are available on our policy page. If you have questions about this, please contact [javascript protected email address].

Operating expenses for this site are earned using the Amazon Associate program and Google Adsense.