Jumping block

[nicecss]

Hi!

I have a temporary page which I launched on takecashngo.com.

The site is under development and will have several language versions. Therefore, the temporary page is also made for 3 main languages. English, Spanish and Chinese. The size of the text is slightly different, because of this, when you switch the page constantly jumps (central white block). I can change the texts, but is there any elegant way to solve this problem using CSS?

I’ve set up a fiddle here (https://jsfiddle.net/gledgo/4q0drk9g/16/) but the effect is visible only on the site. I could not correctly move the code to the sandbox.

If there is any simple way please suggest me. I certainly will not change the entire html-code because of this. But minor improvements can be made.

Thanks for your time!

[Paulie_D]

It seems to me that the div holding your logo is changing size based on teh size of the text in the sibling div.

You need to make this consistent.

At the moment it’s allowed to shrink

.main-page .logo {
-webkit-flex: 0 1 176px;
flex: 0 1 176px;
position: relative;
z-index: 1;
margin-right: 55px;
}

I’d suggest making the flex-shrink value 0

[nicecss]

Thank you! I’ll try it shortly.

[nicecss]

Thanks. I used this. Looks like it’s getting better.

[Author]

Posts