CODEWITHSUNDEEP
htmlcssipad-2
Oxymoron
Oxymoron

Reputation: 1

Divs not resizing correctly for iPad

I am trying to make my website responsive for tablets, but my gallery menu page does not resize to the breakpoints I have set when viewed on an iPad Air 2. The thumbnails do not shrink to fit the screen as they should, instead being cut off at the sides.

Here is my HTML for the containers of the gallery:

<div class="content_wrapper">

    <div class="gallery">

        <div class="gallery.mCustomScrollbar_mCS_1">

            <div id="mCSB_1" class="mCustomScrollBox.mCS-rounded.mCSB_vertical.mCSB_inside" tabindex="0">

                <div id="mCSB_1_container" class="mCSB_container" dir="ltr" style="position:relative; top:0; left:0;">

                    <div class="gallery_thumb></div>

The mCS style divs are added by a jquery script which changes the scrollbar to a custom design, which is a 3rd party development.

Here is the CSS for the divs in question.

.content_wrapper{
    height: 50%;
    width:75%;
    min-height: 20.4em;
}

.gallery{
height: 100%;
width: 100%;
overflow: auto;
}

.mCustomScrollBox{ /* contains plugin's markup */
position: relative;
overflow: hidden; 
height: 100%;
max-width: 100%;
outline: none;
direction: ltr;
}

The classes I'v left out are confirmed as having no effect on the resizing issue. The responsive settings I have only increase the size of the .gallery_thumb.

Any help would be greatly appreciated, the url for the site is:

http://www.phaedravlahos.com/index.php/artwork

Upvotes: 0

Views: 194

Answers (0)

Related Questions