Try adding this to your child theme’s stylesheet:
.featured-posts-content .large-block-grid-6 > li {
width: 25%;
}
@media only screen and (max-width: 760px) {
.featured-posts-content .small-block-grid-6 > li {
width: 50%;
}
.featured-posts-content .small-block-grid-6 > li:nth-child(3) {
clear: both;
}
}
@media only screen and (max-width: 480px) {
.featured-posts-content .small-block-grid-6 > li {
width: 100%;
}
}
You’ll get 4 across at desktop widths, 2 across at tablet widths and 1 single column on a cell phone.
I pasted your code in my child theme’s style.css file but it still didn’t work 🙁 Below is the code I have on the template file in my child theme. Thank you for your help!
Child theme, front-page-template.php:
<div class="featured-posts-content">
<div class="row">
<div class="large-6 columns">
<?php
/**
* The first featured post
*/
// Get chosen category
$home_posts_cat = esc_attr( get_theme_mod( 'home_posts_cat' ) );
// WP_Query arguments
$args = array (
'post_type' => 'post',
'cat' => $home_posts_cat,
'posts_per_page' => '1',
'post__not_in' => get_option('sticky_posts'),
);
// The Query
$query = new WP_Query( $args );
// The Loop
if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
$query->the_post();
get_template_part( 'template-parts/content', 'homelatest' );
}
} else {
get_template_part( 'template-parts/content', 'none' );
}
// Restore original Post Data
wp_reset_postdata();
?>
</div><!-- .large-6 -->
<div class="large-6 columns ">
<ul class="large-block-grid-6 medium-block-grid-6 small-block-grid-6">
<?php
/*The next X number of posts*/
$args = array (
'post_type' => 'post',
'cat' => $home_posts_cat,
'posts_per_page' => '4',
'post__not_in' => get_option('sticky_posts'),
'offset' => '1'
);
// The Query
$query = new WP_Query( $args );
// The Loop
if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
$query->the_post();
get_template_part( 'template-parts/content', 'home' );
}
} else {
get_template_part( 'template-parts/content', 'none' );
}
// Restore original Post Data
wp_reset_postdata();
?>
</ul><!-- .large-block-grid-2 -->
</div><!-- .large-6 -->
</div><!-- .row -->
</div>
I don’t see the CSS I gave you in your child theme’s style.css file. It should work, and you don’t need to make any changes to any .PHP files.
I promise, I did put the “style.css” file with your code! 🙂 So I just pasted your same code into the “app.css” file. Am I not pasting it into the correct file? Those two files are sitting in the main “politics-child-master” folder. Should they be moved to a folder inside the child folder?
Yes, the politics-child-master folder is correct.
Here is where the child theme style.css file is:
http://bridgingthegap.vet/wp-content/themes/politics-child-master/style.css
If you click on the link and examine it, you should be able to see the new CSS, and I don’t.
I don’t see any sort of caching plugin that you are running, either, so I don’t know why your updates aren’t showing up.
Right, something is overriding my style.css. So I just went into wordpress directly / appearance / edit CSS. There I pasted your code and now it’s working!
I agree, I have no idea why the child theme files aren’t updating even though the file does upload/put successfully on my end. I’ll call Go Daddy later to ask them what’s going on with the FTP.
The tiles work correctly now, thank you so much!!!
Last thing I noticed with this theme, the logo isn’t responsive either on my iPhone. It just squishes down. But I can open a new thread for this 🙂
