Skip to main content
Topics#Ask An ExpertBrian LaRue의 질문
Brian LaRue 님이 #Ask An Expert에 질문했습니다
2019년 8월 28일 오후 5:02

Community - Change orientation of layout at medium and large breakpoints

I am working on a layout for a custom community in my org. I started developing a mobile-first layout and have got this looking the way I intend. This is implemented as an HTML Editor component in a container in our theme. This layout has graphics and text that is contained in a vertical grid on mobile devices as seen here:

 

Community - Change orientation of layout at medium and large breakpoints

 

Now I have moved on to the larger display sizes. However, I would like some of these elements to be displayed horizontal, similar to a bulleted list when the screen size is larger (tablet and desktop). Using the Lightning Design System I cannot seem to figure out how to change the orientation from vertical to horizontal based on a break point.

 

I would like to have them displayed like this:

 

a bulleted list

 

Here's a simpler version of my HTML:

<h2 style="font-size: 16px; font-weight: bold; color: #.294d5e; text-align: center">Why should I submit a complaint?</h2>
<div class="slds-grid slds-wrap">
    <div class="slds-col slds-size_1-of-1">
        <img src="{!contentAsset.magnifyingglass.1}" class="slds-size_xx-small slds-m-bottom_large slds-m-top_large slds-align_absolute-center"/>
        <p class="slds-text-align_center"style="font-weight: bold; font-size: 1.25em; margin-bottom: 1em;">Your complaint helps us protect our community.</p>
        <p class="slds-text-align_center">The experiences that you share will help us find ...</p>
    </div>
    <div class="slds-col slds-size_1-of-1">
        <img src="{!contentAsset.letter.1}" class="slds-size_xx-small slds-m-bottom_large slds-m-top_large slds-align_absolute-center"/>
    	<p class="slds-text-align_center" style="font-weight: bold; font-size: 1.25em; margin-bottom: 1em;">We provide free information and referrals that are customized to help you.</p>
    	<p class="slds-text-align_center">Once you get in touch with us, we'll reach out to you with in 5 days and give you more information about how to resolve your problem.</p>
    </div>
    <div class="slds-col slds-size_1-of-1">
        <img src="{!contentAsset.scale.1}" class="slds-size_xx-small slds-m-bottom_large slds-m-top_large slds-align_absolute-center"/>
        <p class="slds-text-align_center" style="font-weight: bold; font-size: 1.25em; margin-bottom: 1em;">We may be able to take legal action on your behalf</p>
        <p class="slds-text-align_center">We won't be able to take legal action on every complaint&mdash;but for some complaints, they will. The city prioritizes cases that may affect many people and that are difficult for consumers to bring on their own.</p>
    </div>
</div>

How do I accomplish this? I'm at a loss.

답변 1개
답변을 작성하세요...
0/9000