Site logo

Archived topic

Change font size on Off-Campus Panel

11 replies · Started by Michelle on March 24, 2022

Viewing posts 1–12 of 12

I'm having trouble styling my Off-Campus Panel. Text links at the bottom are too large. "Get Email Updates" splits into two lines (I want it on one line), "Contact Us" is justified right instead of left, and Member Login is beneath the view of the screen (it needs to move up).

I need help to make the spacing right.

Try this CSS:

.slideout-widget a {
    line-height: 1em;
}
.slideout-widget p {
    margin-bottom: 0;
}

Thank you. That fixed the spacing.

You are welcome :)

It looks good on Desktop, but is still bad on mobile. Not sure how to fix. (I just noticed!)

Hi Michelle,

To have a better understanding of the issue, may you kindly provide the link to the site in question?

Hope to hear from you soon. :)

Sure. It's below

Thank you for providing the link to the site in question.

Upon checking, this is what you’re site looks like on mobile on my end: https://share.getcloudapp.com/5zuLwg5E

Also see: https://share.getcloudapp.com/mXuY69BE

Can you confirm if you’re seeing the same?

If not, can you try clearing the cache of your mobile’s browser? Can you also try viewing the site on a different device?

If you’re seeing the same, may we know what specific changes you wish to apply?

Hope to hear from you soon. :)

Hi. No, that's not what I'm seeing, even after clearing cache. The CSS was deleted, and then restored by a backup, but it doesn't look correct at present. I do like the screenshots of how it was. :)

This is what I presently have for code relating to the Off-Campus Panel:

/*Reduce padding between widgets on Off Canvas Panel*/
.slideout-navigation .slideout-widget:not(:last-child){
margin-bottom: 0;
}
}

/*Off Campus Panel spacing and alignment*/
.slideout-widget a {
line-height: 1em;
}
.slideout-widget p {
margin-bottom: 0;
}

Yes, that is what I see too. "Email Signup" is not flush left. It is indented to the right. I also would like to be able to adjust the padding between the links.

Hi Michelle,

The widgets you have here seems to be coming from a different plugin, and this would be out of our scope.

For one, it seems that there are space characters added before the “Email Signup” element which is causing the indentation: https://share.getcloudapp.com/o0uRm5W9

Perhaps you’ve added theses spaces accidentally? Try asking the plugin creators if they may assist you with regards to this.

As for the spacing between specific widgets, you can try adding a custom CSS class to the widgets you wish to add spacing to, and then we can add a top or bottom margin.

For instance: https://share.getcloudapp.com/6quZP6d6

Then add this CSS:

.add-my-margin-top {
    margin-top: 50px !important;
}

Kindly modify 50 to your preferred margin.

Hope this helps! :)

This archived topic is closed to new replies.