Jump to content


Photo

Pagelines boxes alignment issue - 3 in a row


  • Please log in to reply
13 replies to this topic

#1 truffledome

truffledome

    Member

  • Members
  • PipPip
  • 14 posts

Posted 25 August 2011 - 05:59 PM

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

#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 25 August 2011 - 06:28 PM

Somehow you've shifted from Boxes to Soapboxes. See this http://www.pagelines...boxes-soapboxes

#3 truffledome

truffledome

    Member

  • Members
  • PipPip
  • 14 posts

Posted 25 August 2011 - 08:39 PM

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

#4 truffledome

truffledome

    Member

  • Members
  • PipPip
  • 14 posts

Posted 25 August 2011 - 08:44 PM

p.s this article http://www.pagelines...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?

#5 kastelic

kastelic

    Advocate

  • Members

  • 3081 posts
  • Country: Country Flag

Posted 25 August 2011 - 09:34 PM

Check your validation here: http://validator.w3....rufflehost.com/ You've got some unclosed html tags causing the misalignment.

#6 truffledome

truffledome

    Member

  • Members
  • PipPip
  • 14 posts

Posted 31 August 2011 - 11:21 AM

Ok, many thanks!

#7 truffledome

truffledome

    Member

  • Members
  • PipPip
  • 14 posts

Posted 31 August 2011 - 12:28 PM

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

#8 truffledome

truffledome

    Member

  • Members
  • PipPip
  • 14 posts

Posted 31 August 2011 - 04:33 PM

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

#9 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 31 August 2011 - 05:27 PM

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 ]

#10 truffledome

truffledome

    Member

  • Members
  • PipPip
  • 14 posts

Posted 31 August 2011 - 05:53 PM

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.

#11 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 31 August 2011 - 06:06 PM

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.
 .single #maincontent {width:1100px;}


#12 truffledome

truffledome

    Member

  • Members
  • PipPip
  • 14 posts

Posted 31 August 2011 - 11:49 PM

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

#13 truffledome

truffledome

    Member

  • Members
  • PipPip
  • 14 posts

Posted 01 September 2011 - 12:01 PM

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.

#14 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 01 September 2011 - 07:40 PM

I've brought your comments to the attention of the developers.