Skip Navigation

[Resolved] Responsive render is not right on ipad

This thread is resolved. Here is a description of the problem and solution.

Problem:

You must look at this page on ipad to see problem. See attached screenshots. Content is getting cut off, it is overflowing the column on ipad.

Solution:

It should be a custom CSS code problem, I assume you are using Bootstrap framework in your website, please check these:
1) follow Bootstrap document to setup the Grid options:
http://getbootstrap.com/docs/4.0/layout/grid/#grid-options
For example, iPad device should be 768px width

2) it is a conflict between your theme and Bootstrap, I have added below codes into your theme/style.css:

@media (min-width: 768px){
  body.single-artist div.container{
      width: auto !important;
  }
}

Relevant Documentation:

http://getbootstrap.com/docs/4.0/layout/grid/#grid-options

This support ticket is created 6 years, 10 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Hong_Kong (GMT+08:00)

This topic contains 4 replies, has 2 voices.

Last updated by Luo Yang 6 years, 10 months ago.

Assisted by: Luo Yang.

Author
Posts
#609871
desktop-fine.jpg
mobile-looks-good.jpg
ipad-content-overflows.JPG

I am trying to: Get the post template to render proper on ipad. Works fine for mobile but gets cut off on ipad.

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

I can send login privately.

I expected to see: You must look at this page on ipad to see problem. See attached screenshots. Content is getting cut off, it is overflowing the column on ipad.

The 3 attached jpegs show the page on desktop (fine), mobile (fine), and ipad(breaking)

Thanks

#610049

Dear Chris,

It should be a custom CSS code problem, I assume you are using Bootstrap framework in your website, please check these:
1) follow Bootstrap document to setup the Grid options:
hidden link
For example, iPad device should be 768px width

2) deactivate other plugins and switch to Toolset Starter theme, and test again, you can download it here:
https://toolset.com/account/downloads/#toolset-themes

If you still need assistance for it, please provide the credentials of your website in below private message box.

#610553

Thanks for the details, it is a conflict between your theme and Bootstrap, I have added below codes into your theme/style.css:
hidden link

@media (min-width: 768px){
  body.single-artist div.container{
      width: auto !important;
  }
}

Please test again, check if it is fixed

#610768

Thank you! That was it. I have adjusted the css for my other post types and that is fixing it.

#610918

You are welcome