I'd like to horizontally align my header items on mobile specifically.

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know :)

https://rockymountaingranite.ca/

My apologies!

Hi,

Is there a CSS code I can implement that would make the header horizontally align center on mobile only?

Can you specify with of the header's content do you want horizontally centered? Screenshots would help a lot. :)

Also is it possible to change the color of the social media icons only?

You'll have to target them specifically with CSS.

Try adding this:

i._mi.fa.fa-instagram {
    color: #d6249f;
}
i._mi.fa.fa-facebook-official {
    color: #4267B2;
}

Replace the color value to your preference.

Here it is https://imgur.com/NPzAei8

Just want it in the middle on mobile only

The icons worked stellar. Found some CSS online to give it that gradient Instagram look too :)

Here it is https://imgur.com/NPzAei8

Just want it in the middle on mobile only

You can add this CSS:

@media(max-width:768px;){
.inside-page-hero {
    text-align: center;
}
}

This is how it would look like:
https://share.getcloudapp.com/L1uOwvLN

Thanks Elvin,

For some reason it's not changing anything. I'm not experienced enough to diagnose what could be going wrong..

Looking forward to hearing from you :)

For some reason it’s not changing anything. I’m not experienced enough to diagnose what could be going wrong..

Ah right that's my bad. There's a syntax error on the CSS I've provided. (extra ; on media rule).

Try this instead:

@media(max-width:768px){
.inside-page-hero {
    text-align: center;
}
}