Update overall font size to be 62% for a consistent look across the website

Recently, I developed a browser extension that adds an overlay button to the LinkedIn website. Everything was running smoothly until I discovered that LinkedIn uses a global font-size: 62,5% that completely messes up my design..
https://i.stack.imgur.com/MGc0x.png

After turning off the font-size scaling, the overlay button appears as intended.

I attempted to override this setting in multiple places using font-size: 100% !important but unfortunately, it did not work. Since my CSS skills are still developing, I am seeking more innovative solutions to solve this issue :)

The current look of the overlay is shown here: https://i.stack.imgur.com/iIpQw.png

However, I envision it looking more like this: https://i.stack.imgur.com/C2i2g.png

I utilized Material-UI for constructing the design elements.

Answer №1

If you specify a font-size in percentage, it will be in relation to the parent element's size. By setting it to 100%, the text will remain the same size as its container. To change the size, consider using a fixed measurement like 16px or scaling it up with values such as 1.6rem or 160%.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble importing the module I developed in Node

I've been struggling to understand why this import is failing. Despite trying numerous approaches, modifying the export and import based on various tutorials online, it continues to result in failure every time. This should be a simple task in theory. ...

javascript node.js import

Adding a placeholder to a MUI Select component with different value prop and MenuItem options: a step-by-step guide

Is there a way to include a placeholder (-- Select --) in the MUI Select component below? const [country, setCountry] = useState("") <FormControl fullWidth error={!country}> <Select displayEmpty renderValue={selected => sel ...

javascript material-ui

Combining Material UI with React Form Hook to handle multiple checkboxes with pre-selected defaults

I am working on creating a form with grouped checkboxes using react-form-hook and Material UI. The checkboxes are generated dynamically through an HTTP Request. I am aiming to set the default values by providing an array of object IDs: defaultValues: { ...

javascript forms checkbox material-ui react-hook-form

Execute JavaScript after authentication instead of forwarding the user to another page

Short version: How can we efficiently handle a second AJAX call after an ASP.NET Membership Authentication response? Long version: Let's say we have a web-based Paint program created using ASP.NET MVC. A user is painting a picture when suddenly their ...

javascript jquery asp.net-mvc ajax authentication

Tips for aligning a single item to the center in a Bootstrap navigation bar that has the majority of items on the right

I am attempting to center the text "Welcome:" within the navbar without center aligning the entire navbar. I want the navbar to remain right aligned, but only the "Welcome:" portion should be centered. Here is what I have tried so far... <!DOCTYPE html ...

html css bootstrap-5

Enhance Your NextJs Website with Interactive Tooltips using @tippyjs/react

<Link href="/company/add" > <a title="My New Title" data-toggle='tooltip' className="btn btn-primary">My Link</a> </Link> Trying to integrate a Tippy tooltip component with a Nextjs Link do ...

javascript bootstrap-4 tooltip next.js tippyjs

How do I incorporate global typings when adding type definitions to an npm module?

Suppose I create a node module called m. Later on, I decide to enhance it with Typescript typings. Luckily, the module only exports a single function, so the m.d.ts file is as follows: /// <reference path="./typings/globals/node/index.d.ts" /> decl ...

javascript node.js typescript npm

"Why is the comparison function of bcryptjs returning null even though the hash being used is the one that was generated

For security purposes, I securely store hashed passwords in MongoDB. However, when I attempt to compare the stored password with a user-entered string, bcryptjs returns a null value. https://i.stack.imgur.com/4sTXM.png The hashed password is stored in bin ...

javascript python node.js hash bcrypt

Getting the width of an element using a React ref is a helpful technique that allows you

I am struggling to retrieve the width of a select field using React Ref. this.selectRef.current is returning an object, but I can't seem to find a way to access the width of the element. <Select fullWidth ref={this.selectRe ...

javascript reactjs material-ui

Changing the border color of a Material UI textbox is overriding the default style

Upon the initial page load, I expected the border color of the text box to be red. However, it appeared grey instead. I tried setting the border color to red for all classes but the issue persisted. Even after making changes, the border color remained unch ...

javascript html css reactjs material-ui

Guide: Looping through a typed Viewbag array - best practices

I have passed a List<AdminUsers> through the Viewbag to a view. This list is then assigned to a JavaScript variable and looped through. However, when debugging on the view, I noticed that the for loop is not being executed, even though I set a break ...

javascript asp.net list for-loop document-ready

When invoking a native prototype method, consider extending or inheriting object prototypes for added functionality

Recently, I came across a discussion on Inheritance and the prototype chain where it mentioned: Avoiding bad practice: Extension of native prototypes One common mis-feature is extending Object.prototype or other built-in prototypes. This practice, known ...

javascript angularjs prototype

Effortless Ways to Automatically Accept SSL Certificates in Chrome

It has been quite some time that I have been attempting to find a way to automatically accept SSL certificates. Unfortunately, I haven't had any success yet. The scenario is this: I am working on selenium tests and every time I run the test on Chrome, ...

javascript python google-chrome selenium ssl

Select the input based on the name and value provided from a radio button using jQuery

I want to show a div element when the user chooses option 4 from a radio button. $(document).ready(function () { $("#GenderInAnotherWay").hide(); $("input[name='Gender'][value=4]").prop("checked", true); $("#GenderInAnotherWay").tog ...

javascript jquery

"Encountering an issue with the parameter 'undefined' in the .find()

Recently, I've been facing some challenges while using the .find() method within a vuex getter. I initialized a store with a list under state (pages) // state.js const state = { pages: [{id:1, content:"Page 1"}, {id:2, content:"Page 2"}] }; In my ...

javascript vue.js vuex

What is the purpose of using @ViewChild to access a component's function from another component?

During a discussion with my tutor, I learned that in Angular we can utilize functions defined in any service by simply importing the service. However, unlike services, components cannot be directly imported into other components. To access a function from ...

javascript angular angular-services angular-components viewchild

What is the best way to transfer Express.js variables to MongoDB operations?

I have been developing a blogging application using Express, EJS, and MongoDB. Feel free to check out the GitHub repository for more details. One of the features I've implemented is a simple pager for the posts within the application. Within the pos ...

javascript node.js express ejs mean-stack

Encountering an issue when trying to use SVG clip-path in Safari

I'm currently experimenting with creating a unique hexagonal border around a button. My approach involves enlarging the container element by a few pixels compared to the button size and using the same clip-mask on both elements to achieve a bordered e ...

html css svg safari clip-path

Looking for a fully customizable event and booking calendar?

Currently, I am searching for a unique event and booking calendar that provides the ability to customize each cell or day with our desired content. While most calendars only allow for inputting events as text, we require a solution that enables us to add ...

javascript jquery plugins calendar

Guide for using two Async Pipe functions in Angular 7

Two different functions are in place to check a specific condition, and the requirement is for both of them to be true simultaneously. How can *ngIf be utilized to achieve this? Currently, setting just one of them works, but the aim is to have both. HTML ...

javascript html angular pipe

CSSer Q&A