In Lightning Component or Aura Component some time you need to write some custom CSS for responsive or device Compatability.

Let’s discuss salesforce responsive design. Media Queries Breakpoints playing the main role in responsive design as well as salesforce SaaS products.

Learn some basic stuff regarding, Screen resolution, Device width, and Screen Size.

Standard breakpoints using min-width

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Standard breakpoints using max-width

@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

Let’s see the example with Lightning Component or Aura component. Here we have one component, inside the component we have one div. it showing case subject in both desktop and mobile view.

Component file to show the case Subject 

<aura:component >
    <aura:attribute name="case" type="Case" description="Case subject to display" />

    <div class="sample-class">
        <label>Subject: </label>
        <ui:outputText aura:id="subject" value="{!v.case.Subject}"/>
    </div>
   
</aura:component>

CSS file for component

.THIS .sample-class{
    width: 45%;
    float: left;
}

Now we are going to apply 100% with for mobile view using media query.

@media all and (max-width:767px) {
  .THIS .sample-class{
        width: 100%; 
        float: left;
    }
}

Note: Learn more about common media query.