Put a panel class of foundation zurb on width 100%

Question

I would like to know if it's possible to put the panel class of foundation zurb with a width of 100% all the larger of the device Maybe someone have a solution ?

Thank you :)

Rémi

Answer 1

The "row" width in Foundation is set by default to 1000px. At widths greater than that you would need to do a media query and use css to set the parent row max-width to 100% and then set the panel's width to 100%.

CSS

@media only screen and (min-width: 1001px) {
#panel-div {
    max-width:100%;     
};

#large-panel {
    width:100%;      
  }
}

HTML

     <div class="row" id="panel-div">
       <div class="panel" id="large-panel">panel goes here</div>
     </div>