Solved

css - divide columns on home page with line

Posted on 2014-11-30
4
116 Views
Last Modified: 2014-11-30
I have a WordPress/Genesis site with a home page with three columns/widgets.

I put in borders between the "columns" to help separate them visually, but can't get the line to go to the bottom, to the footer. I want the lines to go down to the same spot horizontally.

Is there a way to trick them to do that?

The dev site is at http://uppernyack-ny.us/site1/.
0
Comment
Question by:dougfosterNYC
  • 2
  • 2
4 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40472566
Pop in your footer or somewhere after the jQuery library
<script>
jQuery(function($) {
getmaxheight = Math.max($('#home-middle .wrap aside').eq(0).height(),$('#home-middle .wrap aside').eq(1).height(),$('#home-middle .wrap aside').eq(2).height());
$('#home-middle .wrap aside').height(getmaxheight);
})
</script>

Open in new window

0
 

Author Comment

by:dougfosterNYC
ID: 40472568
ok, that's cool.  the only bummer is that on a mobile device when it is a single column, the gap is there, it doesn't collapse.  

is there a way to have it only do what it does (i can't follow what it is doing) on wide monitors when it has the columns?
0
 
LVL 58

Expert Comment

by:Gary
ID: 40472575
<script>
if(jQuery(window).width()>800){ // or whatever width the columns collapse at.
	jQuery(function($) {
		getmaxheight = Math.max($('#home-middle .wrap aside').eq(0).height(),$('#home-middle .wrap aside').eq(1).height(),$('#home-middle .wrap aside').eq(2).height());
		$('#home-middle .wrap aside').height(getmaxheight);
	})
}
</script>

Open in new window

0
 

Author Comment

by:dougfosterNYC
ID: 40472578
Great, thanks, of course...

so, in the end, I put in this code...
<script>

jQuery(function($) {
getmaxheight = 0;
if($(window).width()>800){
getmaxheight = Math.max($('#home-middle .wrap aside').eq(0).height(),$('#home-middle .wrap aside').eq(1).height(),$('#home-middle .wrap aside').eq(2).height());
$('#home-middle .wrap aside').height(getmaxheight);
}})

Open in new window

0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Writing and Selling Web App Based on Google Sheets 2 44
Location of Buttons 4 15
Add shadow behind div 5 14
Un-Indent Setting Notepad++ 3 9
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

778 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question