Jump to content

Archived

This topic is now archived and is closed to further replies.

kulmetehan

iBox and Lists won't take right place on grid

Recommended Posts

kulmetehan    13
kulmetehan

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
James B    436
James B

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.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
kulmetehan    13
kulmetehan

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
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
kulmetehan    13
kulmetehan

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
kulmetehan    13
kulmetehan

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

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

No problem.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
kulmetehan    13
kulmetehan

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
KimAnn03    2
KimAnn03

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 :/

Share this post


Link to post
Share on other sites
kulmetehan    13
kulmetehan

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.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
KimAnn03    2
KimAnn03

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
greenfly    230
greenfly

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 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
KimAnn03    2
KimAnn03

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

  • Similar Content

    • DonRicardoRVM
      By DonRicardoRVM+
        First of all, sorry for my bad English.  I am developing an ecommeece with wp, woocommerce, PL5 and quickshop, and I need to do some changes in the simple product grid. I want to change the classes of some divs, but I can't find the templates. 
      Also, I change the grid of the category products pages, but I didn't make it correctly.
      This is the cat archive's: http://globosdemar.com/wp/categoria-producto/camisetas-para-ninos-y-ninas/
      Can you help me?
    • jojoking
      By jojoking+
      I have to admit to being baffled.
      I'm trying to embed a video (from my WP media library) within a WP post using the videobox section shortcode.
      The shortcode section popup only allows two items to be configured - the section type, in this case videobox - and a unique id. There's no URL or other parameters such as autoplay or loop which are available within the Pagelines editor.
      Whatever I put in the unique ID makes no difference to what is shown which seems to be a default video with stars or white noise on a black background.
      I assume I need to define this ID somewhere else, or maybe WP has done it for me?
      HELP!
       
      PS This is the page source generated when a shortcode is added within the WP post editor
      <!-- VideoBox | Section --> <section id="videobox_1675853156" class="pl-sn pl-col-sm-12 pl-col-sm-offset-0 pl-sn-videobox" data-object="PL_VideoBox" data-clone="1675853156" data-level="0"><div class="pl-sn-wrap"><div class="pl-sn-pad fix" data-bind="pledit: true" > <div class="video-highlight"><h3 class="video-title" data-bind="pltext: vb_title"></h3></div> <div class="pl-video-box" data-bind="plcallback: { vb_autoplay: vb_autoplay(), vb_loop: vb_loop(), vb_controls: vb_controls(), vb_video: vb_video()}" data-callback="videobox"> <video id="280414138" autoplay loop > <source src="https://www.handinhandmanchester.org.uk/wp-content/plugins/pl-section-videobox/default.mp4?r=280414138" type="video/mp4" /> No browser html5 video. </video> <script> jQuery('#280414138')[0].load(); </script> </div> </div></div></section> </div>  
      If I add a videobox section using the Pagelines page editor the page source generated includes my video:
      <!-- VideoBox | Section --> <section id="videobox_udvu4uz" class="pl-sn pl-col-sm-12 pl-col-sm-offset-0 pl-sn-videobox" data-object="PL_VideoBox" data-clone="udvu4uz" data-level="0"><div class="pl-sn-wrap"><div class="pl-sn-pad fix" data-bind="pledit: true" > <div class="video-highlight"><h3 class="video-title" data-bind="pltext: vb_title"></h3></div> <div class="pl-video-box" data-bind="plcallback: { vb_autoplay: vb_autoplay(), vb_loop: vb_loop(), vb_controls: vb_controls(), vb_video: vb_video()}" data-callback="videobox"> <video id="429558737" autoplay loop > <source src="https://www.handinhandmanchester.org.uk/wp-content/uploads/2017/04/HIHWelcome.mp4?r=429558737" type="video/mp4" /> No browser html5 video. </video> <script> jQuery('#429558737')[0].load(); </script> </div> </div></div></section>  
    • flourishdesignstudio
      By flourishdesignstudio
      Hi,
      I am having an issue with the Lax sections on Platform 5. I can embed a widget or text box into a Lax section which is really neat, but the image in the background (the parallax image) seems to get stretched and doesn't scale in an attractive way.  For example, the page http://ed6.61e.myftpupload.com/#clients has a parallax section with a woman's face  and I thought is would scale as the browser window gets smaller but the zoom-level never changes. Also, the amount of parallax shift seems more dramatic than what we want. I thought that if I uploaded a shorter image it would scan/scroll less since the height from the image's top to bottom would be less. However, that doesn't seem to have any effect and I am at a loss of how to properly control the way the image is displayed within that box. Any thoughts, tips, or suggestions to get me pointed in the right direction?
      Thanks so much for the help!
    • PierreFF
      By PierreFF+
      Hello Everyone, 
      I think this one is for the pagelines team. 
      I have some trouble with the Adventure section plugin https://www.pagelines.com/product/pl-section-adventure/ that doesn't seem to load in any of the three websites I run using pagelines. 
      I do the setup via the extend platform as usual. It tells me that the plugin is installed and activated but unfortunately it doesn't appear on the page editor.
      I have just tried it consecutively with three websites I own with the same result.
      My intention was to use it with this website: http://launchpadweekend.foundersofthefuture.co/ (free version)
      And I also tried with this website http://foundersofthefuture.co/ (pro license) and this one http://ffactor.me/ (free version). And I have the same problem with each. 
      I would love to see how I could solve this issue. 
      Thanks a lot. 
      Pierre
       
    • chamois_blanc
      By chamois_blanc+
      What is the right/best way to make a one-page website with PL5? The framework seems to hardcode section IDs without any possibility of changing them. Scrolling to a page section requires the link to use the section ID, ie <a href="#<section_ID>">...</a>. I don't see myself hardcoding weird section IDs in there as this will show up in the address bar.
      Please advise, thanks!
×