Tagged: , , ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • September 18, 2018 at 11:45 pm #1011563
    MJM

    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 #1011697
    Ismael

    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

    September 19, 2018 at 5:15 pm #1011927
    MJM

    This is how they are appearing on mobile:
    Mobile Screenshot

    • This reply was modified 6 years, 2 months ago by MJM.
    September 19, 2018 at 10:54 pm #1012048
    MJM

    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!

    September 20, 2018 at 3:44 am #1012110
    Rikard

    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

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