Hi all, my first post.
I’ve been happily working on my new website and mostly enjoying working with Blocks, but now that I’m testing it on different devices I have found a problem I can but cal “bleeding text” where the text bleeds over from one block to another on certain screen sizes. I discovered it in horizontal view on the iPad and was able to recreate it in the linked screen recording.
My question is how do I keep the text contained within its block?
Wow that looks weird. Is this Blocs 2 or Blocs 3? We may need to see the project file to help on this one.
That’s what I thought too. I’m using Blocs 3. I believe the problem came out of me wanting large text in a box centred on the screen, which I thought was playing to the strengths of Blocks, a simple clean design. I achieved the layout I was aiming for by using classes, unfortunately, I started seeing the bleeding issue and have begun from scratch and tried a few different approaches, but all have resulted in the bleeding in various degrees.
Those are the exported items. To check this in Blocs you need the project file.
Sorry my bad, replaced it with the project file licensedfool.bloc
Looking at it now. I think your issue stems from having several blocs that are all set at full page for padding, which is causing an overlap. I set each bloc instead as XXL 200 and the problem seems to go away. Logically there can only be one full page bloc on a page.
On a side note you have the project set up in a slightly unorthodox manner and I would advise setting the text sizes inside project settings for each breakpoint, then override if really necessary in the side panel. Yes it can be done through custom classes but it means adding them one by one to each bloc on every page.
Thank you for looking at this.
So I went in and changed the padding to XXL - 200px
Followed your tip for settings the text inside project settings, thanks for that.
My impression: I was going for a fullscreen look for each Bloc, which it now does not do, but does it fix the problem? I have yet to try it out on the iPad in horizontal view, but when previewing it in Safari I am still able to get the bleeding text, see the image below. So there might be something else unconventional that I’ve done.
I understand the full screen look, but that only works once, so you need to structure the site in a different way using spaced rows and columns within a single bloc. I don’t have the images here to test it like you have, but this should be perfectly manageable.
EDIT: I would also recommend using Rem rather than PX font sizes. They tend to work better across different device types.
Thank you, looks like I have a fair bit more tinkering to do before I have the look I’m going for.
Thanks for the Rem tip, I’ll look into that.
