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

    Hallo,
    wenn man das Browserfenster zusammenschiebt, springt plötzlich das Logo und wird grösser.
    Auch der button Ideen sprint hin und her.
    Was kann man da machen?

    LG
    Pete

    #1469609

    Ok I know why its doing that. Because on small screen the logo is aligned the the left. And I set a different layout for the button on small screens.

    Any chance of reducing the jump anyway?

    #1469611

    den “Jump” wirst du ja nur an Desktop Browsern sehen. Ein Mobiles Endgerät wird nur in der Lage sein beide Zustände zu sehen, wenn die Größe des Displays im Querformat mehr als diese 768px beträgt. Durch das Kippen ist aber ohnehin soviel optisch im Umbruch, dass man das Springen hier kaum wahrnehmen kann. Das Phänomen tritt ja nur auf, bei Desktop Browsern, deren Größe durch ziehen des Fensters verkleinert wird.

    Ich finde das Verhalten des Hintergrundbildes im responsiven Fall der ersten color-section da viel schlimmer.

    ___________

    You will only see the “jump” on desktop browsers. A mobile device will only be able to see both states if the size of the display in landscape format is more than 768px. Due to the tilting, however, there is so much visual change anyway that you can hardly notice the jumping here. The phenomenon only occurs with desktop browsers whose size is reduced by dragging the window.

    I find the behavior of the background image in the responsive case of the first color section much worse.

    #1469613

    Next:
    ich sagte Dir ja bezüglich der Zentrierung des Logs, das du mit dem Media Query probieren musst bis wann das noch gut aussieht.

    Du könntest also dieses css durch aus so verändern:

    @media only screen and (min-width:449px) {
      .responsive #top .logo {
        display:inline-block;
        width:100%
      }
      .responsive .logo a {
        display:inline-block
      }
      .av-contains-svg {
        left:50%;
        transform:translateX(-50%)
      }
    }

    zusätzlich könntest du für alle Weiten folgendes setzen:

    .responsive #top .logo img, 
    .responsive #top .logo svg {
      width: 250px;
    }
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.