I am new to CSS and am having an issue with layouts.
I have 4 buttons to be laid out horizontally unless it is mobile, in which case they should be stacked vertical.
I currently have:
<div class="ui-g-12 ui-md-12">
<div class="card">
<p:panel id="filter" header="Filter">
<p:panelGrid columns="4" styleClass="ui-panelgrid-blank"
layout="grid">
<p:commandButton/>
<p:commandButton/>
<p:commandButton/>
<p:commandButton/>
</p:panelGrid>
</div>
</div>
In desktop mode, I don't want the buttons stretched to fit 100% of screen as they are too wide (25% each), so the generated code I need is:
<div class="ui-panelgrid-cell null"><button id...></button></div>
but what I get is:
<div class="ui-panelgrid-cell ui-grid-col-3"><button...></button></div>
which is why the 4 buttons each take up 25% of screen width.
Can anyone please suggest how I can keep buttons responsive, but the 4 buttons don't take up 100%(25% each) of screen width when in desktop?
