• 0
Sign in to follow this  
Followers 0

iBox and Lists won't take right place on grid


Question

Posted · Report post

Hi guys,

 

Please take look at these screenshots:

 

iBox: http://cl.ly/image/2R2l102t1m1X

 

List: http://cl.ly/image/2V3J3g1R0R2J

 

 

As you can see, both sections exist out of 3 parts. For both sections I've set the "Number of Columns for Each Box (12 Col Grid) " to 4. Even though I've set it to 4, it won't centre.  Does anyone knows whats wrong here?

 

Oh and, could it have anything to do with that I'm using a 13" screen and I've this line in my css:

 
body.display-full .pl-content {
  max-width: 1200px;
}
 
Thanks!

Share this post


Link to post
Share on other sites

15 answers to this question

  • 0

Posted · Report post

You could try just centering the title text, you can do this by either using custom CSS or assigning the center or tac classes to your title div, see here for the HTML/CSS utility classes - http://docs.pagelines.com/tutorials/html-css-utilities

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi there, can you take a screenshot with the editor grid on so we can see the layout it's placed in, whether they're inside another column etc. If they are inside another column, make sure the container column width is set to 12.

 

I don't think that css would effect it, but try removing it to see if the alignment changes, you can paste it back in if not.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

James B 

 

Sorry for the late reply. Was a bit too busy lately. Anyway, here you have the screenshots you asked for:

 

iBox: http://cl.ly/image/2Q2y1o2i0T2Z

 

List: http://cl.ly/image/1F3t0V043b0M

 

As you can see, the iBox section stands good now. I actually didn't do anything as far as I can remember. But the List section is still not centered. Do you have any idea what might be wrong?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Can you provide a link to your site and also, can you provide screenshot of your iBox settings, as from the looks of it you have it configured incorrectly, by having it set to display 4 iboxes using the span3 class. When you should be using the display 3 boxes and the span4 option.

 

In regards to your List, I don't really see the issue, the text is aligned left so it looks as though there is a lot of white space on the right hand side of the third column, but each column has the same dimensions, its just that the content in the third column is rather short.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Danny

 

Thanks for your feedback. 

 

This is the website (my playground on a free hosting server): http://kulmetehan.byethost14.com/

 

In regards to the List section, do you think there is a way to get it so that "Telefoon/Fax" stands exactly underneath the title? If not, it's not a problem.

 

In regards to the iBox section... You were totally right. A very dumb mistake. I had 4/3 instead of 3/4. My bad. 

 

Thanks for the great support!

Share this post


Link to post
Share on other sites
  • 0

Posted (edited) · Report post

Thanks for the tip! I'll try it out asap.

Edited by kulmetehan

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

I'm having a similar issue. I took a screenshot for youto see. I can not get the boxes to center align. They are off to the left:

 

screenshot: http://kimberleegorgo.com/wp-content/uploads/2013/11/ibox.tiff

 

Also is there a way to get some spacing above the boxes so it is not RIGHT BELOW the callout above it?

 

thanks,

Kim

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

KimAnn03

 

What I usually do to get some spacing is putting in a text box with a break: <br /> or a paragraph: < p >

 

I'm not really a pro but that was a simple solution I came up with :)

 

About the boxes.. It looks pretty centered to me. Can't really see what you mean. Sorry :(

Share this post


Link to post
Share on other sites
  • 0

Posted (edited) · Report post

check on my actual page may be easier to see:

 

http://kimberleegorgo.com/

 

It is not incredibly obvious but it does bother me a lot. If you measure the space on the left and the space on the right it'll shock you how significant the difference is. 3/4 centimeter difference to be exact.

 

Please advise. and thanks for the tip about text box going to try it now.

 

 

UPDATE*** the problem is not the iboxes section it is the one box called "meet the coach"/ No matter where i put it it is heavily left justified :/

Edited by KimAnn03

Share this post


Link to post
Share on other sites
  • 0

Posted (edited) · Report post

KimAnn03

 

I now can see what you mean. I can understand that bothering you. Unfortunately I can't really help you out with that one as I'm having similar issues.

 

But I'm sure someone like Danny can definitely help you out.

Edited by kulmetehan

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No entirely sure what the issue is, all iBox even the middle one are almost the exact same width:

 

1st iBox = 366px

2nd iBox = 365px

3rd iBox = 366px

 

So if you can explain what the problem is with the iBoxes, we may be able to assist you.

 

In regards to the space between the iBox and iCallout section, this is caused by you having a TextBox section housing a empty <p></p> tags, remove this and the gap will be reduced.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Danny,

 

I added that callout section because I wanted that space. The problem was (read above) that there wasn't any space above the boxes. Then kulmetehan suggested I add an empty textbox to get some space between my callout section and iboxes. So that is now how I want it.

 

Please look at the amount of space between "meet the coach" and "read the blog(s)". http://kimberleegorgo.com/

 

Meet the coach is heavily left justified and there is too much space between those 2 boxes. I deleted the box then recreated it and it did the same thing. Tried it without an image still the spacing issue. Here is a snapshot of it in 2 different locations so you can see that no matter where i put it it is too far to the left.

 

http://kimberleegorgo.com/wp-content/uploads/2013/11/a.tiff

 

http://kimberleegorgo.com/wp-content/uploads/2013/11/b.tiff

 

let me know if you need more info.

 

thanks,

Kim

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

The First box http://d.pr/i/sVQz is the same width more or less as the other boxes. It is just that there is not as much content in the first box. 

 

The space on either side of the boxes and the edge of the page is the same on both sides http://kimberleegorgo.com/ 

 

If you add some more wording to the first box it should look more balanced. 

 

Here is a screenshot of the box set ups http://d.pr/i/HeKs - they are all the same. 

 

You can see when you shrink the width of the browser window the boxes shring to fill the space. http://d.pr/i/F7P7 

 

The grid is based on a percentage of the screen width so it resizes evenly to fit the width of the page 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

thank you Martin Davies. I see what you are saying and now I can add text to appease my spacing eye :). THanks for looking into this.

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