tracyselena2

Thank you. It seemed to help a little bit. I also deactivated all the plugins except MAB and you’ll see it still has a lot of extra space at the bottom.. (although not as much as before the minify option was turned on).

Thank you so much for your help.
Do you think it’s the theme code?

Tracy

https://newdirectionshypnosis.com/top-10-stressors/

k almost there LOL

in a browser on a computer looks great! couldn’t be happier..

but when in iphone or ipad the words are not centered so I added some stuff to my css. it’s probably more than necessary, but it works:

below is my entire css that works in all devices:

/*
Theme Name:     Spun Child
Theme URI:      https://example.com/
Description:    Child theme for the Twenty Twelve theme
Author:         Your name here
Author URI:     https://example.com/about/
Template:       spun
Version:        0.1.0
*/

@import url("../spun/style.css");

.blog .hentry span.hometitle {
 position: absolute;
 top: 70px;
 width: 100%;
   color: #FAFAFA;
    display: table-cell;
    font-family: Baskerville,"Playfair Display","Times New Roman",serif;
    font-size: 3.4rem;
    font-style: italic;
    height: 180px;
    line-height: 32px;
    overflow: hidden;
    text-align: center;
    transition: background 0.4s ease-in-out 0s;
    vertical-align: middle;
    width: 180px;
    word-wrap: break-word;
text-shadow: 1px 1px #6B6868;
}

.blog .hentry {
 position: relative;
}

@media screen and ( max-width: 800px ) {

	.blog .hentry span.hometitle {
 position: absolute;
 top: 50px;
 width: 100%;
   color: #FAFAFA;
    display: table-cell;
    font-family: Baskerville,"Playfair Display","Times New Roman",serif;
    font-size: 2.4rem;
    font-style: italic;
    height: 123px;
    line-height: 24px;
    overflow: hidden;
    text-align: center;
    transition: background 0.4s ease-in-out 0s;
    vertical-align: middle;
    width: 123px;
    word-wrap: break-word;
text-shadow: 1px 1px #6B6868;
}

}
@media screen and ( max-width: 600px ) {
	.blog .hentry span.hometitle {
 position: absolute;
 top: 56px;
 width: 100%;
   color: #FAFAFA;
    display: table-cell;
    font-family: Baskerville,"Playfair Display","Times New Roman",serif;
    font-size: 2.4rem;
    font-style: italic;
    height: 140px;
    line-height: 24px;
    overflow: hidden;
    text-align: center;
    transition: background 0.4s ease-in-out 0s;
    vertical-align: middle;
    width: 140px;
    word-wrap: break-word;
text-shadow: 1px 1px #6B6868;
}

it’s ok I figured it out. my child theme css looks like this ..incase anyone needs the whole solution:

/*
Theme Name:     Spun Child
Theme URI:      https://example.com/
Description:    Child theme for the Twenty Twelve theme
Author:         Your name here
Author URI:     https://example.com/about/
Template:       spun
Version:        0.1.0
*/

@import url("../spun/style.css");

.blog .hentry span.hometitle {
 position: absolute;
 top: 70px;
 width: 100%;
   color: #FAFAFA;
    display: table-cell;
    font-family: Baskerville,"Playfair Display","Times New Roman",serif;
    font-size: 3.2rem;
    font-style: italic;
    height: 180px;
    line-height: 32px;
    overflow: hidden;
    text-align: center;
    transition: background 0.4s ease-in-out 0s;
    vertical-align: middle;
    width: 180px;
    word-wrap: break-word;
}

.blog .hentry {
 position: relative;
}

I think I might be missing something. I changed the bottom part of content-home.php to

<article id="post-<?php the_ID(); ?>" <?php post_class( $postclass ); ?>>
	<a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark">
              <?php echo $thumb; ?>
              <span>
                    <?php the_title(); ?>
              </span>
         </a>
</article><!-- #post-<?php the_ID(); ?> -->

and then created a child theme with css including this:

.blog .hentry span.hometitle {
 position: absolute;
 top: 73px;
 width: 100%;
}

.blog .hentry {
 position: relative;
}

but yet the titles are still not on top of the images.

Can anyone help me out?

https://greenboutique.ca

Ok great thank you. ??

Thanks Caroline. I so appreciate your response. Unfortunately it’s a little greek to me..but I will try to figure it out based on what you’ve said. Thanks again.

Hi, I am trying to get this to work as well. I am not a javascript or css expert although I can get by. I’ve added this:

$thumb = get_the_post_thumbnail( $post->ID, 'post-thumbnail', array( 'title' => esc_attr( get_the_title() ) ) ) . '<span class="no-thumbnail">' . get_the_title() . '</span>';

to the content-home.php file

and it’s showing the titles underneath the circles.

to me it makes logical sense that the code is doing this:

if no thumbnails
put title
if thumbnail
put thumbnail
endif

i’m not sure but to me it makes more send to edit something in this part of the code as well:

if ( $first_attachment ) {
		foreach ( $first_attachment as $attachment ) {
			$thumb = wp_get_attachment_image( $attachment->ID, 'post-thumbnail', false, array( 'title' => esc_attr( get_the_title() ) ) );
		}
	}
	else {
		$thumb = '<span class="no-thumbnail">' . get_the_title() . '</span>';
		$postclass = 'no-thumbnail';
	}
}
?>

<article id="post-<?php the_ID(); ?>" <?php post_class( $postclass ); ?>>
	<a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php echo $thumb; ?></a>
</article><!-- #post-<?php the_ID(); ?> -->

or maybe I’m just missing something altogether.

i hope this works ??

https://pastebin.com/uFL2xQSc

it helped a little but there is still extra spaces.