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.

Avatar
Search

— 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
Avatar
Paddy Duncan
Newcastle, Ontario, Canada
Jedi
Members

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

Here's the page: http://knowlesplumbing.com/tes...../showroom/

 

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;
 -webkit-column-count:1;
 -webkit-column-gap:0;
 column-count: 1;
 column-gap: 0px;
 display: inline-block;
 white-space: nowrap;
 }
 }
Avatar
Rick Anderson
Desert Hot Springs, CA
Admin
Forum Posts: 13637
Member Since:
November 8, 2009
sp_UserOfflineSmall Offline
2
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:
19 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

Keith W Jones: 1428

Brian Tozer: 1004

Carolin: 982

Heidi Hafner: 508

John Cunningham: 423

Reece Morrel: 353

Newest Members:

emma62755

sharonmarks

emma80233

Tijs de Jong

Daniel Frey

mutek

Forum Stats:

Groups: 8

Forums: 46

Topics: 6995

Posts: 34796

 

Member Stats:

Guest Posters: 6

Members: 6761

Moderators: 2

Admins: 2

Administrators: Rick Anderson, Rick Anderson

Moderators: Pierre Cote, Laura Nugent