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)
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?
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;
}
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;
}
}