How could I add padding to span's contents using css (not JS) in bootstrap?

Question

I've a bootstrap site, where I defined a background image for BODY, size=cover; which works fine in almost all modern browsers.

Then I've defined a structure like this:

<div class="row">
    <div class="span12">
        <div class="span1">&nbsp;</div>
        <div class="span5">CONTACT_FORM_CONTENT</div>
        <div class="span5">MAP_ETC_CONTENT</div>
        <div class="span1">&nbsp;</div>
    </div>
</div>

Now, some shots to see how it looks:

While viewing in desktop browser

While viewing in smartphone

The problem

While viewing the website in desktop browser, all is ok. Each "< span1 >" at left/right act as padding at left/right correctly, but when viewing with smartphone, these "< span1 >" are transformed and placed at top/bottom of my content and padding at left/right dissapears.

Does anyone have an idea how to solve this without using JS? I'd like to correct the entire website with just some css changes.

Thanks

Answer 1

You can accomplish this by padding the Form Content like this:

CSS:

.padded { padding: 10px; }

HTML:

<div class="row">
    <div class="span12">
        <div class="span1">&nbsp;</div>
        <div class="span5">
            <div class="padded">
                 CONTACT_FORM_CONTENT
            </div>
        </div>
        <div class="span5">MAP_ETC_CONTENT</div>
        <div class="span1">&nbsp;</div>
    </div>
</div>