Ask your WordPress questions! Pay money and get answers fast! (more info)

Lining up buttons with css WordPress

  • SOLVED

Hi Guys

What is the best way to line the buttons up on this page

http://swo.wpengine.com/

See this screenshot: http://screencast.com/t/WoUFZK7Rg

Thanks
Steve

Answers (4)

2014-04-30

Kyle answers:

Right now they are centered, how do you Want them to align?


Kyle comments:

Sorry, small monitor haha, will follow up


Kyle comments:

You could set a min-height for the <p> text that is the same as the largest.

Can also write a quick jQuery script, that compares the heights of the three <p> areas, then sets the min-height for each based on the largest value? Would that work?


Steve Watson comments:

I want them all aligned vertically so they are on the same line, does that make sense.

The screenshot shows what I am trying to achieve

http://screencast.com/t/WoUFZK7Rg

In chrome on Windows they look fine but not on Chrome on my mac. Why the difference?


Steve Watson comments:

haha yes our messages crossed.

yes the min height thing would work, I like it.

I want to try and steer clear of jQuery on my own site as I will get myself in all sorts of trouble. I'm only just getting my head around css :)

But thanks for the offer :)


Kyle comments:

From the look of the screencast, you are getting just a touch different padding (or margin), which is knocking the text onto an extra line on the first box.

Could have something to do with a font that is measured in em/rem, and is slightly bigger based on zoom, etc.


Kyle comments:

Do you want me to write up the css for you?

2014-04-30

Jihan Ahmed answers:

wrap the inner text in a class like

<p class="inner-text">My background is in hospitality, looking after your customers wants, wishes and needs. I bring this to my web business fusing my knowledge of customer care and technology to build a business that thrives on happy clients.</p>

then on ur stylesheet set the minimum height like

.inner-text {min-height: 250px;}

adjust the height according to its need.


Jihan Ahmed comments:

also use the display: inline-block in button css it will prevent overriding of p text if use firebug u can see what I meant...

.btns {
background: none repeat scroll 0 0 #506986;
border-radius: 0;
color: #FFFFFF;
display: inline-block;
font-family: Lato;
font-size: 18px;
font-weight: 300;
padding: 10px 25px;
}

2014-04-30

Fakhri Rahman answers:

it looks good on my chrome.

2014-05-01

zebra webdesigns answers:

Hi Steve

Just an added suggestion. modify your code with media query. for the views less than 1141px three boxes goes one by one. not side wise.
so min-height makes it appear like more space. since each box goes 100% width.

@media all and (min-width:1140px){
#ez-home-top-container .inner-text {
min-height: 190px;
}
}