Archived topic
Help adjust floating social icons
3 replies · Started by crosby87 on May 22, 2021
Hi there,
I have added the pHp and the CSS below to add floating social icons to my website. The floating icons look like this: https://imgur.com/d6EiQBO
/*Style floating social share icons*/
.wplogout-float-social-wrapper {
position: fixed;
top: 70%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 9999;
}
.wplogout-float-social-sharing {
display: flex;
flex-wrap: nowrap;
flex-direction: column;
align-items: flex-start;
min-height: 55px;
font-size: 12px;
padding: 12px 25px;
margin-left: 10px;
}
.wplogout-float-social-sharing svg {
position: relative;
top: 0.5em;
}
.wplogout-float-social-sharing:first-of-type {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-top: solid;
border-left: solid;
border-right: solid;
border-color: #eaeaea;
border-width: 2px;
}
.wplogout-float-social-sharing:last-of-type {
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom: solid;
border-left: solid;
border-right: solid;
border-color: #eaeaea;
border-width: 2px;
}
.wplogout-social-facebook {
fill: #1570ff;
background-color: #FCFCFC;
}
.wplogout-social-pinterest {
fill: #1570ff;
background-color: #FCFCFC;
border-left: solid;
border-right: solid;
border-color: #eaeaea;
border-width: 2px;
}
.wplogout-social-linkedin {
fill: #1570ff;
background-color: #FCFCFC;
}On a wide screen (as show in the screenshot: https://imgur.com/d6EiQBO) the floating icons are adjusted completely to the left side of the screen. I would like these to be always adjusted to the left of the text (no matter what screen I am looking at). I would basically like it to be positioned sth like this: https://imgur.com/kHNwO7e
I am aware that this is not related directly to the GeneratePress theme, but I would appreciate it really much if you could help out with this (unless it requires significant amount of time from your side).
Hi there,
Try to change this CSS:
.wplogout-float-social-wrapper {
position: fixed;
top: 30%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 9999;
}to this:
@media (min-width: 1260px) {
.wplogout-float-social-wrapper {
position: fixed;
top: 40%;
left: calc( 50% - 640px);
z-index: 9999;
}
}
@media (max-width: 1259px) {
.wplogout-float-social-wrapper {
left: -10px;
}
}Thank you so much - works perfectly. You are awesome! :)
No problem :)
Glad to help!
