Responsive Layout

[pjshuey]

Is there a way to change the background color on individual sections of the responsive layout?

[mwalter]

Can you put a standard layout in the section. Set the height and length to 100%. Then set the background of that.

We haven't upgraded to 6 yet, so I can't try this. But, that's how I'd do it in HTML5. I'd place a DIV inside my col.... div, and set the background of that.

[pjshuey]

I was hoping there is a way to do it using the new responsive layout widget without having to add a layout on top of it to get different colors in different sections.

[Megan]

Hello Patti,

This is certainly possible with the responsive layouts! To do this, you'll want to add rules to the 'style rules' property that will color the background of the containers. See the steps below.

Right click the 'style rules' property and click 'Open in Editor...'

openInEditor.png (12.28 KiB) Viewed 666 times

Example rules to add:

editSylesRules.png (11.59 KiB) Viewed 666 times

Code: Select all

@media screen {
  #_id_>.puiresp {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 3px;
    grid-row-gap: 3px;
  }
  #_id_>.puiresp>div:first-child {
    background: red;
  }
  #_id_>.puiresp>div:nth-child(2) {
    background: orange;
  }
  #_id_>.puiresp>div:nth-child(3) {
    background: yellow;
  }
  #_id_>.puiresp>div:nth-child(4) {
    background: green;
  }
  #_id_>.puiresp>div:nth-child(5) {
    background: blue;
  }
  #_id_>.puiresp {
    background: purple;
  }
}

Result:

rainbowRespLayout.png (26.48 KiB) Viewed 666 times

To see the structure and order of responsive layout, you can use the developer tools of your browser. In Chrome, the tools can be opened with Ctrl + Shift + I. Ctrl + Shift + C can be used to highlight and select the element you want to view in the developers tools.

Using Ctrl + Shift + C to highlight element:

ctrlShiftC.png (32.16 KiB) Viewed 666 times

Responsive Layout in Developers Tools:

respLayoutInDT.png (55.97 KiB) Viewed 666 times

div:first-child, the red container:

firstChild-RedContainer.png (56.14 KiB) Viewed 666 times

Additional information on CSS Selectors: https://www.w3schools.com/cssref/css_selectors.asp

We hope this helps! If you have any questions or concerns, please let us know and we'll be happy to help!

Thanks,

[pjshuey]

Thanks Megan! This is exactly what I needed!