Tagged: extra info, mobile, social icons, topbar
-
AuthorPosts
-
September 18, 2018 at 11:45 pm #1011563
Hello,
I am using the social icons and extra info my header. I used this thread to get the social icons to stay visible on mobile, but now they are stacking on top of the extra info and have changed color. I would like for this element to look exactly the same as it does on desktop with both elements on the same line, right aligned, and white. Is there any way to update these elements so they look the same on desktop and mobile or to get rid of responsiveness for that element entirely? Thanks for your help!
September 19, 2018 at 9:49 am #1011697Hey Kirstie,
Thank you for using Enfold.
The social icons are not visible on mobile view when I checked. Did you remove the modification? You can use the following css codes to make those icons display on smaller screens.
@media only screen and (max-width: 989px) { .responsive #top #wrap_all #header .social_bookmarks, .responsive #top #wrap_all #main .av-logo-container .social_bookmarks { display: block; } }
Screenshot: https://imgur.com/a/rgYAKQ7
Best regards,
IsmaelSeptember 19, 2018 at 5:15 pm #1011927This is how they are appearing on mobile:
- This reply was modified 6 years, 1 month ago by MJM.
September 19, 2018 at 10:54 pm #1012048Hello,
I played around a bit and was able to get the social links to right-align and look like they do on desktop. This topic can be closed, but if anyone wants the code for future reference, this is what I did:
@media only screen and (max-width: 767px) { .responsive #header .social_bookmarks { text-align: right; padding-bottom: 0px; } } @media only screen and (max-width: 767px) { #top #wrap_all .social_bookmarks_phone { color: #ffffff; border-top: none; border-bottom: none; } } @media only screen and (max-width: 767px) { #top #wrap_all .social_bookmarks_location { color: #ffffff; border-top: none; border-bottom: none; } } @media only screen and (max-width: 767px) { #top #wrap_all .social_bookmarks_mail { color: #ffffff; border-top: none; border-bottom: none; } } @media only screen and (max-width: 767px) { #top #wrap_all .social_bookmarks_facebook { color: #ffffff; border-top: none; border-bottom: none; } }
Thanks!
September 20, 2018 at 3:44 am #1012110 -
AuthorPosts
- You must be logged in to reply to this topic.