Ipad pro displays bootstrap-template differently in concrete5
Permalink
On the Ipad pro my HTML bootstrap-template is presented differently when I have it converted into a theme in concrete5. How come?
The template-page shows the medium-version (CSS: 992 to 1200 pixels screen-width) and the Concrete5-page shows the 'small' one (CSS: 768-992 Pixel screen-width).
Attached 'pic1' is the template-version and 'pic 2' is the concrete5-theme-version.
There's some kind of tablet-recognition in concrete5 involved, isn't there? Can you switch that off?
The template-page shows the medium-version (CSS: 992 to 1200 pixels screen-width) and the Concrete5-page shows the 'small' one (CSS: 768-992 Pixel screen-width).
Attached 'pic1' is the template-version and 'pic 2' is the concrete5-theme-version.
There's some kind of tablet-recognition in concrete5 involved, isn't there? Can you switch that off?
I don't think there's any specific device recognition; it's all done using media queries. Perhaps the issue is that pixels ain't necessarily pixels: the CSS definition of 'pixel' is NOT one physical dot on the screen (except on low-resolution devices), but is a specific size. Ergo, the responsive breakpoints may not occur where you're expecting them to.
But that cannot be the reason here, can it? Because it's indeed the same device where both versions (template and theme) are displayed.
The Concrete5 theme should normally look the same as the HTML template on which it is based, right? It doesn't, on the Ipad pro tablet in Concrete5 in both orientations, horizontally and vertically, the Bootstrap CSS for tablets (768-991 pixels screen width) is displayed, in the HTML template, on which the Concrete5-theme is based, the Ipad pro horizontal shows the version for large screens (1200+ pixels) and vertical the one for slightly smaller screens (992-1199 pixels).
So a tablet detection must be effective for Concrete5-bootstrap-sites somehow. It seems to me that somewhere in Concrete5 a certain maximum width for Ipad-bootstrap-sites' content-width is fixed. And I'd like to know where, so I can change it.
The Concrete5 theme should normally look the same as the HTML template on which it is based, right? It doesn't, on the Ipad pro tablet in Concrete5 in both orientations, horizontally and vertically, the Bootstrap CSS for tablets (768-991 pixels screen width) is displayed, in the HTML template, on which the Concrete5-theme is based, the Ipad pro horizontal shows the version for large screens (1200+ pixels) and vertical the one for slightly smaller screens (992-1199 pixels).
So a tablet detection must be effective for Concrete5-bootstrap-sites somehow. It seems to me that somewhere in Concrete5 a certain maximum width for Ipad-bootstrap-sites' content-width is fixed. And I'd like to know where, so I can change it.
I just realised that the same problem exists on smartphones: Only the tablet version (768 to 991 pixels width) of my bootstrap site is shown and horizontal and vertical screen-alignment doesn't matter.
That the smartphone-version of my Concrete5-bootstrap-site isn't shown is a real problem.
What can I do to change this?
You can see it yourself if you take a look at the website in google chrome developer tools:
http://www.altenpflegeheim-breitenworbis.com/...
On iPhone6 the computed width of the body is fixed at 980 pixels. It's the same on any smartphone listed but strangely not on the simulated ipad in horizontal display (but on my iPad it is).
Edit: It seems that one of these div's classes is responsible for the 980-pixel-width on mobile devices: "<div class="ccm-page page-template-full">"
That the smartphone-version of my Concrete5-bootstrap-site isn't shown is a real problem.
What can I do to change this?
You can see it yourself if you take a look at the website in google chrome developer tools:
http://www.altenpflegeheim-breitenworbis.com/...
On iPhone6 the computed width of the body is fixed at 980 pixels. It's the same on any smartphone listed but strangely not on the simulated ipad in horizontal display (but on my iPad it is).
Edit: It seems that one of these div's classes is responsible for the 980-pixel-width on mobile devices: "<div class="ccm-page page-template-full">"
Sorry; I didn't read your initial post closely enough. You're probably on the right track by looking for interfering CSS classes or files.
But I really appreciated your reply.
The post was in parts ambiguously worded (english is not my mother tongue), so misinterpretations are understandable to me.
The post was in parts ambiguously worded (english is not my mother tongue), so misinterpretations are understandable to me.
