Build Your Own Business Website header image

Welcome to our Members Only Forum

You are welcome to view the content on our Forum, just scroll down to view this forum post.
If you like what you find and want to be able to post a question, please check out our subscription options.
Please feel free to search the forum using either the Google Site Search above or the forum search below.


— Forum Scope —

— Match —

— Forum Options —

Minimum search word length is 3 characters - maximum search word length is 84 characters

sp_Feed sp_TopicIcon
Two columns of text...@media and spacing between items
Paddy Duncan
Newcastle, Ontario, Canada

Community Member
Forum Posts: 133
Member Since:
August 14, 2014
sp_UserOfflineSmall Offline
April 28, 2017 - 2:53 pm
sp_Permalink sp_Print sp_EditHistory

Here's the page:


I've finally gotten this working reasonably well, but I'd also like it to have the headings under the photos for narrower windows - the lists pop under there fine, leaving the headers behind for a span - until the window gets narrow enough. I've fiddled with the @media width but nothing has worked quite right.

And the other issue is that there is a huge amount of space between some of the items in the narrow window/media view. I realize that the min height (which appears to be entirely necessary - otherwise the page falls apart) is probably causing this, but when I try setting a different min height in the media view, things go screwy too - the column of text becomes disassociated from its photo.

Any help in fixing some of these things would be appreciated. And if there is something else entirely that I should be considering, please let me know! 

BTW - first few attempts to add the CSS to this post resulted in the post being rejected because of embedded code (??) 

.columns {
 -moz-column-count: 2;
 -moz-column-gap: 26px;
 -webkit-column-count: 2;
 -webkit-column-gap: 26px;
 column-count: 2;
 column-gap: 26px;
 padding:0 5px;
 min-height: 250px;
 .columns ul{margin:0;padding:0 0 0 2em;list-style:square;}
 @media screen and (max-width:760px){
 .columns {
 -moz-column-count: 1;
 -moz-column-gap: 0;
 column-count: 1;
 column-gap: 0px;
 display: inline-block;
 white-space: nowrap;
Rick Anderson
Desert Hot Springs, CA
Forum Posts: 13637
Member Since:
November 8, 2009
sp_UserOfflineSmall Offline
May 2, 2017 - 4:20 pm
sp_Permalink sp_Print

Wow, that's very nice - and I learned something!

In the phone landscape media query make .columns display:inline

Forum Timezone: America/Los_Angeles

Most Users Ever Online: 228

Currently Online:
18 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

Keith W Jones: 1441

Brian Tozer: 1004

Carolin: 983

Heidi Hafner: 509

John Cunningham: 423

Reece Morrel: 353

Newest Members:






Tijs de Jong

Forum Stats:

Groups: 8

Forums: 46

Topics: 7002

Posts: 34838


Member Stats:

Guest Posters: 6

Members: 6763

Moderators: 2

Admins: 2

Administrators: Rick Anderson, Rick Anderson

Moderators: Pierre Cote, Laura Nugent