Adjust the font size of headers to be smaller when they overlap

Is there a way to reduce the font size of my header if it is overlapping with another element?

I have tried using word-break: break-all;, but the overlap persists.

For context, I am still fairly new to coding, so please forgive me if this question seems basic.

Here is my code snippet: 

.container{ position: absolute; top: 0; left: 0; padding: 5%; }

and

.container2{ position: absolute; bottom: 0; margin-bottom: 30px; width: 100%; }

Essentially, when there is an <h2> within .container and the text is too long, it overlaps with the text of the <h2> within .container2. How can I prevent this overlap or resize the text appropriately?

javascripthtmlcssoverlap

Answer №1

div#header{
    font-weight: 500;
    padding: 0;
    margin: 0;
    color: rgb(41, 40, 40);
    background-color: rgb(248, 248, 248);
}

p{
    font-size: 50pt;
    text-align: center;
    color: rgb(63, 61, 61);
    font-style: normal;
  font-variant: normal;
    font-weight: 400;
}
p1{
    font-size: 20pt;
    text-align: center;
    color: rgb(63, 61, 61);
    font-style: normal;
  font-variant: normal;
    font-weight: 400;
}
        <div class="header">
        REPLACETEXT
            <p>REPLACETEXT</p>
            <p1>REPLACETEXT</p1>
        </div>

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

jQuery's draggable and resizable functionality with containment provisions is designed to

I'm struggling to create a resizable and draggable div using jQuery, but it's proving to be quite buggy in its implementation. Despite finding similar questions, I haven't come across a solution yet. How can I fix the containment bug when ...

javascriptjquerycssjquery-ui

NextJS: Invalid element type provided: expected a string for built-in components or a class/function for composite components, but received an undefined value

Utilizing Nextjs, I've configured an index.js file in the /pages directory and a meta.js file in the /components/meta/ directory. However, during the rebuild process of my application, I encountered the following error message: Element type is inv ...

javascriptnode.jsreactjsnext.jsreact-component

Confirm that the method has been called by utilizing the AVA testing framework

As I work on creating a unit test for my React component using tools like Ava and Enzyme, I encounter an issue. My goal is to create a simple unit test that checks if a certain method has been called. The test should pass if the method has indeed been call ...

javascriptunit-testingreactjsava

Protractor can now successfully locate and interact with a nested button element

I am trying to click on the second button, but I can't differentiate between the two buttons using class names. div class="ng-view ff-domain ng-scope"> <div class="hero-unit blur-background ng-scope"> <h1></h1> <h2> ...

javascriptangularjsseleniumselenium-webdriverprotractor

Solving the CSS Trick: Responsive Data Table (featuring inline editing) Display Glitch

In my quest to create a responsive table with inline editing, I turned to Chris's guide at CSS-Tricks (check it out here). To see how it all comes together, take a look at this Plunker demo. On mobile screens, the responsiveness is on point. https: ...

htmlcssangularjsdatatableresponsive-design

I am having trouble with Visual Studio Code and ESLint not recognizing spelling errors such as "style.backgroundCOlor". What steps can I take to resolve this issue?

Since I'm relatively new to Visual Studio Code, I recently encountered an issue with the "ESLint" extension where my typos were not being detected. These typos were in actual pieces of code, not just comments, which made it tricky to spot the errors. ...

javascripttypescriptvisual-studio-codeeslint

Is there a way to ensure dropdown links in a responsive menu can extend past the menu's height?

Recently, I have been working on creating a CSS responsive main menu by combining code snippets from different sources. Despite my efforts, I encountered a major issue in the form of dropdown menu items disappearing when they extend beyond the normal heigh ...

htmlcss

Can you explain the contrast between using require('d3') and require('d3-selection')?

While working on a nodejs application with javascript, I encountered an interesting issue. In my code, I am passing a d3 selection to a function as shown below. // mymodule.js exports.myfunc = function(ele){ if(ele instanceof d3.selection){ // do so ...

javascriptnode.jsd3.js

Express.js Issue: Error in JSON Object Returned When Date Parameter is Empty

Currently tackling the challenges of the FreeCodeCamp Timestamp Microservice project and facing a roadblock in the implementation. While most requirements are met successfully, there's an issue with handling an empty date parameter test case. Let me b ...

javascriptnode.jsjsonexpress

A JavaScript function written without the use of curly braces

What makes a function good is how it is declared: export declare class SOMETHING implements OnDestroy { sayHello() { // some code to say hello } } However, while exploring the node_modules (specifically in angular material), I stumbled up ...

javascripttypescriptfunctionangular-materialnode-modules

Execute a Bash script using Node.js based on a request from the client

I'm trying to find a way to execute a server-side script when a user clicks a button in the browser... After doing some research, I still can't seem to figure it out. Here's what we have: A Node.js server running on Fedora Red Hat (on lo ...

javascriptjquerynode.js

Challenge with Angular *ngFor: Struggling to Access Previous Elements

In my angular and node application, I am using socket.io. When a user joins the room, they can see their username in the user list. If another user joins, the first user can see both usernames but the new user can only see their own. This pattern continues ...

javascriptnode.jsangularsocket.iorxjs

Angular2 poses a strange problem with ngClass

It seems like Angular is expecting me to use single quotes for the class names even if there are no hyphens in my CSS class name. I've tried everything but Angular keeps insisting on using hyphens for this specific CSS class... it's strange, or m ...

cssangularangular2-template

Is there a way to incorporate a Bootstrap dropdown menu into a Kendo

Having some trouble with the z-index of the bootstrap dropdown in the kendo table. Here is a working fiddle: http://jsfiddle.net/DTcHh/3142/ The dropdown is appearing underneath the table body. Unsure what the issue could be? HTML <table class="tab ...

htmlcsstwitter-bootstrap-3kendo-grid

Concealing Columns in the Beta version of Bootstrap 4

Currently utilizing Bootstrap 4.0 Beta for website design, encountering a roadblock with a responsive-utility feature. In previous Bootstrap 3 versions, it was achieved using classes like: hidden-xs, hidden-md, among others. The addition of -up and -down ...

htmltwitter-bootstrapresponsive-design

I needed to integrate CustomPicker into my functional component within a react native project

Could someone please clarify if I wish to convert the CustomExample Class component into a functional component **like this: ** const CustomExample = () =>{...} then how would I modify the following code to function in a similar manner: <Custo ...

javascriptreactjsreact-nativejsxpicker

Toggle the display of items shown before without using the next() function

If you visit this website, you will notice that I am implementing a slideToggle function on various elements. To ensure that only one element is visible at a time, I have crafted the following code: $(document).ready(function() { $( ".toggle" ).click( ...

javascriptjqueryhtmlcss

African savannah backdrop with dark stripes

For some reason, when using Safari 7.0, I am seeing black lines on my background image. Strangely, the vertical lines disappear when I resize the browser window. Does anyone have any idea what could be causing this issue? Check out my website fedoriv.com ...

htmlsafaribackground-image

Tips for troubleshooting JavaScript within a cshtml file

I found a .cshtml file with the following structure (please excuse any inaccuracies in my JavaScript jargon) @model SomeViewModel @{ Response.ContentType = "application/x-javascript"; } $(function() { // Code for handling Javascript events here ...

javascriptc#google-chromedebuggingrazor

Transitioning library functions to utilize promises

converter.json2csv(MAP.fls, function (error, csv) { if (error) { return error; } file_system.writeFile(MAP.output.res, csv, function (error) { if (error) { return error; } }); }); I am currently working ...

javascriptbluebird