Responsive website shows incorrectly on iPad

  • Resolved justahumblewpuser

    (@justahumblewpuser)


    5 years ago

    Hello all!

    I am working on making this site responsive for all different types of devices and I feel that I am fairly close. On the current website, the main banner image is set to be a 4000×1500 px image of 4 shoes in a line when viewed on desktop and a 1000×1000 px image when viewed on mobile. I have used the Beaver Builder settings to set the 4000×1500 px image to be displayed when the site is viewed on a tablet, however, when I inspect the website using Chrome dev tools and view it as an “iPad”, the site shows the 1000×1000 px image and cuts off the top and bottom. My initial thought was that iPads view the site as a tablet, but perhaps they pull the mobile version of the site and that is the issue? When I use dev tools to view the site as an “iPad Pro” the correct 4000×1500 px image is shown, so perhaps it’s just the size of the tablet that matters. I feel like it is really close to being perfect, but I am still missing something. Any help with this issue is much appreciated!

    -Just a Humble WP User

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Plugin Contributor Ben Carlo

    (@hinampaksh)

    Hey @justahumblewpuser,

    Thanks for getting in touch!

    That would be correct in that we’re basing it on the viewport width of the device viewing the element.

    By default, our builder’s mobile device breakpoint is set to 768px which is the same as the viewport width of an iPad. This explains why the builder is treating the iPad as a mobile device.

    You can change this setting under Tools > Global Settings > Responsive Layout > Small Device Breakpoint. Changing it to 767px or lower should do it. ??

    Ben

Viewing 1 replies (of 1 total)
  • The topic ‘Responsive website shows incorrectly on iPad’ is closed to new replies.