Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • February 21, 2020 at 10:21 am #1186646
    alex_0111

    Hi,

    I used this code for my social Icons showing an mobile device:

    @media only screen and (max-width: 767px){ 
.responsive #top #header .social_bookmarks {
    display: block;
}}

    It works when I hold my mobile phone across. But the icons are not visible upright (with a narrower screen).

    Is there a way?

    Thanks
    Alex

    February 22, 2020 at 2:04 pm #1186965
    Rikard

    Hey Alex,

    The icons are showing on all screen sizes on my end, and that is what the CSS should be doing. How wide is your phone?

    Best regards,
    Rikard

    February 23, 2020 at 11:04 am #1187093
    alex_0111

    Hi Rikard,

    i test them with Huawei P10 / P30 and iPhone.
    But you will see the problem also with the Edge Browser.

    On the private contend you will see two screen´s (Edge) with a small and a bigger window. The same size with a referent Site (This site I found here with the same question, but there is working)

    Also in the private contend you will find the domains form the other side.

    You can see, my site don´t show the icons on smaller size window.

    Thanks.
    Alex

    February 24, 2020 at 2:00 am #1187157
    Mike

    Hi,
    Sorry for the late reply, you had some css blocking them from showing, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    @media only screen and (max-width: 479px) {
.responsive #top #wrap_all #header .social_bookmarks, .responsive #top #wrap_all #main .av-logo-container .social_bookmarks {
    display: block !important;
}
}

    Best regards,
    Mike

    February 24, 2020 at 10:05 am #1187239
    alex_0111

    Hi Mike,

    i test your code. The small screen is working. But the middle-screen-size not. So I test it with both codes, like…

    @media only screen and (max-width: 767px){ 
.responsive #top #header .social_bookmarks {
    display: block;
}}

@media only screen and (max-width: 479px) {
.responsive #top #wrap_all #header .social_bookmarks, .responsive #top #wrap_all #main .av-logo-container .social_bookmarks {
    display: block !important;
}}

    With this is working for all sizes. But is it right or needed “so much” code?

    Thanks.

    Alex

    February 24, 2020 at 1:28 pm #1187320
    Rikard

    Hi Alex,

    If the CSS is working as it should then I don’t see any problem with it. That code is very small compared to some CSS files/blocks I’ve seen before :-)

    Best regards,
    Rikard

    February 24, 2020 at 1:54 pm #1187336
    alex_0111

    OK Thanks to you and Mike.
    You can close it.

    Best regards,
    Alex

    February 24, 2020 at 2:14 pm #1187345
    Mike

    Hi,
    I’m glad this is working for you, the social icons are turned off for mobile screens by default, with two different rules, so to change this we need to overwrite each rule.
    Unless there is anything else we can assist with on this issue, shall we close this then?

    Best regards,
    Mike

    February 24, 2020 at 2:19 pm #1187346
    alex_0111

    It works. So you can close it.
    Thanks to all.

    Alex

    February 24, 2020 at 2:39 pm #1187357
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Social Icons – mobile’ is closed to new replies.