Solved

css - divide columns on home page with line

Posted on 2014-11-30
4
122 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

733 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