Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #716591

    Hi,

    I have the problem, that CSS-Code which influence the look at the desktop without problem, doesn’t works on mobile devices.
    Altough it is a general CSS-Code and not a special one.

    I added the div contactinfo to the header. It should be hidden, if the page is scrolled.
    .header-scrolled div.contactinfo {
    display: none !important;
    }

    I noticed, that the scrolled-behavior of the header on tablet is different to desktop. If I test it in the chrome browser and I switch there to the device-testing it works. But if I test it on the mobile device directly it does’nt work. I think that there is no css-class .header-scrolled on mobile-devices. Which class could I use, to hide it on mobile devices?

    Thanks,
    Daniela

    #717688

    Hey Daniela,

    you need add media queries to your code, to adjust settings on mobile. Refer to this site for more information about how to use media queries: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    Best regards,
    Andy

    #719446

    Hey Andy,

    this code should always work. If the page is scrolled, the contactinfo should allways be hidden.
    http://www.triptripdrop.com

    I worked with the media queries for other settings, so I know the media-queries. On tablets the phone-number ist hidden, but
    the mail-icon is shown.

    Best regards, Daniela

    • This reply was modified 2 years, 11 months ago by  DStoeckl.
    #719975

    Hi Andy,

    I found out, that the class .header-scrolled doesn’t influence the header behavior on tablets. This is one failure. Now I want that the
    elements mail-Button and telephone-number are always shown – altough when the page is scrolled. But if I scroll, the phone-number will be hidden.
    I can’t found any css-settings, that causes this circumstances. So I think, there exists a little script which do so only on tablets!
    How I can deactivate this, so that I doesn’t have to document the change for theme-updates.

    Best regards,
    Daniela

    #721226

    Hi,

    Please use following code instead

    .header-scrolled div.contactinfo {
    display: none !important;
    }
    @media only screen and (max-width: 990px) {
    div.contactinfo {
    display: none !important;
    }}

    Best regards,
    Yigit

    #721484

    HI Yigit,

    thanks. Your code causes, that the contactinfo is not shown on tablets generally. But I want that the contactinfo is shown and only by scrolling the page down, the contactinfo should be hidden. I studied the code of the enfold-theme and a collegue give me a hint. So I found out, that the shrinking header doesn’t work on tablets. But altough the shrinking doesn’t work the telephone-number is hidden on tablets when scrolling down, and the mail-icon is shown.

    I want that both (mail-icon, telephone-data) have the same behavior: Either both are shown or either both are hiddden, if the page is scrolled down. On desktop-browser, also on the device-test of the chrome-browser all is OK. Only on tablets there is a different behavior.

    I found out, that when I deactivate the shrinking header the behavior is the same. But we want to use the shrinking header for desktop. And this settings influences also the behavior on tablets.

    Thanks,
    Best regards,
    Daniela

    Another problem is: the position of the contact-info on the homepage doesn’t work right. I cannot unterstand, why there is a difference between desktop and tablet. And why this is only on the homepage and not on the other pages.

    Thanks,
    Best regards,
    Daniela

    #722562

    Hi,

    it seems you figured it out, as mail and telephon get hidden when scrolled down, but are shown when not scrolled down on tablet:

    View post on imgur.com

    View post on imgur.com

    Best regards,
    Andy

    #741995

    Hi Andy,

    on my android tablet, there I haven’t your described behavior. I only have this, if I test it on the chrome browser on my pc and select there the difference mobil devices. My graphic artist has the same problem on her ipad.

    Best regard,
    Daniela

    #743447

    Hi,

    please clear browser cache and hard refresh a few times. Even on desktop those information is disappearing for me.

    Best regards,
    Andy

    #743520

    Hi,

    it doesn’t work :(.
    On desktop there was never a problem, only on tablets.

    How I can hard refresh the browser? I found some possibilties and tested but no one worked.

    Best regards,
    Daniela

    #744500

    Hi,

    check out first result in Google: https://wiki.scratch.mit.edu/wiki/Help:Hard_Refresh

    Also check on a different device.

    Best regards,
    Andy

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

You must be logged in to reply to this topic.