I have a form displayed on my page that I need to style according to a provided mock-up for mobile devices.
Here is the mock-up I am supposed to follow:
https://i.sstatic.net/ojxWb.png
This is how the layout currently looks on my page:
https://i.sstatic.net/KJ8Um.png
And here is the code snippet from my view:
<section class="restaurant__nav col-xs-offset-1 col-xs-10 col-md-offset-0 col-md-3 well">
<div class="container">
{{ form_start(form) }}
{{ form_widget(form) }}
{% if app.user %}
<input type="submit" value="{{ 'buy.field' |trans |upper }}">
{% else %}
{{ 'not_connected.text' |trans }}
{% endif %}
{{ form_end(form) }}
</div>
</section>
I'm not very familiar with SASS or CSS, but I've attempted to adjust the margins of each element with some difficulty.
Does anyone have any tips or techniques to achieve a layout similar to the mock-up without using specific pixel values like margin-left: 20px
?
(Please disregard the RÉSERVER
text - my goal is to center the form and ensure equal spacing between elements)
Thank you!