Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

css - divide columns on home page with line

Posted on 2014-11-30
4
Medium Priority
?
144 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 2000 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

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

571 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