Having text with the same aspect ratio

Normally, to fix that you would add a min-width: 300px for example to the element that looks bad when it’s too small.

But taking a look at your site, I see a lot of CSS change on the breakpoint, you might have more luck increasing the breakpoint from 769px to something bigger, like for example 869px:

@media only screen and (min-width: 869px)

You’d need to do that for all the media queries though, so use a search and replace on all your CSS files.

Let me know if that helps.

The problem is that on laptop the text is too big, not too small, changing the breackpoint wouldnt help, I would see the search-box more than 1000px wide and under all the posts. I should be able to define the text width with a ratio, I dont know if it exists

Oh, I see. I’m not an expert in CSS, but I think you can use CSS’s viewport-relative units to make the text shrink as the viewport shrinks.

Something like this:

div.textsearch {
    font-size: 2.1vw; /* Adjusted to be relative to the viewport width */
    line-height: 1.2em;
    min-font-size: 12px; /* Minimum font size */
}

You might need to set it to 2.1em again on mobile to return to its original size.

Another approach would be to crop this image https://test.sacconicase.com/wp-content/uploads/2023/11/cercaefiltra-4.jpg, removing the extra space on the left to make the width more align with the actual image so you can use flexbox on section#block-4 to align the heading and the image itself, so the heading won’t overlay with the image on specific viewports.

And you can add back the yellow background and top-left/top-right border radius to that section to make it look like before.

• This reply was modified 1 year, 4 months ago by Brandon Zhang.
• This reply was modified 1 year, 4 months ago by Brandon Zhang.

On desktop and laptop in ok or nearly, mobile: I cant get the previous settings, maybe I have forgotten something? All I have is:

div.textsearch {
  position: relative;
  top: 20px;
  left: 28px;
  width: 65%;
  height: 0px;
  font-weight:bold;  
}	
@media only screen and (min-width: 769px){  div.textsearch {
    font-size: 2.1vw; /* Adjusted to be relative to the viewport width */
    line-height: 1.2em;
    min-font-size: 24px; /* Minimum font size */
}
	}
@media only screen and (max-width: 769px){  div.textsearch {font-size: 2.1 em;
	}
	}

There’s an extra space that shouldn’t be there.

Wrong:

font-size: 2.1 em;

Right:

font-size: 2.1em;

Now it’s allright, thank you

No problem!