[nicknerovParticipant]

Hey x-team

Quick question. Been searching the forum and have my problem 90% solved. Last thing left is to have mobile either mimic the desktop or just be excluded from the special CSS class i’ve written. Here’s what I’m talking about:

I am trying to replicate the following for every blog entry – http://markmanson.net/be-patient
So a centred feature image, with a top menu overlap and the title+meta in the middle of the featured image centred. I have it pretty down packed (i think, would love some feedback) on the desktop site as of now as seen HERE – http://startupfromthebottom.com/demo-5-reasons-you-need-the-x-theme/

To make the title+meta hover over the featured image I am using the following CSS:

.single .entry-featured {
width: 100%;
margin: 0 auto;
margin-top: -22%;
}

.single header.entry-header {
font-size:18px;
margin-left: -40%;
padding: 30px;
background-color: rgba(255,255,255,0.3);
text-align: center;
top: calc(20% );
position: absolute;
width: 90%; left: 45%;
}

AND THE FOLLOWING JQUERY:

@media only screen and (min-width: 1450px) {
.single header.entry-header {
top: calc(10% – 70px);
}}

@media only screen and (max-width: 1449px) {
.single header.entry-header {
top: calc(5% – 70px);
}}

The above jQuery, i believe, is to not make it active on the mobile screens.

The problem I am facing is that if you load the following blog post, or any other on the domain, the title is floating else where. Please advise how to either:

A) replicate the effect on the mobile platform
B) exclude the effect from tablets and mobile so that it displays normally.

Thank you very much for your help!

[RadModerator]

Hi there,

Thanks for writing in.

First, this is not jQuery, it still CSS and should be added along with other CSS.

@media only screen and (min-width: 1450px) {
.single header.entry-header {
top: calc(10% – 70px);
}}

@media only screen and (max-width: 1449px) {
.single header.entry-header {
top: calc(5% – 70px);
}}

Second, your A and B requirement is somewhat against each other. You wish to replicate the same effect on mobile but exclude it on mobile on tablet and mobile. Would you mind clarifying your requests?

If you wish to exclude tablet and mobile, and only affect single pages, then CSS is what you need.

@media ( min-width: 980px ) {

.single-post .entry-featured {
width: 100%;
margin: 0 auto;
margin-top: -22%;
}

.single-post header.entry-header {
font-size:18px;
margin-left: -40%;
padding: 30px;
background-color: rgba(255,255,255,0.3);
text-align: center;
top: calc(20% );
position: absolute;
width: 90%; left: 45%;
}

}

Thanks.

[Author]

Posts