Single letter colour removal & mobile optimization

[Brandon]

Hello!

I was wondering how I can change it so as none of the words in the them start with a different colour letter? I can’t just change it’s colour as it’s in both the body and footer which have different coloured fonts.

Also, when viewed on mobile, the excellent desktop header becomes smushed and poor quality. Can I display a better resolution for the header image only on mobile somehow?

Thank you!

[Sonnal S Sinha]

Kindly show us the website URL please.

Regards,
Shri

[Brandon]

Hi Shri,

The website is www.tekkittest.com

[Sonnal S Sinha]

Kindly go to Appearance>>Theme Options>>Basic Settings>>Custom CSS Box:

Add this code there:

.logo > h1 > a > span, #footer .footercols1 h3::first-letter, #footer .footercols2 h3::first-letter, #footer .footercols3 h3::first-letter, #footer .footercols4 h3::first-letter, h1.postitle::first-letter, .single_post_content h1::first-letter, h2.postitle::first-letter { color:#494949 !important;}

#footer .footercols1 h3::first-letter, #footer .footercols2 h3::first-letter, #footer .footercols3 h3::first-letter, #footer .footercols4 h3::first-letter, h1.postitle::first-letter, .single_post_content h1::first-letter, h2.postitle::first-letter { color:#fff !important;}

@media screen and (max-width:767px) {
.logo img { height:auto !important;}
}

Regards,
Shri

[Brandon]

Hi Shri,

That worked perfect for the mobile site, thanks!

As for the letter, it actually removed it instead of making it black. How can I edit this so the letter shows up in black?

Thanks!

[Sonnal S Sinha]

Kindly go to Appearance>>Theme Options>>Basic Settings>>Custom CSS Box:

Remove this code there:

.logo > h1 > a > span, #footer .footercols1 h3::first-letter, #footer .footercols2 h3::first-letter, #footer .footercols3 h3::first-letter, #footer .footercols4 h3::first-letter, h1.postitle::first-letter, .single_post_content h1::first-letter, h2.postitle::first-letter { color:#494949 !important;}

————————————————————

Add this code there:

.logo > h1 > a > span, #footer .footercols1 h3::first-letter, #footer .footercols2 h3::first-letter, #footer .footercols3 h3::first-letter, #footer .footercols4 h3::first-letter, h1.postitle::first-letter, .single_post_content h1::first-letter, h2.postitle::first-letter { color:#000 !important;}

Regards,
Shri

[Brandon]

Hello Shri,

It seems that did nothing. Not a thing changed when I removed:
.logo > h1 > a > span, #footer .footercols1 h3::first-letter, #footer .footercols2 h3::first-letter, #footer .footercols3 h3::first-letter, #footer .footercols4 h3::first-letter, h1.postitle::first-letter, .single_post_content h1::first-letter, h2.postitle::first-letter { color:#494949 !important;}

and added:
.logo > h1 > a > span, #footer .footercols1 h3::first-letter, #footer .footercols2 h3::first-letter, #footer .footercols3 h3::first-letter, #footer .footercols4 h3::first-letter, h1.postitle::first-letter, .single_post_content h1::first-letter, h2.postitle::first-letter { color:#000 !important;}

The letter, as you can see if you go to the site www.tekkittest.com, is still invisible. I tried placing many other colors into the { color:#000 !important;} space but nothing worked.

I have one other question, the menu on the site is off center to the right, is there a way I can centre this on the page?

Thanks!

[Sonnal S Sinha]

Kindly go to Appearance>>Theme Options>>Basic Settings>>Custom CSS Box:

Add this code there:

h1.postitle::first-letter, .single_post_content h1::first-letter, h2.postitle::first-letter { color:#000 !important;}
#footer .footercols1 h3::first-letter, #footer .footercols2 h3::first-letter, #footer .footercols3 h3::first-letter, #footer .footercols4 h3::first-letter { color:#fff !important;}

Regards,
Shri

[Brandon]

That worked perfectly!

Thanks Shri!

[Sonnal S Sinha]

🙂

[Author]

Posts