As a programmer I know enough about CSS to be able to spell it!
So with that as a starting point, I am having an issue and trying to figure out where to resolve it.
For several of my pages that I am using Page Builder I would like to add a “row” with two columns. The first column will display my 5 most recent posts using the “WordPress Recent Posts” widget. The second column is a SiteOrigin Button that links to a page with all posts being available.
This works as easy as expected with the row in Page Builder. NOW, what I would also like to do is add a border around the entire row so that it “stands out” from the rest of the page a little bit.
To do that I have added the following CSS (“borrowed” from somewhere on this site):
/*
Add borders to class
*/
.addBorder {
position: relative;
margin: -9px 0 9px 0;
text-align: center;
border: 4px double #000;
line-height: 0;
}
Without adding the “addBorder” class to the row, everything looks good when I have a post that wraps to a second line. Example shown here:
And now just simply adding the “addBorder” to the class for the row, this is what it looks like:
Something is broke.. But what?
Hi Andy,
An easy way to do this without having to use CSS would be to add a layout builder to the main column. A layout builder is a SiteOrigin Page builder in widget form so you have complete control over the contents and can use it to create a border around all of the widgets inside of the layout builder.
Can you please try sending the example again? It doesn’t appear to have come through correctly – sorry about this!
Lets try the links again…
Here is the image of the row without the border and everything looks good.
Here is the image of the row with the border added. Note that the post that “wraps” is the one that has the problem.
Seems images from Dropbox do not like being inserted as an “image”.. If you right click on the broken images and copy the URL and paste it in a new tab it should work…
Hi Andy,
I suspect this is related to the margin in your CSS. I would remove it to see if that helps. So in other words, replace your CSS with:
.addBorder { position: relative; text-align: center; border: 4px double #000; line-height: 0; }How does that look? If it’s not very good. Do you have a public URL where we can take a look at what’s going on?
Still no luck. The site is still a work in progress, but I have left the changes in place. You can hit the site here:
http://heyandy.com
Hi Andy,
Oh. Well, I feel silly (as I should have picked up on it sooner). It’s the line-height. :(
Sorry about this!
No need to be sorry! I removed the line-height and it is working.
One day I may actually have time to actually dig into CSS and Javascript.. For now I will stay on the middle and backend programming side for my day job.. :-)
Thank you for the quick response! You guys rock!