[Sakin]

@Tomáš: It’s because of your custom css. So, replace the following css:

@media screen and (min-width: 961px) {
}
@media screen and (min-width: 961px) {
    #main-slider .entry-header .entry-title { font-size: 35px; background: rgba(64, 64, 64, .5); }
    #main-slider .entry-content { font-size: 20px; background: rgba(64, 64, 64, .5); }
}

with:

@media screen and (min-width: 961px) {
    #main-slider .entry-header .entry-title { font-size: 35px; }
    #main-slider .entry-content { font-size: 20px; }
}
#main-slider .entry-header .entry-title,
#main-slider .entry-content { background: rgba(64, 64, 64, .5); }

[Tomáš]

Yes, I know that solution of my problem lies in custom CSS. Unfortunately, I am not that skilled in it. Yet 😉

If I will replace as suggested, that I will lose Post Main title again for mobile version: http://gpf1.cz/wp-content/uploads/2015/10/Screenshot_2015-10-18-16-10-01.png

So: it seems, like either having grey transparent background, or having main Post title in mobile version. But I’d like to have a both (more particular: I want grey title background on classic web, I don’t need to have it on mobile version. On mobile version, I need to have both Post Main Title and short Descritpion 🙂

It’s main gpf1.cz web now.

Thanks for patience and help!

[Sakin]

@Tomáš: You are mixing your css. I see your css as below:

#branding { background-color: #222222; }
#comments { background-color: #e8e8e8; color: #2d0000; }
.widget { background-color: #e8e8e8; }
.widget-area .widget, .widget-area .widget ul li { color: #0a0a0a; }
@media screen and (min-width: 961px) {
}
@media screen and (max-width: 782px) {
    #main-slider .entry-container { left: 2%; width: 96%; }
    #main-slider .entry-header .entry-title { font-size: 16px; }
    #main-slider .entry-content { font-size: 14px; }

where there is missing closing bracket in last one, it should have

@media screen and (max-width: 782px) {
    #main-slider .entry-container { left: 2%; width: 96%; }
    #main-slider .entry-header .entry-title { font-size: 16px; }
    #main-slider .entry-content { font-size: 14px; }
}

Also I don’t know what are you doing with following css, it has no meaning:

@media screen and (min-width: 961px) {
}

[Tomáš]

I am afraid I have confused you. All of the CSS code is taken from your advises above 🙂

I have now used CSS code as recommended by you:

@media screen and (min-width: 961px) {
#main-slider .entry-header .entry-title { font-size: 35px; }
#main-slider .entry-content { font-size: 20px; }
}
#main-slider .entry-header .entry-title,
#main-slider .entry-content { background: rgba(64, 64, 64, .5); }

It works beautifully for web: http://gpf1.cz/wp-content/uploads/2015/10/web.png

But on mobile, the main title is missing: http://gpf1.cz/wp-content/uploads/2015/10/Screenshot_2015-10-19-21-55-58.png

That’s the only issue I have. 🙂

[Sakin]

@Tomáš: ok try adding in the following css:

@media screen and (max-width: 940px) {
	#main-slider .entry-container {
		left: 10%;
		width: 80%;
	}	
	#main-slider .entry-header .entry-title {
		font-size: 26px;
	}
	#header-content {
		padding-top: 15px;
	}
	#main-slider .entry-content {
		font-size: 16px;
		line-height: 1.3;
	}
}
@media screen and (max-width: 782px) {
	#main-slider .entry-container {
		bottom: 2%;
		left: 5%;
		width: 90%;
	}	
	#main-slider .entry-header .entry-title {
		font-size: 20px;
	}
	#header-content {
		padding-top: 0;
	}
	#main-slider .entry-content {
		font-size: 16px;
	}
}

[Tomáš]

Dear Sakin, I did as instructed 🙂 Thanks a lot. And I hope this is really the last one.

How we can extent that CSS code with [ background: rgba(64, 64, 64, .5); ] part, so I can have a transparent text background?

[Tomáš]

Hello Sakin. Apologies for being troublesome. Still not resolved, though.

Any idea, how can I have both of the following?

1) Entire title (also) on mobile version of the web – main title is missing
2) Transparent background of the Title on the web

All the advises so far have led to either 1) or 2), but never to having both.

Appreciate your support
Tom

[Sakin]

@Tomáš: Can you show it in screenshot what you mean. So, that it will be clear for me to send you custom css. I am but confused.

[Author]

Posts