thejulycontrary

Yes, Thanks again for all the help!

There it went.

I did a hard refresh previously and it didn’t change so I’m not sure what changed this time!

Thanks!

Currently, this is what I have in my child theme.

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

.page-header,
.page-content,
.hentry {
    background: none repeat scroll 0 0 transparent;
    box-sizing: border-box;
    margin: 0 auto 40px;
    max-width: 720px;
    padding: 40px 40px 20px;
    position: relative;
}

.page-id-14 .entry-title {display: none;}

.page-id-12 .entry-title {display: none;}

.page-id-23 .entry-title {display: none;}

table.cnss-social-icon {margin: 0 auto!important}

.entry-thumbnail {
	margin: -40px 0 40px -40px;
	width: 720px;
	background: transparent;
}

article .entry-header .entry-title {
 color: #999999;
}

Oh yes, I see the difference and unfortunately, I don’t believe that helped either.

Again, thanks for the help!

Hmm… that doesn’t seem to be working either.

Thanks for your help!

I added that to the child theme but my post heading still shows up black, as seen here.

https://thejulycontrary.com/2014/08/big-show-announcement/

Found it under stylesheet.php here.

/* Entry thumbnail */
.entry-thumbnail {
	margin: -40px 0 40px -40px;
	width: 720px;
	background: #000;

Actually, You bring up very good points. Maybe I should leave them at that size. On the desktop side, they are lined up horizontally but, as you mentioned, they form a column on the mobile site. I have used a bit of html to make them rollover icons.

<a href="https://thejulycontrary.com"><img class="alignnone wp-image-241 size-full" src="https://thejulycontrary.com/wp-content/uploads/2014/07/HomeBlue-e1405553472455.png" onmouseover="this.src='https://thejulycontrary.com/wp-content/uploads/2014/07/InvHomeBlue-e1405629063438.png'" onmouseout="this.src='https://thejulycontrary.com/wp-content/uploads/2014/07/HomeBlue-e1405553472455.png'" alt="HomeButton" width="140" height="70" /></a>

Also, I had to add a little bit of space to get them to center correctly on the desktop side. So hopefully your code will help that too!

That seems to resolve the issue of the sizing except now my buttons are not sizing correctly. Any suggestions?

The original code I had was this

.page-header,
.page-content,
.hentry {
	position: relative;
	width: 720px;
	margin: 0 auto 40px auto;
	padding: 40px 40px 20px 40px;
	background: transparent;
	-webkit-box-sizing: border-box;
	-moz-box-sizing:    border-box;
	box-sizing:         border-box;
}

Actually, I’ve upgraded phones and I am now on a Samsung Galaxy S5. The issue seems to be that the background shows up the right size but the content is out of focus so when I pinch resize the screen, everything comes into focus but does the weird thing shown above.

Huh…

I’m running a Samsung Galaxy S3 with SlimRoms Slimkat(KitKat build) on it. That affect happens on both chrome and the internal browser when I go to the page and resize it to see the logo. Otherwise, the logo appears offset/out of view. In order to “center” it, I have to resize the page and then the weirdness happens.

Thanks for your help!

Trial and error, I found it. The background remark.

.page-header,
.page-content,
.hentry {
	position: relative;
	width: 720px;
	margin: 0 auto 40px auto;
	padding: 40px 40px 20px 40px;
	background: transparent;
	-webkit-box-sizing: border-box;
	-moz-box-sizing:    border-box;
	box-sizing:         border-box;
}