0

I'm attempting to build a Community with a Custom Theme Layout. As part of that, I'm trying to style the component to be responsive. However, when I'm in the builder, I've been able to get @media queries OR SLDS responsive classes to recognise that the viewport is anything other than "small" design factors.

I'm not sure if this is just a known feature/bug/issue with Custom Themes, or if this isn't how they're supposed to be used?

Here is a simplified version. 

<aura:component implements="forceCommunity:themeLayout">
    <div class="slds-hide_x-small slds-hide_small slds-hide_medium slds-grid">
       DESKTOP CONTENT IN HERE
    </div>
    <div class="slds-hide_large slds-hide_x-large slds-grid">
        MOBILE CONTENT IN HERE
    </div>
    <div class="slds-grid slds-grid_align-center">
        {!v.body}
    </div>
</aura:component>

When the viewport is small, I can see the "MOBILE CONTENT IN HERE" message, but when the viewport is larger, the "MOBILE CONTENT IN HERE" vanishes and the "DESKTOP CONTENT IN HERE" doesn't appear in its place.

If we cannot make these sections responsive, then headers cannot contain particularly complex content (e.g. nice background pictures, heading titles, etc.)

Improve this question

1 Answer 1

Reset to default
0

Here is an example which works for me, you seem to be having more classes than needed which conflicts with the responsiveness of layout:

<aura:component implements="forceCommunity:themeLayout">
    <lightning:card>
        <div class="slds-show_medium">
            DESKTOP CONTENT IN HERE
        </div>
        <div class="slds-show_small slds-hide_medium">
            MOBILE CONTENT IN HERE
        </div>
    </lightning:card>
</aura:component>
Improve this answer
2
  • Thank you - That's a helpful example. I had misread the documentation and, as the issue I was seeing had the same symptoms as the media CSS I was trying to use, I assumed it was the same thing. I might have to ask my media question in a different question.
    – Bigears
    Commented Jan 17, 2020 at 14:54
  • no worries, happens to all of us. glad to be of any help, good luck! :)
    – Raul
    Commented Jan 17, 2020 at 15:36

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .