Skip to main content

Forums

This topic contains 3 replies, has 2 voices, and was last updated by  nicecss 1 week, 1 day ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #296902

    nicecss
    Participant

    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!

    #296903

    Paulie_D
    Moderator

    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

    #296943

    nicecss
    Participant

    Thank you! I’ll try it shortly.

    #296983

    nicecss
    Participant

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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star