Non-responsive columns on the homepage

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.

• This reply was modified 8 years, 4 months ago by CrouchingBruin.

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:

https://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.

• This reply was modified 8 years, 4 months ago by CrouchingBruin.
• This reply was modified 8 years, 4 months ago by CrouchingBruin.

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 ??