:-)

Thanks ksharpe02, I implemented a variation on your code and it worked a treat!

Thanks for posting your findings!

I figured it out. I figured I'd post it here to help anyone with a similar issue. I used the following CSS:

<---This moves the logo up and to the left -->
#logo {
max-width: 32%;
margin: 0 -15px -15px 0;
}

<---this causes the post and post titles to adjust to the screen based on the screen size and what % of the screen the box should move. In addition it provides padding on the top to keep the content boxes from overlapping-->
.posts-container{
top: 62%;
}
#page-title{
top: 60%;
padding-top: 2.5em;
}

Hi there,

Best approach is to check out your edits on as many devices/browsers as you can to make sure it yields the results you're after.

Best,

Christopher

Thanks for the response! Unfortunately, that's not working either. I did the following, do you think that will be pretty universal or do you think I should use %'s?

#logo {
    max-width: 100px;
    margin: 0 -15px -15px 0;
}
.posts-container{
padding-top: 10em;
}
.entrytitle{
padding-top: 6.5em;
}

Hi there,

I see what you mean. Try adding the following to your Custom CSS on the Customize page...

#logo {
    max-width: 100px;
}

Let me know if that helps!

Best,

Christopher

Hi,

Hoping you can help out. For some reason on mobile, desktop and tablet devices, the logo overlaps the Header for the content. I browsed the conversations and found the following block of css code which I thought would help but it didn't:

@media screen and (max-width: 700px) {
#logo img {max-height: 100px;}
}

my website link is: http://www.rawthebreakdown.com

Also, for some reason, two of the thumbnail images are not loading. Is that a youtube issue or something I can control here?

Thanks!