Mobile Responsive Troubles – iPad and iPhone

Homepage › Community Forums › Epik Theme Support › Mobile Responsive Troubles – iPad and iPhone

Tagged: , ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • June 11, 2014 at 7:51 pm #12635
    mponzi
    Customer

      Hi:

      I’m using Epik 1.4 and am having home page trouble with mobile responsive display on iPad and iPhone. This could possibly be linked to 2 changes to the CSS file:

      1) Enabled fixed background for paralax effect to home page slider area and home feature #3. In both areas, I used a text widget for the text, and the font size & weight are set inline within the text widget code (not standard H1, H2).

      2) I created a fixed (non-scrolling) header and nav menu.

      On the iPad, slightly different problems occur in landscape and portrait mode. On the iPhone, the problem occurs on portrait mode only, and is the same issue as iPad landscape mode.

      Here are links:

      I didn’t want to mess with the media query sections without some expert input.

      Thank you!! Really appreciate all the help you’ve provided!

      June 11, 2014 at 7:53 pm #12636
      mponzi
      Customer

        Here are the links again. Sorry:

        Main site, laptop / desktop version.
        Screenshots of the issues on mobile devices

        June 14, 2014 at 12:36 am #12662
        Leanne
        Customer

          Hi mponzi, I had the same problem and the developer sent me back the instructions below to fix it up. Now works perfectly. I had to put the code in immediately after the @media only …. 480px as shown below though – if you put it anywhere else it doesn’t seem to work (well for me anyway). This fix worked perfectly.
          Cheers
          Leanne
          ______________________________________________________________________________________________________

          Just add the above code right under the 480 media query section near the bottom of your css like this –

          @media only screen and (max-width: 480px) {

          .header-image .site-title a {
          background-size: contain !important;
          }

          June 14, 2014 at 9:13 am #12664
          mponzi
          Customer

            Thanks for the suggestion Leanne.

            In my case, this didn’t work. Still looking for help.

            The background-size command might be what I need, but I think I need to fix different areas than .header-image and .site-title.

            I think I must of set some size and / or position parameters for the home widget areas, and those need to be over-ridden in the media-queries sections for mobile devices. Just can’t pinpoint which ones.

            Appreciate the help.

            Marshall

            June 21, 2014 at 10:03 am #12800
            mponzi
            Customer

              One problem solved: iPad landscape. I inadvertently deleted the following line from the media query for max width 1180px.

              .wrap {
              max-width: 960px;
              }

              FWIW… I discovered this by using DiffChecker and comparing the original Epik 1.4 style.css file with my revised file. That helped me track down the source of the problem.

              Still working on iPhone layout, but I think it’s a similar issue.

              Marshall

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