How to fit word length and height to fit container - html

I am trying to fit some text while designing on html and css, and I can't seem to find a way to do it.
I currently have this
and the objective is to have as it is here
what seems the best way to do this?
<div class="container h-100">
<div class="row h-100 align-items-center justify-content-center text-center">
<div class="col-lg-10 align-self-end">
<h1 class="text-uppercase text-white font-weight-bold adjust">Ignition<br>Dimension</h1>
</div>
</div>
</div>

This is not possible with just CSS. You need JavaScript to adjust the text size depending on its parent container. See https://css-tricks.com/fitting-text-to-a-container/
There is a proposal for CSS Container Queries but this has only been implemented in Chrome behind a flag
Except your parent container has the same width and height as your viewport. In that case, you could use vh/ vw to adjust the size based on the viewport

Related

Why I cant properly change the size of the input width in percentage using bootstrap

I have a problem with making my input field good looking and not too big.
The problem is that when I add to input the w-25 class thats width 25% the input width changes according to its original width and not the parent container and it leaves blank space inside the container , I can fix the problem by passing the width in pixels but I am supposed to use only bootstrap and no css styling.Maybe there could be a different approach to making it.
<div class="container my-5">
<h1 class="fw-normal">Fibonacci Calculator</h1>
<div id="calculatorContainer" class="d-flex align-items-center">
<span>The Fibonacci Of</span>
<small>
<input
type="number"
class="mx-2 d-inline-block w-25"
placeholder="#"
/>
<button type="button" class="btn btn-primary">ls</button>
</small>
</div>
</div>
Here is a codepen with the front end
https://codepen.io/amirovalex-the-animator/pen/OJjgbpo
You can use col-md-1 col-12 on the input class.

Stretch <canvas> to fill flex item without any scrollbars

I am using Bootstrap 5 and trying to set up a nested flex layout that fills the window, with one flex item filled by a "stretchy" <canvas> (so no scrollbars anywhere).
For some reason, creating the canvas with w-100 and h-100 utilities (equivalent to setting CSS width and height to 100%) is creating a vertical scrollbar on the page. I've seen numerous similar questions around the interwebs, but they almost all deal with flex-direction: row and don't seem to work for my column scenario. I can't tell if this is a bug in Bootstrap, or if I'm just misunderstanding nested flex containers and/or canvases.
Here is a Codepen that reproduces the issue: https://codepen.io/Rabadash8820/pen/eYWwXxx
And here is the HTML body:
<body class="d-flex flex-column vh-100">
<div class="alert alert-warning alert-dismissible fade show" role="alert">
Alert alert!
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Warning"></button>
</div>
<header>
Header content
</header>
<div class="flex-grow-1 d-flex">
<div class="flex-grow-1 d-flex flex-column">
<main class="flex-grow-1 bg-dark">
<canvas class="d-block w-100 h-100"></canvas>
</main>
<footer>Footer content</footer>
</div>
<div class="w-25"><h2>Options</h2></div>
</div>
</body>
Switch from the default min-height: auto to min-height: 0 for your flex items to suppress the minimum content size of your canvas.
You’re seeing the scrollbars because when you set width: 100% on canvas, it tries to maintain its 2:1 aspect ratio, which affects its height. That height is communicated to the parents of canvas, which are flex items inside flex containers. By default, flex items don’t shrink below their min-content size, which is affected by the aspect ratio.
To prevent this from happening, you can set min-height: 0 on your <div class="flex-grow-1 d-flex"> and <main class="flex-grow-1 bg-dark"> elements, like this:
<div class="flex-grow-1 d-flex" style="min-height: 0;">
<div class="flex-grow-1 d-flex flex-column">
<main class="flex-grow-1 bg-dark" style="min-height: 0;">
<canvas class="d-block w-100 h-100"></canvas>
</main>
<footer>Footer content</footer>
</div>
<div class="w-25"><h2>Options</h2></div>
</div>
Then, they will let their flex containers shrink them, and then your canvas settings of 100% width and height will refer to that shrunk size.
If you don’t want to write custom CSS, I guess the solution would be to find Bootstrap classes that correspond to setting min-height: 0.

Remove empty space between content in column and the edge of column

<div class="row mt-5 d-flex">
<div class="col-md-3 p-5 mt-3">
<img id="image" class="align-self-center"
src="background1.jpg"
width="80%" height="100%"/>
</div>
<div class="col-md-4 align-self-center">
<span id="text">
text
</span>
</div>
<div class="col-md-5 background-image">
</div>
</div>
Result:
I don't know why the empty space between the rounded image and the end of column is there. I use bootstrap. I've put borders around divs with "col-md-*" in order to see the edges correctly.
I tried setting padding and margin to 0 but there weren't any changes. I think it has to do something with the "img" tag (I also tried setting it to be displayed as a block).
Check for any padding or margin. usually bootstrap adds those properties automatically with col-md-** classes. You might have to override those classes. I would use the inspect element tool to track them.

Bootstrap 4: Text on image displaced on difference screen size

I want the text to look like this on my image:
which is slightly away from the "Center" point of the image(as i want to avoid the phone in the image), so text-center wouldnt work. I currently set the division of the row to "relative" and the text to "Absolute" in order to even get the text on top of the image. But when i resize the image, it will be displaced.
Code:
<section>
<div class="col-lg-12 text-center"style="margin: 0;padding: 0;position: relative;">
<img class="img-fluid" style="width:100%;" src="img/phone-transparent.png" alt=""></img>
<h2 style="color:red;position: absolute; top: 120px; width: 100%;">This is also</br>available on your mobile.</h2>
</div>
</section>
On original screensize:
On a different screensize:
This can be done using only Bootstrap 4 classes. Read the documentation on using the grid, and the utility classes for positioning and flexbox. You don't need all the inline CSS styles.
<div class="container-fluid">
<section class="row no-gutter align-items-center">
<div class="col-lg-12 text-center p-0 d-flex align-items-center">
<img class="img-fluid position-relative mx-auto" src="//placehold.it/1900x400" alt="">
<h3 class="w-100 position-absolute text-danger my-auto">This is also<br>available on your mobile.</h3>
</div>
</section>
</div>
Demo
Remember that .col-* must be placed in the .row, and the .row
should be inside a container.
You can use the spacing utils and CSS object-fit on the image to get the position and size: Demo 2 (you will need to tweak this as desired).

Bootstrap Column, 100% height doesnt apply

So, im using bootstrap 3.0, and working on columns, and im having problem with column heights.
My desired output is to have white border in between column, i was able to achieve this on columns with same height, but if the columns is shorter in height, the border is short also,
I tried setting the columns' height to 100%, but is doesnt work, setting the column's height via exact px (100px) works, but i cant use this since i need the column height to be responsive
Here is my html code
<div class="col-xs-12 bg-8560a9">
<div class="col-xs-4 text-left border-right-white full-height">Europe Zone 1 (West)</div>
<div class="col-xs-4 border-right-white full-height">
<div class="col-xs-6">794 M</div>
<div class="col-xs-6">81.6%</div>
</div>
<div class="col-xs-4 full-height">
<div class="col-xs-6">833 M</div>
<div class="col-xs-6">83.5%</div>
</div>
</div>
css
.full-height{height:100% !important;}
This is the common Problem that occurs when parent element don't have there heights set, height and width don't behave same for Browser,you can skip setting width but for element height this is generic issue
suppose your parent element has height: auto; and setting percentage height to children will
confuse browser to calculate height for element from an undefined value,since it is null so browser will do nothing.
you need to add
<div class="col-xs-12 bg-8560a9 full-height">
<div class="col-xs-4 text-left border-right-white full- height">Europe Zone 1 (West)</div>
<div class="col-xs-4 border-right-white full-height">
<div class="col-xs-6">794 M</div>
<div class="col-xs-6">81.6%</div>
</div>
<div class="col-xs-4 full-height">
<div class="col-xs-6">833 M</div>
<div class="col-xs-6">83.5%</div>
</div>
</div>
this will again work only if parent element height is set,
full reference to this problem is here
So, if you want to set a height on your web pages to a percentage, you have to set the height of every parent element of the one you want the height defined.