[Closed] The content of one of my views is spilling over the section on tablet

[Author]

Posts

[belindaV]

I am trying to: I viewed my site on my iPad in portrait mode and the text that is on the page where I am displaying my results with a custom search is going over the "bounding box" of the view. It is working perfectly on mobile and desktop.

Link to a page where the issue can be seen: hidden link

I have provided access logins to the site as it is behind a coming soon screen.

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi,

Thank you for contacting us and I'd be happy to assist.

It looks like some custom CSS styles are interfering with Bootstrap's responsive layout.

To fix this, you can include the following custom CSS code, in the view's "CSS editor":

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

.js-wpv-view-layout .view-row .column-one-third,
.js-wpv-view-layout .view-row .column-two-third {
  width: 100%;
  float: none;
  margin: 1% auto 2%;
}

}

This will make the two columns in the results, show up stacked on top of each other, on the screens narrower than 781px width.

regards,
Waqar

[belindaV]

Thanks so much - that sorted it out on portrait but I now see it is also happening on ipad landscape. Do I then just tweak the figures in the above code?

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Thanks for the update and glad that the code worked.

I did some tests and couldn't find any screen width breakpoint where the columns extend beyond the container.

Can you please clear all involved caches, including the ones in your iPad browser, and then test the page again?

If the issue persists, you're welcome to share the information about the browser and the iPad that you're testing with, along with the screen resolution.
( ref: hidden link )

[belindaV]

Thanks, I have cleared my the cache on the website itself and have cleared it in Safari, chrome and firefox on my ipad and am still seeing the problem.

The ipad is an iPad mini (6th Gen) and the screen resolution says it is 744 x 1133

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

In my tests, I still couldn't reproduce this.

Can you please test this again after changing the screen width value in my code from "780" to "800" or "1024"?