Portfolio page's boxes don't align

Homepage Community Forums Epik Theme Support Portfolio page's boxes don't align

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #15757
    shona
    Customer

      Hi all,

      I鈥檓 building a site for a client using Epik and you can find the hidden version at http://www.slogancreator.com.au/newsite.

      I am using the Portfolio on two pages and the post entires which form the portfolio boxes don’t line up properly. Example is at: http://slogancreator.com.au/newsite/examples/slogan-examples/
      I can see that it’s because the entries are not the same height, but the client will be adding information to them which will never be the same height.

      Is there a way to ensure each post box lines up right after the one above it ends? This way they will look much neater and cohesive.

      Thanks,
      Shona

      #15768
      scottmc59
      Customer

        How did you do that logo. Every time I try to upload a horizontal or wide logo it wants to crop it to more of a square shape. I”m guessing it’s a graphic vs text, or is there a way to use text and an image.

        thanks.

        Scott

        #15769
        shona
        Customer

          Hi Scott,

          I created the graphics first and then uploaded them (sized to 250px wide). It’s the long way around and so isn’t very convenient but I can’t figure out a better way. 馃檨
          I also have a problem where if you upload an image at full width for it to crop (e.g. the greyscale lion one) the gallery box leaves a white space on the right which looks no good – it doesn’t fill the whole square!

          #15796
          Wes
          Moderator

            @shona there is an update to the theme that fixes this issue. In your page_portfolio.php file, change the section that looks like this (near the bottom) –

            // Clear float using genesis_custom_loop() $loop_counter variable
            // Outputs clearing div after every 4 posts
            // $loop_counter is incremented after this function is run
            add_action( 'genesis_entry_footer', 'portfolio_after_post' );
            function portfolio_after_post() {
                global $loop_counter;
                
                if ( $loop_counter == 3 ) {
                    $loop_counter = -1;
                    echo '<div class="clear"></div>';
                }
            }

            To this instead –

            // Outputs clearing div after every 4 posts
            add_action( 'genesis_after_entry', 'portfolio_after_post_4' );
            function portfolio_after_post_4() {
                
            	global $wp_query;
                
                // Assumes 4 posts per row
            	$end_row = ( $wp_query->current_post + 1 ) / 4;
                    
            	if ( ctype_digit( (string) $end_row ) ) {
            		echo '<div class="portfolio-clear-2"></div>';	
            	}
            }

            ALSO, add this to your style.css file –

            .portfolio-clear-2 {
            	clear: both;
            }

            ^ Add this in the Portfolio section of the CSS which should be around line 2598 (in your style.css file) –

            /*
            Portfolio
            ---------------------------------------------------------------------------------------------------- */

            ^ Add it in or at the bottom of that section in your CSS.

            Next add this code in your Responsive Section under the (max-width: 580px) around line 4263 –

            
            	.portfolio-clear-2 {
            		clear: none;
            	}

            If you would like for me to do it for me, just let me know. You can send a Private Message with a login if you need to (this can be done by checking the “Private Reply” checkbox). Just let me know if that helps.

            #15798
            Wes
            Moderator

              Make sure and see my response from the other day if you haven’t already…..but I also wanted to let everyone know that I’ll be adding a couple minor updates to the theme that will fix a couple small issues that I noticed. It’s nothing big, or required, but something that will probably fix/adjust small visual issues depending on the site. I’ll make sure and update the Epik Forum page to let everyone know when it’s ready.

              Thanks

              #15799
              shona
              Customer

                Hi Wes,

                Thanks very much for your reply – I hadn’t received an email when your message on the 6th was posted. I have made the update to page_portfolio.php but unfortunately it didn’t make any difference. Any idea why?

                #15802
                Wes
                Moderator

                  I edited my reply above and added the CSS that is needed to get everything working. Try adding that and it should work. If there is an issue, or if you want me to add it for you, just let me know. This will be in the next update, so adding this code won’t be necessary in the future. I’ll make sure and have it fixed 馃檪

                  #15803
                  shona
                  Customer

                    Hi Wes,

                    Your edited notes seems to refer to two parts of CSS which I need to add or edit (one to go within Portfolio and another to go with Responsive.) The responsive bit is within your editor box above just fine but the first box only says:

                    “/* Portfolio————————————— */)”

                    Could you please check your post and tell me what the first editor box of CSS should say? I added the Responsive bit and so far nothing has changed on the site so I’m just waiting for your next bit.

                    #15810
                    Wes
                    Moderator

                      Sorry about that, I left a part of the code out (thats what happens when it’s really late and dealing with a lot of code haha). I did just edit the original reply above, but lets just start over fresh and we can follow this guide below.

                      First, add this code in the Portfolio section –

                      .portfolio-clear-2 {
                      	clear: both;
                      }

                      That can go inside the Main Portfolio section in your CSS. Or you can add this at the very bottom of the CSS, but not inside of the Responsive section.

                      The second set of code goes in the responsive section under (max-width: 580px) around line 4263.

                      .portfolio-clear-2 {
                      	clear: none;
                      }

                      I’m looking at your CSS file and it looks like you just added the last step/code at the bottom of the CSS when it should be inside of the Responsive Section of the CSS.

                      So once we add the code in those 2 spots it should be fixed. I apologize again for the confusion.

                      #15812
                      shona
                      Customer

                        Yippee! That worked! Thank you SO much for your time Wes. The support here is awesome. 馃檪

                        #15813
                        Wes
                        Moderator

                          You’re Welcome!

                        Viewing 11 posts - 1 through 11 (of 11 total)
                        • The topic ‘Portfolio page's boxes don't align’ is closed to new replies.