Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #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!

    #1011697

    Hey 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,
    Ismael

    #1011927

    This is how they are appearing on mobile:
    Mobile Screenshot

    • This reply was modified 5 years, 6 months ago by MJM.
    #1012048

    Hello,

    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!

    #1012110

    Hi,

    Great, glad you found a solution and thanks for sharing, much appreciated.

    I’ll close this thread for now then, please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.