Autofocus+ Pro Theme | Question with post grid on homepage WordPress
- SOLVED
Hello,
I currently have the Autofocus+ Pro theme installed on my website and have a question with the grid of images on the homepage:
daniel-marsden.com
Username: test
password: testes
Currently, if you scroll down to the bottom of the home page, you will notice the grid of 4 horizontal thumbnail images linked to each post breaks into a grid of only 3 horizontal images towards the end of the page. No idea why this is happening - I would like the grid width to stay at 4 images across horizontally throughout the duration of the page - even if I decided to add 30 more posts.
Any idea as to why this is happening and a fix?
Any help would be appreciated.
Thank you!
Answers (2)
Ivaylo Draganov answers:
Hello,
add this to your style.css:
.blog #content .hentry:nth-child(4n+5) {
margin-right: 0;
}
This is CSS3 so it won't work in older browsers. You could use JavaScript to add support for them.
Ivaylo Draganov comments:
Here is the way to do it with jQuery (since you have it loaded in the theme already):
jQuery(document).ready(function(){
jQuery(".blog #content .hentry:nth-child(4n+5)").css("margin-right", "0");
})
This patches support for older browsers with javascript enabled.
It was initially broken in the theme because it CSS selectors used static classes (such as .p8, .p12, .p24 up to .p32), applying <em>margin-right: 0</em> to them. It's still not such a bad technique, as long as the number of items is low.
Ivaylo Draganov comments:
Let me know if you need assistance on implementing the fixes.
Daniel Marsden comments:
Ivaylo,
When I insert the first line of code you instructed above into my style.css document at the very end of the document it works perfectly. Here is what I'm using:
/* various fixes from wpquestions
-------------------------------------------------------------- */
.blog #content .hentry:nth-child(4n+5) {
margin-right: 0;
}
But ideally I would like the code to work with older browsers and use the jQuery method of your second suggestion but I am pasting it into at the end of my style.css document just like the above code but it doesn't appear to be working. Any ideas why? Here is what I'm using:
/* various fixes from wpquestions
-------------------------------------------------------------- */
jQuery(document).ready(function(){
jQuery(".blog #content .hentry:nth-child(4n+5)").css("margin-right", "0");
})
Thanks Ivaylo
Ivaylo Draganov comments:
You should place the jQuery script in the <head> section of your theme and not in the CSS file. You could do that by hacking in <em>header.php</em>, but I think it's much better to use <em>functions.php</em>. Place this code in your <em>functions.php</em>:
<?php
// add scripts to <head> using wp_head() hook
add_action( 'wp_head', 'custom_head_scripts', 99 );
function custom_head_scripts() {
$output = '<script type="text/javascript">';
$output .= '/* <![CDATA[ */';
$output .= 'jQuery(document).ready(function(){';
$output .= 'jQuery(".blog #content .hentry:nth-child(4n+5)").css("margin-right", "0");';
$output .= '})';
$output .= '/* ]]> */';
$output .= '</script>';
echo $output;
}
The file <em>functions.php</em> resides in your theme's folder. Create it if it doesn't exist. If it exists, make sure to remove the opening <em><?php</em> when pasting it (so it doesn't break your script, if <em><?php</em> has already been opened).
Let me know how it went. Cheers
Daniel Marsden comments:
Ivaylo,
I placed your above script into my functions.php file in the "autofocuspro" folder in the wordpress directory on my server and it solved the problem perfectly. I am awarding you the prize money now.
Thank you!
Beth Alexander answers:
Change the spacing between each image in the portfolio and you are all set. Find this entry in /wp-content/themes/autofocuspro/css/portfolio-layout.css?ver=20100610
and change the margin line to: 0 12px 16px 0;
.blog #content .hentry {
clear: none;
float: left;
height: 188px;
margin: 0 12px 16px 0;
overflow: hidden;
padding: 0;
position: relative;
width: 188px;
}
Daniel Marsden comments:
Beth,
I don't prefer this method because I want the white negative spacing between the images to be uniform, ie., 16px top, right, bottom and left.
Not 12px horizontally and 16px vertically.