Mobile problems with my theme Vierra

So http://1466.customer.net-spacy.com/news/unser-newsletter/ - once again. I need a way to NOT show the flipbook on mobile browsers (incl. ipad) as it looks like crap :wink:

Trying

@media only screen and (max-device-width: 1080px) {
#bookContainer.bookStage {
display: none;
}
}

with and without !important, with and without #bookContainer did not work on my iPhone 6plus - it was still showing.

Then there is the footer that looks not so nice - and the header, which is too big but does NOT contain the language switcher as it should (all on mobiles)

  • Michelle Shull
    • DEV MAN’s Apprentice

    Hey there, Matthias!

    I got the flipbook fixed, I just ended up hiding the whole iFrame on mobile. Give it a test and see what you think. I commented out the previous code I gave you in chat, and added this at the bottom:

    @media only screen and (max-device-width: 1024px) {
    iframe {
        display: none;
      }
    }

    I found out why your footer is being a jerk on mobile - the custom CSS you've got in there to make the controls and prev/next arrows for the slider and the custom CSS you've already applied to the footer isn't all responsive. (some of it is, but there are a lot of pixel references, as well.) We can work around, a little, but it's going to take some more work. Wanted to get your permission before I started fixing stuff willy nilly.

    Thanks, Matthias!

    • Matthias
      • The Incredible Code Injector

      For whatever reason the first code does not hide the booking iframe, it's great that it does not - as the second code (I just tried it) does not hide the flipbook-iframe.

      For the footer: Sure, do whatever you like :wink:

  • Matthias
    • The Incredible Code Injector

    Hey Michelle,

    if I understand that correctly, that would hide all iframes, right? In that case I'd better not use it as our booking engine is also embedded via iframe in another page (and booking should be the main purpose :wink: )

  • Michelle Shull
    • DEV MAN’s Apprentice

    Hey there, Matthias,

    It will, but we can fix that like this:

    @media only screen and (max-device-width: 1024px) {
    iframe .bookStage {
        display: none;
      }
    }

    Alternatively, if that doesn't work, try iframe #bookContainer

    That should only hide the flipbook iframe.

    Hope this helps!

  • Michelle Shull
    • DEV MAN’s Apprentice

    Hey there, Matthias!

    I think I got it! (?)

    Take a look on your phone, I moved the nav elements for the slider under the footer (when you've scrolled down.) For the footer itself, I gave some the inner footer some auto margins, so the content is centered properly and doesn't look off-kilter anymore.

    This is the code I used:

    @media all and ( max-width:799px ) {
      #prevslide, #nextslide {
        bottom: 10px;
      }
      #controls-wrapper {
        bottom: 0;
      }
     .footer-inner div:first-child {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
      }
    }

    Note: One of these days, we should clean up your custom CSS file. Ideally, all the mobile elements should be within the same @media tag, and it should cascade from 'big' elements like your header, and the primary container, down to the 'small' elements, like buttons and whatnot, so it's easier for your site to parse, and so it's easier to read through when you want to tweak something. It's not hurting anything, as long as everything works, but clean CSS makes for happy site owners. /opinions. :slight_smile:

    Thanks for swinging by chat today!

  • Matthias
    • The Incredible Code Injector

    My dream result would be - logo left, then language switcher and then the navigation... - all within the header, so it is not just plain purple :wink: 2nd best solution: A header as thin as the logo, containing also the switcher - and the navigation below :wink:

  • Michelle Shull
    • DEV MAN’s Apprentice

    Hey there!

    Okay, I got it super close, as you can see in the screenshot below. This is the CSS, which all needs to be wrapped in a media tag.

    header {
    height: auto;
    }
    
    .header-inner {
    margin-top: 0;
    }
    
    #wpml-selector {
    width: 10%;
    float: left;
    margin-top: -6%;
    padding-left: 8%;
    }
    
    #mainlogo img {
    width: 50%;
    height: 50%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 22%;
    padding-bottom: 1%;
    }
    
    .selectnav {
    width: 66%;
    display: inline-block;
    margin-bottom: 0;
    float: right;
    margin-top: -8%;
    margin-right: 4%;
    }

    This is a lot of poking and prodding, but the logo/nav/selector are all in the header, and there's much less purple. : )

    Let me know how this works for you, I have not added it to your site.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.