Shea asked 8 years ago
Hello,
I'm using squarespace and have made my site's default font size 40px.
Consequentially, this increased the size of the floating language selector.
I've managed to adjust the font size of the floating language selector back to 16px using css but can't figure out how to resize the black box around the font (it looks like it is still reading the font at 40px)
Any help with this would be greatly appreciated. Thanks!
Here's my current footer css styling with font but not the container resized:
<style>
.languagewrapper {
position:fixed;
top:0;
right:0;
z-index:999999;
background-color: black;
padding: 2px;
}
.languagewrapper .language {
float:left;
}
.languagewrapper .language {
display:block;
}
.languagewrapper .language.active {
display:block;
}
.languagewrapper .language.active a {
color:white;
font-weight:bold;
}
.languagewrapper .language a {
padding:2px 5px;
text-decoration:none;
color:white;
font-size: 16px;
}
</style>
.languagewrapper {
position:fixed;
top:0;
right:0;
z-index:999999;
background-color: black;
padding: 2px;
}
.languagewrapper .language {
float:left;
}
.languagewrapper .language {
display:block;
}
.languagewrapper .language.active {
display:block;
}
.languagewrapper .language.active a {
color:white;
font-weight:bold;
}
.languagewrapper .language a {
padding:2px 5px;
text-decoration:none;
color:white;
font-size: 16px;
}
</style>
johnite
HI Shea, could you provide a link to the website in question so that I can take a look? Should be a quick fix, but I’d need to see the site’s CSS to determine what exactly is going on.
Thanks
-Sam
Hi Sam, here’s a link to the site: https://shea-mayer-jc9h.squarespace.com/
The language selector wrapper appears to be inheriting font sizing rules from the body style. Sadly, I lack the know-how to figure out how to override this.
Thanks for your help!
Hi Shea,
Thanks for providing that link.
I can see why the problem wasn’t entirely obvious – the languagewrapper element was still inheriting the 30px font size from the document body, and while you had the 16px font size set on the ‘a’ elements, there were some sizes defined in ’em’ units which are relative units.
The following, when added to the .languagewrapper rule, should rectify things:
padding: 1px;
font-size: 16px;
(That is, change the padding definition to 1px instead of 2px, and add the explicit 16px font size.)
Thank you. The adjustments worked perfectly.
Thank you. The adjustments worked perfectly.