Support Topics Documentation Slack YouTube Blog

UI Building - Two clean separate vertical colors

How can I split to show two separate colors vertical with both sides able to add rows (content)?
Example: 04.02.2021-04.43.26

If i add row 12/12 (100%) I cannot split the background color into two. Even if I did 6/12 & 6/12

I accomplished above by doing row 50% and background color turquoise. But now, I cannot add text or boxes to the right side.

Would the solution be to create as an image background. I think that would result in the text overlapping the central color separation line with some different screen sizes…

Hello @Mark_Wilkinson

Did I understand correctly that you just need to paint the background?
If so, I would do it without using blocks.

Regard, Viktor

Hi Viktor,

Almost but not quite. See the page outer frame https://backendlessappcontent.com/CE9CA061-AFDB-F16B-FF15-2A78893EF900/E72216FB-A303-4CAF-889D-E9FE93BE9E29/files/ui-builder/containers/default/index.html?page=login

Hi Mark,

Do you need to get rid of the outer frame?

Mark

Hi Mark,

Yes. But only for this page.

Hi Mark,

If you select the outer panel that sits on the page, you can get rid of the margins using the following properties:

Regards,
Mark

Excellent. Thanks.
Have a good weekend.

Great! Thanks.
What would it be for Mobile 769px? I wish to reverse so it is horizontal.
I have tried CSS with little luck.

Hello @Mark_Wilkinson




CSS Code
@media (max-width: @appLayoutMaxPhoneWidth) {
  .some-class-name {
    background: linear-gradient(0, green 50%, yellow 50%)
  }
}

@media (max-width: @appLayoutMaxTabletWidth) and (min-width: @appLayoutMinTabletWidth) {
  .some-class-name {
    background: linear-gradient(0, purple 50%, pink 50%)
  }
}

@media (min-width: @appLayoutMinDesktopWidth) {
  .some-class-name {
    background: linear-gradient(90deg, blue 50%, orange 50%)
  } 
}

Instead @appLayoutMinDesktopWidth you can use custom size like:

@media (max-width: 500px) {
  .some-class-name {
    background: linear-gradient(0, green 50%, yellow 50%)
  }
}

@media (max-width: 501px) and (min-width: 700px) {
  .some-class-name {
    background: linear-gradient(0, purple 50%, pink 50%)
  }
}

@media (min-width: 701px) {
  .some-class-name {
    background: linear-gradient(90deg, blue 50%, orange 50%)
  } 
}

By default size vars:
@appLayoutMaxPhoneWidth: 479px;
@appLayoutMinTabletWidth: 480px;
@appLayoutMaxTabletWidth: 839px;
@appLayoutMinDesktopWidth: 840px;

Regard, Viktor

1 Like