• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Appfinite

Appfinite

Premium WordPress Themes for The Genesis Framework

  • Themes
  • Blog
  • Tutorials and Resources
  • Forums
  • Contact Us

Top image cut in half in mobile version

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

Tagged: mobile glitch

  • This topic has 7 replies, 2 voices, and was last updated 5 years, 10 months ago by Eric.
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.
Log In

Primary Sidebar

Search Forums

Affiliate Program

Looking to earn some money? Join our Affiliate program and earn 35% of every sale you refer. Top referrers earn 40-50%.

Join Now →

The Genesis Framework

All of our themes are designed for the Genesis Framework. You will need to purchase Genesis in order to use any of our themes.

Purchase Genesis

Hire a Web Developer

Need help setting up or customizing your website?

Contact Us →

Search Full Site

  • Buy Genesis!
  • Shopping Cart
  • Themes
  • My Account
  • Support Forums
  • Tutorials and Resources
  • Privacy Policy
  • Contact Us
  • Follow Us on Twitter

Copyright © 2022 · Appfinite · Built With The Genesis Framework