Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • July 11, 2024 at 2:32 pm #1461854
    Jak73

    Hi,
    i added a text logo in the left corner and would like to make it fit in responsive view.
    At the moment logo text is breaking because of its size into a second line in responsive view (please see screenshot).

    Below the menu i added a special heading element. It looks nice with correct spacing.
    But there is too much space between menu and the special heading element in responsive view.

    How can i reduce that space in responsive view?

    Kind regards
    Jak

    July 11, 2024 at 6:27 pm #1461872
    Rikard

    Hey Jak73,

    Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 767px) {
  .responsive #top #wrap_all .av-logo-container {
    height: 50px;
    line-height: 50px;
  }
  .responsive #top #wrap_all .content {
    padding-top: 0;
  }
}

    Best regards,
    Rikard

    July 16, 2024 at 5:26 pm #1462179
    Jak73

    Hi Rikard,
    this helped a lot, thank you!
    There is still a part, when the witdh of browser gets reduced, where the space above the spacial heading gets to big for some reason (please see screenshot).
    kind regards
    Jak

    July 16, 2024 at 8:27 pm #1462195
    Rikard

    Hi,

    Please try this CSS instead:

    @media only screen and (max-width: 990px) {
  .responsive #top #wrap_all .av-logo-container {
    height: 50px;
    line-height: 50px;
  }
  .responsive #top #wrap_all .content {
    padding-top: 0;
  }
}

    Best regards,
    Rikard

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.