Joomla Templates Club 406,261 posts

[unimarconi Friend unimarconiJoin date: September 2015Posts: 24Downloads:136Uploads:0 Thanked: 1 times in 1 posts]

#697248

Hello, I was trying to reproduce a gallery intro images like the one in the corporate demo and i noticed that by resizing the windows at some resolution (1250px, 1070px etc ) there is an increasing extra white space added at the bottom. The same behaviour can be seen on the demo site but is mitigated by the fact that the next section also has a white background. Also the slogan is not always centered and sometimes moves to the bottom. I would also like to know if is possible to build a smaller wall, one which do not take the whole height, I tried using less pictures but it also left extra white space.
Thank you.

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#697335

Hi @unimarconi,

Could you please provide your site url so I can have a look at the problem ?

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#750967

Hi @unimarconi,

Could you please provide your site url so I can have a look at the problem ?

[unimarconi Friend unimarconiJoin date: September 2015Posts: 24Downloads:136Uploads:0 Thanked: 1 times in 1 posts]

#750994

Hello Adam, the site is not online yet but the problem is easily reproducible with the corporate demo. I changed the second block background to darker so the gap is more evident. Look at the pictures, the gap increase as you shrink the page, then disappear at some point:

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#751002

Hi @unimarconi,

If you choose to resizing your browser to test responsive layout, please hist refresh button after resized your browser. For some uncommon resolution, the JS to handle this part might not work perfectly but refresh your page would re-execute the code.

In fact, your device screen cannot be resized, therefore I guess it should work fine if you check in real tablet / mobile device instead.

[unimarconi Friend unimarconiJoin date: September 2015Posts: 24Downloads:136Uploads:0 Thanked: 1 times in 1 posts]

#751013

Hello Adam, I thought about this and I tried to refresh the page but it shows the same problem, maybe it works only at certain breakpoints?

EDIT:

I think I found the problem, into uber/acm/gallery/less/style.css there is this rule:


.full-screen {
overflow: hidden;
position: relative;

// Control screen tablet/mobile
@media screen and (max-width: @screen-sm-max) {
height: auto !important;
}
}


so the height is set to auto only when resolution is below 991 at higher resolution the rule is set on the element

<div class=”section-inner full-screen no-padding” style=”height: 1294px;”>

and higher than the isotope container like this

<div class=”isotope” style=”margin: 0px; position: relative; height: 836px;”>

so the extra gap. What if I change the rule to @screen-md-max or remove the constraint altogether?

Thank you

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#751113

Hi @unimarconi,

Please check attachment screenshot to see how it look at my end in resolution 1250px. Please try to use Ctrl + Shift + M (if you’re using Firefox) to check in Mobile Simulator and let me know the resolution you got the problem.

In addition, try to temporary upload your site somewhere so I can check because the block below slideshow has top / bottom margin there, so if you apply background to inner element, the white space might be from the margin instead.

[Author]

Posts