I created this Lightning component

<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable" controller="MyComp">
   <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
   <div class="dashboard is-dashboard">
      <div class="slds-container--fluid">
         <div class="slds-grid slds-wrap slds-grid--align-center">
            <div class="slds-col">
               <div class="slds-section slds-section--apps channel-direct slds-is-mobile">
                  <div class="slds-section__header">
                  <div class="slds-section__content slds-clearfix">
                        <aura:iteration items="{!v.myList}" var="myObj">
                           <li class="slds-list__item slds-text-align--center">
                              <a href="{!myObj.url}" title="{!myObj.title}" target="_BLANK">

And when I preview this

I see my component is only using a very small portion of the available area. How do I make sure it uses the full area?

enter image description here


Try changing this line

<div class="slds-col">


<div class="slds-col" style="width:100%;>

That should make sure your component uses all the width available on device.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.