Using responsive variations

GroovePages makes use of a "mobile first" design approach (through the TailwindCSS framework). This concept means sites should be designed for smaller screens first, and then have the basic design customized for larger screens.

In GroovePages, this means that when using the style editor and not selecting any responsive selectors (like in the screenshot below) you are setting generic styles that are applied to all screen sizes (ranging from mobile devices to desktop computers) and are meant to be overridden for specific screen sizes using the responsive selectors (indicated by the pink arrow in the screenshot).

It's important to remember that styles applied to specific screen sizes, by using the responsive selectors, will override generic styles (applied without selecting any responsive selectors).

Let's look at an example. In the screenshot below, we have applied a blue text color using the smallest responsive selector (meaning we want this style to apply to the smallest screens and anything above, since we're adhering to the mobile first design concepts).

Now, when we un-select the mobile responsive selector and then try to change the text color, we'll see that those changes are not applied on the canvas:

Remember that without selecting any of the responsive selectors, we are applying generic styles which are meant to be overridden by responsive selector specific styles (in this example, the blue color set for the mobile responsive selector). If we now want to change the text color for larger screens, we'll need to do this by applying the mobile first concept and indicate for which screen-sizes we want to change the text color.

In the final screenshot below, you will see that we have now selected the laptop responsive selector. That selector, in combination with the changed text color will work as we can see on the canvas: