I’ve created a partial site and I’m having an issue with one of the pages. The page can be seen here. Can someone please visit the page and tell me if the Members area is displaying at full width, or if it’s being confined to half width. The section in question is a code snippet that accesses a php script on the server and is supposed to be responsive. In Chrome browsers, it seems to work just fine, but in Safari, the width of the content appears to be restricted to half the width of the div.
I’ve been in touch with the script developer who tells me that the issue is related to the div container on the page which is restricting the width of the script interface. I’ve checked in the blocs project file and it seems that the div container is spanning all 12 columns at all breakpoints, so I can’t fathom out what the problem is. Maybe someone else has had a similar issue with embedded scripts??
Any feedback on what you can see on the page would be helpful, and details of the browser you are using.
Thanks in advance.
It looks like this here on my desktop using Safari 13.1.
Edit: This is on mobile.
That’s how it looks on my iMac using Safari. However, in a Chrome browser it looks correct- like this:
On an iPad it also displays incorrectly using both Safari and Chrome.
On Mobiles, everything displays correctly - maybe someone out there has an Android tablet they could check with.
Can’t get my head around this - unless there is a problem with device/screen detection!
I am not sure how to take a screenshot using the Kindle but it looks like your desktop image above apart from the three bar menu when held vertically. That is running Android.
Thank @Flashman, that helps to know - at least it’s responding correctly on the Android device. I think this is one for @Norm to take a look at - don’t really want to bother him at this time, but I think I’ll have to. As usual, thanks for your help.
OK Here is on a Kindle tablet.
That’s exactly as it should be. I’m beginning to think it’s something to do with Safari on desktop and Apple mobile devices - Really weird!!!
Hey @hendon52
Its very strange, I don’t know much about what your using here, but I noticed a problem with the class being applied to the container
When I remove the class attribute display: table it allows the columns to populate the row properly, but it does break the design a little
So something to do with this, and maybe the way Safari renders it?? I don’t know.
Thanks for that info @PeteSharp. I’ve forwarded a link to your post to the script developers (you appear to be able to explain the technical side of things far better than me - I’m not really a coder). What I am concluding is that the styling elements you’ve highlighted haven’t been created in the Blocs file - all I’ve put in the Blocs page is a full-width div containing the small piece of code that calls the script into the page. Everything from that point on is being styled by the script. Let’s see what their response is. I’ll come back to you when I get an answer - the response may be useful for other Blocs users that may want to utilise similar scripts on their blocs site. Many thanks for taking a look and your feedback.
Hey @hendon52,
If you look at the Bootstrap version they are using it is 3.3.2. Blocs currently uses BS4. I know there were some significant changes made between 3 & 4. Maybe it is a conflict? As you are running both on the page, the earlier version is loading after 4. Just a guess, I am not really sure.
@PeteSharp Just letting you know you were correct in your assumption about bootstrap versions. The script authors have corrected the issue for me, but have also confirmed that the problem is related to conflicts between the two bootstrap versions, in particular, display:flex css rules used in Blocs. This may be an issue with other commercial scripts developed in earlier bootstrap versions, so it’s always worth checking with script developers before buying a script.
1 Like
Yes. There was a number of classes I had to relearn when BS4 was released. Good you got to the bottom of it.
By the way, nice to see it’s working
