CODEWITHSUNDEEP
jqueryjquery-mobile
Rebecca Walsh
Rebecca Walsh

Reputation: 31

jQuery Mobile; is it possible to have no padding/space between ui-grid blocks?

I'm trying to put three pictures side-by-side so that they scale with the size of the browser being used (particularly mobile). I tried using "ui-block-b" but this solution makes the images extremely small and far apart when viewing the page on a mobile. Ideally, the pictures would have no space between them and would span the entire width of the browser screen.

What it looks like now:

The code:

        <div class="ui-grid-b">
        <div class="ui-block-a">
            <div class="ui-bar"> <a href="xxx.htm">
            <img src="http://lorempixel.com/200/150/abstract/1" />
            </a>

            </div>
        </div>
        <div class="ui-block-b">
            <div class="ui-bar"> <a href="xxx.htm">
            <img src="http://lorempixel.com/200/150/abstract/1" />
            </a>

            </div>
        </div>
        <div class="ui-block-c">
            <div class="ui-bar"> <a href="xxx.htm">
            <img src="http://lorempixel.com/200/150/abstract/1" />
            </a>

        </div>
     </div>

Additionally, any assistance with lightboxing these images with swipe functionality between them would be appreciated!

Upvotes: 0

Views: 1703

Answers (1)

ezanker
ezanker

Reputation: 24738

DEMO

Set a small padding on .ui-bar and the anchor tags so there will be less space between grid cells. Then give the images a max-width of 100% so that on smaller screens they will scale down:

.ui-bar {
    padding: 2px;;
}
.ui-block-a a, .ui-block-b a, .ui-block-c a {
    padding: 6px;;
}
.ui-block-a img, .ui-block-b img, .ui-block-c img {
    max-width: 100%;
}

Upvotes: 2

Related Questions