Docs

[aloraguerrero]

Hi. I’ve recently changed the social media icons on my site. The new icons show up on mobile, but they don’t show up in desktop/laptop mode. In desktop mode, the icons use the default look.

[Prasant Rai]

Hello There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks.

[aloraguerrero]

This reply has been marked as private.

[Christopher]

Hi there,

Your codes are currently within media query rules, please see the attachment. Please remove media query rules to see the changes on all devices.

Thanks.

[aloraguerrero]

This reply has been marked as private.

[Lely]

Hi There,

Upon checking, there’s a lot of syntax error on your custom CSS:
First, check this part:

@media (max-width: 979px){

    top: 0;.x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
    position: fixed;
    left: 0;
    right: 0;
    height: 186px;
}

The top property should be after the element declaration like below:

@media (max-width: 979px){

    .x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
    top: 0;
    position: fixed;
    left: 0;
    right: 0;
    height: 186px;
}
}/*I added this part*/

Please check your entire custom CSS and make sure the closing curly brace are properly added on each media query. Like the above sample.
Look for this part too:

@media (max-width: 979px){
  .masthead-inline .x-btn-navbar {
    margin-right:20px;
  }
}

That is correct. You have closing curly brace for media query 979. But right above that part, you do have the same media query with missing closing curly brace.
From line 100 to line 117 this is the code:

@media (max-width: 979px){
  .x-navbar .x-brand {
    max-width: 220px;
    float: left;
    text-align: left;
  }

  .masthead-inline .x-btn-navbar {
    float: right;
    clear: none;
    display: inline-block;
    margin-top: 50px;
}
@media (max-width: 979px){
  .masthead-inline .x-btn-navbar {
    margin-right:20px;
  }
}

Since it is the same media query, we can update and combine that part to this:

@media (max-width: 979px){
  .x-navbar .x-brand {
    max-width: 220px;
    float: left;
    text-align: left;
  }

  .masthead-inline .x-btn-navbar {
    float: right;
    clear: none;
    display: inline-block;
    margin-top: 50px;
    margin-right:20px;
}
}

Look for other media queries and add the closing curly brace.

Hope this helps.

[aloraguerrero]

Hi. It’s working fine now. Thank you.

[Thai]

You’re most welcome 🙂

[Author]

Posts