Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • October 9, 2019 at 12:01 pm #1146483
    YourChoice Informatik GmbH

    Hi
    We can put the social media icons in the header or in the topbar.
    If we put them in the header, we can make it visible on mobile devices with the following code:

    @media only screen and (max-width: 479px) {
  .responsive.html_header_top #header_main .social_bookmarks {
    display: block !important;
    position: static;
  }

    We want to do the same for the topbar. How we can do that?
    Thanks.
    Regards Mike

    October 10, 2019 at 5:48 am #1146734
    Rikard

    Hi Mike,

    Could you post a link to where you want this implemented please?

    Best regards,
    Rikard

    October 10, 2019 at 9:16 am #1146785
    YourChoice Informatik GmbH

    Hi Rikard
    See the login to the website.
    You can see, that in the topbar there is a phone number and the social media icons.
    When you open the website with a smartphone, you see only the phone number, but not the social media icons.
    Best regards
    Mike

    October 11, 2019 at 6:00 am #1147017
    Rikard

    Hi Mike,

    Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:

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

    Best regards,
    Rikard

    October 11, 2019 at 10:27 am #1147071
    YourChoice Informatik GmbH

    Hi Rikard
    Thanks very much.
    It works. But now there is a white border over the icons. How we can hide this?
    Best regards
    Mike

    October 11, 2019 at 6:35 pm #1147194
    Jordan Shannon

    Hi,

    Add this to quick css:

    .social_bookmarks li{
border:0px!important;
}

    Best regards,
    Jordan Shannon

    October 13, 2019 at 9:20 pm #1147618
    YourChoice Informatik GmbH

    Hi Jordan Shannon

    Unfortunately this code does not work. There is still a border over the social media icons.

    We have the same problem with the shopping chart icon on the Smartphones. If we use the floating shopping chart icon only when we have products in it, there is also a border over it.

    Thanks very much.

    Best regards
    Mike

    October 14, 2019 at 5:07 am #1147702
    Rikard

    Hi Mike,

    Thanks for the update. I can’t view you site anymore though, I get 404 errors both on the regular and login URL. Where can we see the elements in question?

    Best regards,
    Rikard

    October 14, 2019 at 7:11 am #1147731
    YourChoice Informatik GmbH

    Hi RIkard
    Sorry about that, the Site is now under a new URL, see private section.
    Regards
    Mike

    October 14, 2019 at 1:20 pm #1147834
    Rikard

    Hi Mike,

    Thanks for that. Please try this CSS as well:

    @media only screen and (max-width: 767px) {
.responsive #header_meta .social_bookmarks li {
    border-width: 0 !important;
}

.responsive #top #header_meta .social_bookmarks li:last-child {
    border-right-width: 0 !important;
}
}

    Best regards,
    Rikard

    October 14, 2019 at 2:10 pm #1147850
    YourChoice Informatik GmbH

    Hi Rikard
    Cool! This works.
    Do you also have something like that for the shopping chart icon?
    The shopping cart icon is floating, when something is there. On desktop this is ok. On mobile, there is a border which goes into the hamburger menu.
    You can check this, when you put on mobile something in the shopping cart.
    Thanks very much.
    Regards
    Mike

    October 15, 2019 at 1:08 pm #1148058
    Rikard

    Hi Mike,

    Please try this CSS as well:

    @media only screen and (max-width: 767px) {
.html_visible_cart .av-burger-menu-main {
    padding-right: 40px !important;
}
}

    Best regards,
    Rikard

    October 15, 2019 at 3:30 pm #1148114
    YourChoice Informatik GmbH

    Hi Rikard
    Cool. It works!
    Thanks very much.
    You can close this issue.
    Best regards
    Mike

    October 15, 2019 at 4:49 pm #1148132
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Social Media Icons on Mobile Devices’ is closed to new replies.