CSS transform-scale() - How to scale the text without scaling container and keep a proper alignment

user_15584930 0
Viewed 465

I am attempting to transform some font in order to look like another one in terms of size. The problem, when I do, is that the container's size is also adjusted, and I lose my alignments. I've tried different types of display (block, inline) and lastly, thinking it would work, flex but apparently not. Is it possible with CSS?

.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>

So here, I am trying to keep my <h2> left aligned, but I can't seem to make it work...

any ideas? thank you

css html
1 Answers

If you want to left align your scale text you need to set 'transform-origin: left'

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

FYI: If you want scale x and y same so you can use transform: scale(0.8) instead of this 'transform: scale(0.8, 1)'.

you can refer this link for more information https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

Example in snippet:

.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; //add 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>

user_44230140
Related