Menu icon Foundation
Full screen image on mobile with clearing.js

I'm really enjoying how easy it is to work with Foundation and the upgrade from v.4 to v.5 went pretty smooth. Now my client made me aware of images in the galleries are cropped in the bottom approximately the same amount of pixels the a.clearing-close line takes.

I guess the close element (a.clearing-close) somehow interfere with the display of the image since it takes up the whole line instead of being an overlay. According to the styles applied .clearing-close has a z-index of 999 while .visible-img has a z-index of 998, but it doesn't seem to be applied.

Am I missing something here? Shouldn't the image fill out the whole screen? Why is the images cropped in the bottom? If this is by design, then is there a way to have the image stretch proportionally to fill the screen and have the close button as an overlay?

In the screen shot provided you can see an image which at least should fill the screen from top to bottom, but it is pushed to the bottom with empty space on the sides and at the top. The image is also cropped in the bottom (which you can see if you compare with the original image supplied). My tests are mainly done on a Samsung Galaxy S4 with KitKat (in stock browser, Dolphin browser and Chrome), but the same issue is seen in Safari on iOS6 and iOS7.

Dolphin

Original

******************************
This is the result from adding the css in the comments below. As you can see the image actually couldn't fill the whole screen.

Fixed clearing

clearing.jsoverlay

I'm really enjoying how easy it is to work with Foundation and the upgrade from v.4 to v.5 went pretty smooth. Now my client made me aware of images in the galleries are cropped in the bottom approximately the same amount of pixels the a.clearing-close line takes.

I guess the close element (a.clearing-close) somehow interfere with the display of the image since it takes up the whole line instead of being an overlay. According to the styles applied .clearing-close has a z-index of 999 while .visible-img has a z-index of 998, but it doesn't seem to be applied.

Am I missing something here? Shouldn't the image fill out the whole screen? Why is the images cropped in the bottom? If this is by design, then is there a way to have the image stretch proportionally to fill the screen and have the close button as an overlay?

In the screen shot provided you can see an image which at least should fill the screen from top to bottom, but it is pushed to the bottom with empty space on the sides and at the top. The image is also cropped in the bottom (which you can see if you compare with the original image supplied). My tests are mainly done on a Samsung Galaxy S4 with KitKat (in stock browser, Dolphin browser and Chrome), but the same issue is seen in Safari on iOS6 and iOS7.

Dolphin

Original

******************************
This is the result from adding the css in the comments below. As you can see the image actually couldn't fill the whole screen.

Fixed clearing

Tobias Åhlin gave the most helpful answer for this post
Tobias Åhlin over 5 years ago

This is the css I ended up with which gives me a full screen image (where possible, dimension wise), and with caption and close-button as overlays.
CSS
@media only screen and (max-width: 640px) {
.clearing-blackout .clearing-caption {
background-color: rgba(51, 51, 51, 0.5);
}
.clearing-blackout .clearing-close {
display:inline !important;
position: absolute;
background-color: rgba(51, 51, 51, 0.5);
padding:0 3px 2px 3px;
left:8px;
top:4px;
border-radius: 3px;
}
}

This post has been closed. No new replies can be added.

Tobias Åhlin over 5 years ago

Hmm.. Don't know what happened to my line breaks, but I hope you get the issue anyways.

Tobias Åhlin over 5 years ago

This is the css I ended up with which gives me a full screen image (where possible, dimension wise), and with caption and close-button as overlays.
CSS
@media only screen and (max-width: 640px) {
.clearing-blackout .clearing-caption {
background-color: rgba(51, 51, 51, 0.5);
}
.clearing-blackout .clearing-close {
display:inline !important;
position: absolute;
background-color: rgba(51, 51, 51, 0.5);
padding:0 3px 2px 3px;
left:8px;
top:4px;
border-radius: 3px;
}
}