Forum Discussion

adriana4u's avatar
3 years ago

Signposting CSS

Hello everyone,

 

Hope you're all well

 

I need some help, I'm trying to edit the size of the signposting in our community like the one we can see in the khoros community so that the size is fixed even when I zoom the page:

 

 

However, whatever I add to the css it does not work? Could you help me?

 

This is the css code currently: 

 

.PCU4-logo-link {
background: white;
border-radius: 5px;
border: 1px solid #4cb6e0;
bottom: 80px;
box-shadow: 0px 0px 5px #4cb6e0;
color: #4cb6e0;
display: inline-block;
font-size: 13px;
font-weight: 300;
left: 20px;
line-height: 28px;
padding: 13px;
position: fixed;
z-index: 1000;
@include media(phone-and-down) {
font-size: 20px;

max-width:100%;
}
}

Thank you ahead!

  • Hello adriana4u,
    I tried to find out a specific css for your requirement, looks like there is no css for making a div static on zoom in or out.

    Thus, I tried a couple of tricks and one of them is working, mention below:

    @media screen and (max-width: 1700px) {
    .private-logo-link {
    zoom: 100%;
    }
    }
    @media screen and (max-width: 1600px) {
    .private-logo-link {
    zoom: 91%;
    }
    }
    @media screen and (max-width: 1400px) {
    .private-logo-link {
    zoom: 80%;
    }
    }
    @media screen and (max-width: 1200px) {
    .private-logo-link {
    zoom: 66.5%;
    }
    }
    @media screen and (max-width: 1100px) {
    .private-logo-link {
    zoom: 65%;
    }
    }
    @media screen and (max-width: 1000px) {
    .private-logo-link {
    zoom: 57%;
    }
    }
    @media screen and (max-width: 900px) {
    .private-logo-link {
    zoom: 50%;
    }
    }

    You must need to use media query and set the zoom size of a particular div. I hope that works.

    Also, that's might not be a standard solution, you may have to test all your desktop sizes before make it live.

4 Replies

  • Hello adriana4u,
    I tried to update (resize) signposting CSS on Atlas community and I am able to do that.
    Can we connect sometime and see if the same is working in your community as well?

    thanks,
    Abhishek

  • Hello adriana4u,
    I tried to find out a specific css for your requirement, looks like there is no css for making a div static on zoom in or out.

    Thus, I tried a couple of tricks and one of them is working, mention below:

    @media screen and (max-width: 1700px) {
    .private-logo-link {
    zoom: 100%;
    }
    }
    @media screen and (max-width: 1600px) {
    .private-logo-link {
    zoom: 91%;
    }
    }
    @media screen and (max-width: 1400px) {
    .private-logo-link {
    zoom: 80%;
    }
    }
    @media screen and (max-width: 1200px) {
    .private-logo-link {
    zoom: 66.5%;
    }
    }
    @media screen and (max-width: 1100px) {
    .private-logo-link {
    zoom: 65%;
    }
    }
    @media screen and (max-width: 1000px) {
    .private-logo-link {
    zoom: 57%;
    }
    }
    @media screen and (max-width: 900px) {
    .private-logo-link {
    zoom: 50%;
    }
    }

    You must need to use media query and set the zoom size of a particular div. I hope that works.

    Also, that's might not be a standard solution, you may have to test all your desktop sizes before make it live.