Some small issues in mobile devices

Homepage Community Forums Epik Theme Support Some small issues in mobile devices

Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #12781
    hich
    Customer

      Hello we need your help!

      We’re having small issues with our site http://www.soogreat.com on mobile devices.
      First, background images are not displaying correctly.
      Second, there are border lines on titles and subtitles and it’s hard to identify the class behind to correct it.
      Everything looks fine when testing the site here http://www.studiopress.com/responsive/ but when testing on mobile devices it’s another thing…

      #12782
      hich
      Customer

        Hi, it looks like the issue is only in Safari and Chrome..

        #12783
        hich
        Customer

          Mysterious horizontal lines displaying on background images..cannot find how to fix this?

          #12784
          hich
          Customer

            Please if you can assist us as soon as possible.

            #12786
            hich
            Customer

              I noticed….when I removed -webkit-box-shadow and -webkit-text-shadow there’s no more lines appearing….however the images in the background are no more displaying correctly on devices..

              #12788
              Wes
              Moderator

                It looks like you’re using version 1.3? I’ve added a lot of updates to the theme in version 1.4 which allows you to add background images automatically using an uploader. I’ve also added code which makes the images adjust in mobile devices so you can see the image a little clearer.

                If you’ve already made changes to your css file then I would manually add in the updates from the files. You can use a site like this – http://www.diffchecker.com/ to see the differences in code. The files you’ll need to adjust are the functions.php, home.php, and I’ve added 2 folders which contain javascript files that you’ll need to add to your theme if you want to use the responsive menu. I also made a lot of changes to the style.css file, but you won’t need to adjust this since you’ve made a lot of changes to your own css file.

                All of the updates are mentioned here – https://appfinite.com/changelog/epik-log/

                The updates are not required, so if you don’t want to add all of them but you do want to fix how the images appear on mobile devices then you can add this code to your Responsive Section of your css under the iPad/Tablets section around line 4700

                
                /* iPad/Tablets (portrait and landscape)
                --------------------------------------------- */
                
                @media only screen and (max-width: 960px) {
                
                .home-feature-bg-dark,
                .home-feature-bg {
                	-moz-background-size: auto;
                	-webkit-background-size: auto;
                	background-attachment: scroll;
                	background-position: top;
                        background-size: auto;
                }

                The “border lines” that you’re referring to is called Text Shadows. It looks like you added this to your css in a few places. Here is the text-shadow that you added to your slider –

                .slider h1{
                color: #000;
                text-align: center;
                text-transform: uppercase;
                text-shadow: 0 2px 2px #F2F2EF;
                -moz-box-shadow: 0 2px 2px #F2F2EF;
                }

                There also in a few other places as well.

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