Learn how to use the CSS transform-scale() function to scale text independently from its container while maintaining proper alignment

I am currently working on adjusting font sizes to match another one, but I am facing an issue where the container's size is also being affected, resulting in misalignments. I have experimented with different display types (block, inline) and even tried using flex, but it did not yield the desired outcome. Is there a CSS solution for this?

.block3 {
    display: flex;
    background-color: #a8a9ad;
    padding: 50px 30px;
    overflow: none;
    justify-content: space-evenly;

}

.address {
  display: flex;
  text-align: left;
  flex-direction: column;
  justify-content: left;
}

.address span {
  text-align: left;
}

.address p {
  margin: 5px;
  padding-left: 5px;
}

.address h2 {
  /* display: inline-flex; */
  font-size-adjust: 0.6;
  transform: scale(0.8, 1);
  text-align: left;
}

.terms-of-service {
  text-align: left;
}
<div class="block3">
  <div class="address col-content">
    <span><h2>CORPORATE CLEANING SERVICES LTD.</h2></span>
    <p>#106 – 20285 Stewart Crescent,</p>
    <p>Maple Ridge, BC, V2X 8G1</p><br>
    <p>Toll Free: 1-866-543-4666</p>
    <p>Telephone: 604-465-4699</p>
    <p>Fax: 604-465-4674</p>
  </div>
  <div class="terms-of-service col-content">
    <h2>Terms of Service</h2>
    <p>This site uses cookies. By continuing to use this site you are agreeing to our use of cookies. Please refer to Google's Privacy Terms and Terms of Service to see how cookies are used.</p>
  </div>
</div>

Here, my main struggle is maintaining the left alignment of my <h2> element, but I haven't found a way to achieve this yet...

If you have any suggestions or solutions, I would greatly appreciate your help. Thank you!

htmlcss

Answer №1

If you wish to align your scale text to the left, make sure to set 'transform-origin: left'

.address h2 {
  font-size-adjust: 0.6;
  transform: scale(0.8, 1);
  text-align: left;
  transform-origin: left; //include this line
}

Just a tip: If you want both x and y scales to be the same, you can use transform: scale(0.8) instead of specifying 'transform: scale(0.8, 1)'.

You can find more information at the following link https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

Snippet example:

.block3 {
    display: flex;
    background-color: #a8a9ad;
    padding: 50px 30px;
    overflow: none;
    justify-content: space-evenly;

}

.address {
  display: flex;
  text-align: left;
  flex-direction: column;
  justify-content: left;
}

.address span {
  text-align: left;
}

.address p {
  margin: 5px;
  padding-left: 5px;
}

.address h2 {
  font-size-adjust: 0.6;
  transform: scale(0.8, 1);
  text-align: left;
  transform-origin: left; //include this line
}

.terms-of-service {
  text-align: left;
}
<div class="block3">
  <div class="address col-content">
    <span><h2>CORPORATE CLEANING SERVICES LTD.</h2></span>
    <p>#106 – 20285 Stewart Crescent,</p>
    <p>Maple Ridge, BC, V2X 8G1</p><br>
    <p>Toll Free: 1-866-543-4666</p>
    <p>Telephone: 604-465-4699</p>
    <p>Fax: 604-465-4674</p>
  </div>
  <div class="terms-of-service col-content">
    <h2>Terms of Service</h2>
    <p>This site uses cookies. By continuing to use this site you are agreeing to our use of cookies. Please refer to Google's Privacy Terms and Terms of Service to see how cookies are used.</p>
  </div>
</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

Struggling with integrating a mixin in your Polymer project?

I'm experiencing difficulties trying to implement a mixin in Polymer. I have created --test-theme, but it seems that the style is not being applied inside the element. Any suggestions on where I might be making a mistake? story-card.html <dom-mod ...

htmlcsspolymerpolymer-1.0

What advantages does em have over px in the Zurb Foundation's responsive grid system?

The Zurb Foundation Media Queries are specified in em units: $small-range: (0em, 40em); /* 0, 640px */ $medium-range: (40.063em, 64em); /* 641px, 1024px */ $large-range: (64.063em, 90em); /* 1025px, 1440px */ $xlarge-range: (90.063em, 120em); /* 1441px, 1 ...

cssmedia-querieszurb-foundationbreakpoints

Using jQuery to compare input with the current select optgroup choices

I'm struggling with looping through options within a form select. The options are grouped into optgroups, and I believe this is where my issue lies as I can't seem to find the correct syntax. My objective is to compare the value entered using .v ...

jqueryhtmlcsstwitter-bootstrapjquery-mobile

Adjust Element Width Based on Scroll Position

I'm attempting to achieve a similar effect as seen here: (if it doesn't work in Chrome, try using IE). This is the progress I've made so far: http://jsfiddle.net/yuvalsab/op9sg2L2/ HTML <div class="transition_wrapper"> <div ...

javascriptjqueryhtmlcss

Execute location.replace when the "control" key is pressed

document.addEventListener('keydown', (event) => { var name = event.key; var code = event.code; if (name === 'Control') { location.replace(classroom.google.com) } if (event.ctrlKey) { alert(`Combinatio ...

javascripthtmlcss

Image staying in place when browser page is resized

Half page browser Full page browser Hello everyone, I could really use some assistance with my program. I'm trying to figure out how to keep my robot in the same position when switching from a half-page browser to a full-screen browser. Currently, w ...

htmlcssweb

Is there a way to arrange the components of my form so that the questions are positioned on the left side and the choices are displayed on the right

As I am creating a form, my goal is to align the information within it in a way that places the questions on the left side and the options on the right. I have experimented with utilizing IDs, centering them, and adjusting their positioning from left to r ...

htmlcssformsalignment

The lines intersecting with the ethereal image in the background

I'm trying to achieve button links with an image overlay, but so far I've only been able to do it using CSS: section a:link, section a:visited { width: 150px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: ...

cssimagehtmlmargin

Is it possible to bind browser keyboard scrolling to a div without explicit instructions?

Here is a question that closely relates to this one: Enable div to scroll by keyboard without clicking I am aware that explicitly focusing on the element will enable the desired behavior. My inquiry is whether there is a way to achieve this implicitly. ...

htmlcssscroll

What is the best way to reposition a container within another container using bootstrap?

I am new to working with Bootstrap and I am attempting to shift a container to the left within another container, but so far have been unsuccessful. In this image, you can see my attempt at moving the div containing a checkbox to the left I attempted to ...

htmlcssbootstrap-4bootstrap-5

CSS media query specifically for mobile devices regardless of screen width

I've been trying to use a dragscroll plugin to scroll through content, but I've run into an issue where it doesn't work on mobile devices. By mobile devices, I mean those without a mouse cursor, like smartphones and tablets with touchscreen ...

cssmedia-queries

Issues with CSS Styling not being applied properly on mobile devices in a React App deployed on Heroku

The Dilemma My React app is deployed on Heroku using create-react-app for bundling. The backend is a Node.js written in Typescript with node version 10.15.3. Locally, when I run the site using npm start, everything works perfectly. However, when I view t ...

cssnode.jsreactjstypescriptheroku

What is the best way to evenly distribute input elements horizontally within the parent container?

I am working on a layout with five select inputs that I want to arrange horizontally within the parent div. However, the current code setup is not achieving the desired layout: <div id="divtable"> <select class="abc"></select> ...

htmlcss

Retrieve the string data from a .txt document

I am facing an issue with my script that retrieves a value from a .txt file. It works perfectly fine when the value is a number, but when trying to fetch text from another .txt file, I encounter the "NaN" error indicating it's not a number. How can I ...

javascripthtmlvariablesget

Modifying KineticJs.Image with css styling

Hey there, I'm currently working on a project that involves canvas manipulation. I've successfully figured out how to draw an image and move it within the canvas, which wasn't too difficult to achieve. However, I'm now facing a challeng ...

csskineticjs

Dynamically insert JavaScript and CSS files into the header by using the append method

Due to a specific reason, I am loading CSS and scripts into my head tag using the "append" method. For example: $("head").append('<script type="application/javascript" src="core/js/main.js"></script>'); I'm asynchronously pulli ...

javascriptjqueryhtmlcssajax

Create a hyperlink to the tabbed navigation menu

I want to create links to the tabbed menu for my website. The homepage has 4 categories: car, van, truck, and special, each of which leads to the portfolio page. The portfolio page includes a simple filtered tabbed menu structured like this: <ul id="f ...

phphtmlcssurltabs

What is the difference between a CSS background image and a default background?

I am faced with a challenge concerning a div element that has both a background color and an image with a transparent background. My objective is to have the default background color of the div be white, while having a different color as the background fo ...

backgroundbackground-imagecss

Arrange divs in a vertical stack while maintaining a layout with two columns

I am trying to create a layout with two stacked `div`s on one side, and then have a single column on the other side that is the same height as the left `div`s. Something similar to this: https://i.stack.imgur.com/ODsEd.png I currently have the two `div` ...

htmlcss

I'm looking to make my PayPal donate button smaller after noticing that PayPal is making it larger. How can I adjust the size of my customized PayPal

I am seeking your help in resolving an issue with PayPal enlarging my button from 130px x 65px to 300px x 150px. I have checked the button on both a local browser and within the Square Space editor, but the result remains the same. I even attempted to adju ...

htmlpaypal