• 0
Sign in to follow this  
Followers 0

Adding a border to a column class causes a page reflow


Question

Posted · Report post

I was working on another area of a site and was still finding this issue whereby you can use CSS to add a background to a column class but if you add a border it looks fine until you preview the site - then you'll see one column has jumped underneath. This happens if you have a two or three column layout across the page. 

 

I couldn't see any guidelines that mention this. Example:

 

If I add the following custom classes to my my code (they are column classes 6/12 - 6/12 layout)

 

.diamond, .events-column {
background-color: orange;
  border-radius: 3px;
}
 
It's fine, I get a nice orange box with a radius. But if I want to add border to my box and include:
 
.diamond, .events-column {
background-color: orange;
  border-radius: 3px;
  border-style:solid;
border-width:2px;
}

 

The boxes look ok in the visual editor but when you preview the site the columns reflow and jump to the next available area. 

Share this post


Link to post
Share on other sites

9 answers to this question

  • 0

Posted · Report post

Hi,

 

The reason why adding a border knocks everything to naf is because the columns are calculated. By adding a border you throw this off, so instead of using border, use box shadow instead.

 

http://d.pr/i/brqC

 

The code I used is in the screenshot.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hello nfp1900 

 

Do you have a link to your site please? 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

This is an example of where it would happen: http://oraclecancertrust.org.gridhosted.co.uk/ways-to-donate/

 

I've tried it with different columns widths etc and it's always the same problem with the reflow when adding a border of any size. If you add the border via Chrome tools to test the CSS it's fine. But try adding it in the custom code box and you get a reflow.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi there,

 

Try the followingm including the margin within the css for the class. That gives this result - http://screencast.com/t/5q4ib0K9Zf

 

.donation-1, .donation-2, .donation-3 {
    background-color: #C3EAE8;
    border: 1px solid #000000;
    border-radius: 5px 5px 5px 5px;
    margin-left: 1% !important;
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks for the answer

 

So that works for a 1 or 2px border but with 3px and the column reflow issue comes up again. Changing the margin-left % value then doesn't have any effect to correct the issue. 

 

Is there a sure way to get column backgrounds and borders working?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Ok that does it, thanks. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No problem.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Danny

 

I tried adding your code to my custom css but I till get the overflow problem

 

.fffwhitecolumn {
  background-color: #FFF;
    color: #303030;
    border-radius: 20px;
  box-shadow: 0px 0px 0px 4px #B2B2B2;
}
 
 
any ideas?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Where is the overflow issue, I'm not seeing it on that page you linked.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0