Top image cut in half in mobile version

Homepage › Community Forums › Guru Theme Support › Top image cut in half in mobile version

Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • September 15, 2016 at 3:06 pm #19440
    Blair
    Customer

      The top background image is not formatted correctly on the iPhone mobile version. It is zoomed in so that half the image is cut off. Is there any way to fix this?

      September 16, 2016 at 12:52 pm #19452
      Eric
      Customer

        Hi, I would need a link to your site in order to see what’s going on.

        I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

        September 16, 2016 at 4:21 pm #19462
        Blair
        Customer

          http://spoonfulofparadise.com

          September 16, 2016 at 5:43 pm #19469
          Eric
          Customer

            That’s pretty much how any site or theme would display a large background image of that size when it’s designed to be responsive. The browser scales the image to fit the screen the best it can without distorting or destroying the quality of the image (stretching or shrinking too much).

            Since your image shows 2 people standing more towards the right of the image instead of the center, it will appear more cut off on smaller devices.

            What some sites do is create a smaller version of their image to show up when the site is being viewed on a smaller mobile device. If you are able to make a smaller version that will fit the size of a mobile device then I can show you where to add code in your CSS to make your site show the smaller image on mobile. It’s pretty easy to do, just need that smaller image.

            I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

            September 17, 2016 at 8:37 pm #19476
            Blair
            Customer

              That would be great! I can definitely edit the image into any size or dimension. I would really appreciate you showing me where to add the code! Will the code specify the orientation of the device? It only cuts off the outside person in portrait orientation. Or do i have to use one image for both orientations? If so, I may need to experiment with dimensions? Also, does the image need to be large enough to use on larger mobile devices, like iPads? I have a feeling the dimension ratio is more important here than the actual image size. Does that make sense?

              Thank you so much for your help with this!

              September 18, 2016 at 9:10 pm #19484
              Eric
              Customer

                I could do either or. If the issue only appears on Portrait, then I can add code that will call the smaller image when being viewed from that particular size.

                I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

                September 19, 2016 at 4:45 pm #19491
                Blair
                Customer

                  Since landscape looks fine on the iPhone let’s just do it for portrait. I will try to figure out what dimensions to scale the image to so that I can make a version that will work in portrait.

                  Thanks so much!

                  September 21, 2016 at 9:35 am #19621
                  Eric
                  Customer

                    Hey, just wanted to see if you came up with anything? Did you get the image size right? Or are you still experiencing the same issues?

                    I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

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