Jump to content
Sign in to follow this  
truffledome

Pagelines boxes alignment issue - 3 in a row

Recommended Posts

truffledome

Hi, I don't understand what is happening with the alignment of the pageline boxes on www.ginandcrumpets.trufflehost.com . Initially it worked fine - they aligned horizontally, 3 in a row with a thumbnail image, but now they are not lining up. I have not added any custom CSS. When I first installed Pagelines Pro it worked fine (as it does on my other site www.crackclothing.com ) but now, no matter what I do, the 3 boxes do not line up. I have tried changing .dcol width etc... but to no avail. To check I have: - made sure the box settings are 'Default number of Feature Box Columns = 3' and 'Max number to show = 3' - ensured the thumbnail size is set (in this case the default 64 x 64 px). - no added any custom CSS. Despite the correct settings to show 3 boxes, I have noticed that the CSS is calling .dcol_container_2 { rather than .dcol_container_3 { ,so I presume this is the probably cause of the issue. Could someone take a look as it's driving me up the wall? Many thanks

Share this post


Link to post
Share on other sites
Rob
Somehow you've shifted from Boxes to Soapboxes. See this http://www.pagelines.com/docs/boxes-soapboxes

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
truffledome
Thanks, but I can't figure out how that has happened. I haven't enabled any soap boxes via the drag n drop template editor and even if I disable the thumbnails on the boxes (the above article says different sized thumbnails can cause boxes to misalign) the boxes still don't nestle automatically into a neat row. Anyone else experienced this issue? Many thanks

Share this post


Link to post
Share on other sites
truffledome
p.s this article http://www.pagelines.com/docs/boxes-soapboxes states that boxes can have an icon top or left, where is the setting to change this? Furthermore and to the original point, I still don't understand why the CSS is calling .dcol2 when the settings in Box Settings are clearly set to max 3, display 3?

Share this post


Link to post
Share on other sites
kastelic
Check your validation here: http://validator.w3.org/check?verbose=1&uri=http://ginandcrumpets.trufflehost.com/ You've got some unclosed html tags causing the misalignment.

Share this post


Link to post
Share on other sites
truffledome
Ok thanks, I've tidied this up, but now the boxes are aligned vertically and not horizontally. Any ideas? www.ginandcrumpets.trufflehost.com Many thanks

Share this post


Link to post
Share on other sites
truffledome
In fact, I can't identify which unclosed html tags are causing the misalignment, and indeed I don't know how they ended up as unclosed to begin with? Thanks

Share this post


Link to post
Share on other sites
Rob
Hi, Someplace between these types of tags, please copy and paste the Custom CSS in your installation. [code ] remove the blank space after the word code [/code ]

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
truffledome
Thanks so much rangelone, one day I'll learn my coding properly! Here's the custom CSS: p, .p { margin-bottom: 1em; padding-top: 10px; } /single post page full width/ .single #maincontent {width:1100px;} .mainlogo-img { border-radius: 5px 5px 5px 5px;} /.mainlogo-img { box-shadow: 2px 2px 5px silver; }/ body #primary-nav ul li a:hover.sf-with-ul { color:#702b3e; } body #nav_row>ul>li {background:transparent; font-weight:bold;} body #nav_row>ul>li:hover {background:#fff} body #primary-nav ul li a:hover.sf-with-ul { color:#702b3e; } body #nav_row>ul>li a:hover{color:#702b3e} #primary-nav ul.sf-menu li a { color: #702b3e; font-size: 15pt; } .widget-title {padding-bottom: 15px;} .widget-pad {padding: 10px;} /#nav .current_page_item a:hover, #nav .current_page_ancestor,#nav ul li a:active, .post-comments a:hover { font-family: reenie beanie; font-size: 14pt; }/ .metabar { padding-top: 10px; } *********************and here's the Child (Base) theme:************************* /* @ Pullquote Section */ #pullquote.copy{ background: #f7f7f7 url(images/pullquote.png) no-repeat 15px 15px; padding: 15px 20px 15px 45px; margin-bottom: 1.5em; } #pullquote .thepullquote{font-size: 1.5em;margin-bottom: 5px;line-height: 1.3em;} #pullquote .thecitation{color: #AAA; font-style: italic;padding-left: 15px;} .entry_content img { max-width: 100%; border-radius: 10px 10px 10px 10px; -moz-border-radius:10px 10px 10px 10px; -webkit-border-radius:10px 10px 10px 10px; box-shadow: 5px 8px 15px #CCCCCC; -moz-box-shadow: 5px 8px 15px #CCCCCC; -webkit-box-shadow: 5px 8px 15px #CCCCCC; } /.hfm_border_shadow, .fbox, .widget {/ /padding:10px 10px 10px 10px;/ /border:1px solid #DDDDDD;/ /box-shadow:2px 2px 3px #CCCCCC;/ /border-radius:15px;/ /margin-bottom: 7px;/ #feature_slider .fmedia .dcol-pad { padding: 2px; border-radius: 20px 20px 20px 20px; } #carousel .thecarousel {border-radius: 20px 20px 20px 20px;} #carousel .content ul li a img {border-radius: 20px 20px 20px 20px;} #carousel .content ul li a img { background: transparent; border: none; border-right: none; border-bottom: none; } #tbheader { display: none; } .fpost .post-title h2 { padding-bottom: 0; font-size: 2em; line-height: 1em; margin: 0; text-transform: none; text-align: center; } #primary-nav li.page_item a {color: black; font-size: 14pt;} / FOnt Sizes FFS?/ h1, h1.pagetitle {font-size: 2.3em;} h2{font-size: 2.3em;} h3{font-size: 2.3em;} h4{font-size: 2.3em;} h5{font-size: 2.0em;} h6{font-size: 1.3em;} /metabar/ .metabar { font-size: 50%; } .main_nav ul li {font-size: 34px;} .site-description { font-size: 1.5em; margin-left: .2em; } h3 { font-size: 1.5em;padding-top: 15px; text-align: center;}/search form /.searchform {position: relative;width: 5px;margin: 0 auto;margin-top: 13px;}.searchform input.submit { display: none; } Thanks again.

Share this post


Link to post
Share on other sites
Rob
I see three potential problems. Just potential, mind you. First, I don't see a body tag at the top. Try adding body{} (you can edit it later) Second, the body code you have is showing up in the middle of your CSS. Oddly with CSS, order sometimes is important. Please move anything beginning with body under the line I just asked you to add. Third, I'm unsure what impact this line could have on your boxes as they fall within the maincontent area. [code].single #maincontent {width:1100px;} [/code]

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
truffledome
Hi, I've actually removed all the custom CSS and Base child CSS and the problem still remains with the boxes. Could you have another look and see if that makes it easier to spot the problem. Many thanks

Share this post


Link to post
Share on other sites
truffledome
Hi, I actually took the crowbar to the problem and copied over style.css from another platform site I've built which rectified the problem. I have to say Pagelines is great in concept, but in practice following the trail of CSS through the different style sheets via Firebug or Chrome Inspector is not easy at all and makes no obvious logical sense and is very unforgiving, unlike other platforms I have used e.g. It just took me half an hour of messing about trying to change the font size of .metabar for goodness' sakes! Changing font sizes via Typography settings would seem industry standard non? The Platform should not be recommended to beginners at all, but thanks to the attentive support staff. I will be trying Thesis, Headway or one of the many others in future.

Share this post


Link to post
Share on other sites
Rob
I've brought your comments to the attention of the developers.

Former PageLines Moderator, Food Expert and Raconteur

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  

×