Question 172683 in Html Question posted in
Some basic documentation can be found here.

Can font-size in HTML Flexbox be set with calc function without items overlapping?

I have a simple HTML and CSS code. I am using CSS calc function to create fluid typography.
Hover when I make the window smaller, the image overlaps the text. The issue disappears when I use fixed font-size like 3rem instead of calc function.

Is there any way to stop overlap while using CSS calc funciton?


<div>
<h1>
This is a loooooong title
</h1>

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Shaqi_jrvej.jpg/1200px-Shaqi_jrvej.jpg">
</div>

div {
  display: flex;
  flex-wrap: wrap;
}


div img {
  width: 400px;
  height: 100%;
}

div h1 {
  /*It works when I set fixed font-size size like "3rem" */
      font-size: calc(1.625rem + 5.075vw); 
      width: 300px;
}

Demo: https://jsfiddle.net/n1gsj3x5/1/

problem screenshot

Tags:

2

Answers


  1. 0

    to fix this, you can make two changes: add gap between the two elements and implement word-wrap strategy that way:

    div {
  display: flex;
  column-gap: 5px; /* this is good to add  */
  flex-wrap: wrap;
}
  
div img {
  width: 400px;
  height: 100%;
}
  
div h1 {
  font-size: calc(1.625rem + 5.075vw); 
  width: 300px;
  word-wrap: break-word; /* This is important */
}
    Login or Signup to reply.
  2. 0

    you can just set a dynamic width to h1 like :

    div {
  display: flex;
  flex-wrap: wrap;
  gap:5px;
}


div img {
  width: 400px;
  height: 100%;
}

div h1 {
     font-size: calc(1.625rem + 5.075vw); 
     width: calc(100% - 410px);
}

    the h1 with gonna change if screen size change

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search