I am thinking of a design for a page where the background is split 50/50 vertically and the content sits in the middle around 40 pixels all the way around.
Just wondering how the best way to create this would be and to make it responsive too, but maintaining the pixel border in its 40px at all times. f its too much hassle I will do something else.
Below is a sketch of what I am after…just wondered what the easiest way to create this so the white box leaves a 40px border equality at all times.
So no matter what content I have inside, it still maintains that 40px at the sides.
Nearly there - want to keep the coloured edge 40 pixel all around. I will have a lot of content going in it, so multiply your text about 8 times. I do have a few ideas
Not really had chance to do much today, but will look at it later or tomorrow.
Hi @AdieJAM, surely that setup isn’t 100% viable, as the copy area will change with different breakpoints?
What would look fine at desktop size would most probably fall off the bottom of the screen and need to scroll at smaller sizes.
Unless it was an iframe affair, where the window stayed in the middle of the screen with a scroll bar on that rather than the browser window?
Agree @TrevReav, you’ll need to remove content on smaller breakpoints otherwise it will look funny with a scrollbar. Just making a small screen even smaller. The whole layout can be easily done within Blocs without any coding.
Hi @Blocs_User, I’ve reached my weekly maximum solution uploads! I’m sure @AdieJAM will be able to get this build with all help received so far and share the result with the community.
Hi @AdieJAM,
Here’s my attempt at this, which I think comes very close to what you’re looking for. Btw… considering the points bought up on this thread- particularly around using a decorative 40px border on mobile devices (which I agree is not good practice), I felt there might be a workable solution. And so I created the border not in pixels but in percentages which scales according to the screen size and thus minimizing the impact to any compromises a border can make when used on mobile devices. If useful, you might have to rename the classes and adjust some alignments and stuff. So… you’re not exactly out of the woods yet as things can break in the process . I’ve attached the blocs project file. Take a look.
Thanks for sending over. I did have a quick play and kind of got it sorted - but I will look at what you have done and see if this works the same or better.
Thanks you.
I am firing a few options over to my client tomorrow - so will be jumping on this early tomorrow (UK time!)
From the video you have posted, so far looks great !
Thanks @Eldar. Not sure where I picked up this trick (saw it some time ago) and felt it would be perfect in this scenario. As for the border… Yes I agree. I wouldn’t personally do this, but if I had a client that insisted on having this after being advised against it, I would do all that I could to make as usable as possible (hence using percent instead of fixed pixel width). Anyways, for me this was a good challenge to see if I can actually do this in Blocs without code.
I’m sure 
. I’ve attached the blocs project file. Take a look.
Well done!