Tagged: ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • May 8, 2015 at 2:40 pm #441519
    moviestar007

    Hi there,

    I followed the instructions here to build a widget in the header to display a Message on the right of the logo, as described in http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/.

    Anyhow I managed it to be as I intended, and it works good in Chrome and Firefox, but in Safari Desktop (all Mac) and iPad it slides right off the screen.

    Do you have any suggestions how to solve this?

    Thanks in advance!
    Andreas

    May 9, 2015 at 6:16 am #441886
    Rikard

    Hi moviestar007!

    Please try the following CSS instead of your current one:

    #header .widget {
  padding-top: 0;
  position: absolute;
  top: -100px;
  width: 470px;
  right: 5%;
}

    Best regards,
    Rikard

    May 9, 2015 at 11:38 am #441933
    moviestar007

    Hi Ricard,
    that’s perfect, great support!!

    Thank you
    Andreas

    May 9, 2015 at 11:57 am #441934
    moviestar007

    sorry, one more:

    on the ipad the widget text is now positioned about 15px lower than on desktop browsers, so it’s not on the same level as the logo. When I change the width of the browser window on safari desktop this does not appear.
    Would be great if you have a suggestion for this!

    Andreas

    May 11, 2015 at 4:44 am #442182
    Rikard

    Hey!

    Please try adding this as well, after the other code:

    @media only screen and (min-width: 768px) and (max-width: 1024px) {
#header .widget {
  top: -85px !important;
}
}

    Cheers!
    Rikard

    May 11, 2015 at 9:49 am #442305
    moviestar007

    thak you.

    This works well on my iPad (with -120px), but on narrow browser screens on the desktop it is shifted in the other direction and it’s aligned a few pixels above the logo.

    Do you know if there are special classes or different behavior on the iPad? Unfortunately I do not have other tablet models to test it with, so I usually simulate it by resizing the window width.

    rgds
    Andreas

    May 14, 2015 at 4:58 am #444085
    Rikard

    Hi!

    Please try the following instead:

    @media only screen and (min-width: 768px) and (max-width: 1024px) {
#header .widget {
  top: -100px;
  right: 0%;
}
}

    There should not be any significant difference between a desktop and tablet browsers so I think simulating on your desktop browser should be enough.

    Best regards,
    Rikard

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