Resizing issue with vh units

Report · Jun 15, 2017

I have a parallax div section and when I resize to mobile view a gap develops between the 2 containers.

Here are the 2 divs flush against each other: http://prntscr.com/fk5tqn

Once I scroll down you see a gap: http://prntscr.com/fk5v58

- The gap only appears when window is sized narrower not wider.

CSS: [PHP] @charset "utf-8"; @import url("../webfonts/SourceSansPro_Regular/stylesheet.css - Pastebin.com

Markup: [PHP] <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta - Pastebin.com

Parallax Javascript: [PHP] $(window).scroll(function(e) { parallax(); }) function parallax() { - Pastebin.com

URL: Supreme Fireplaces - Galaxy Clean Face

If you reduce browser width down to tablet you'll see the gap emerge, its more evident if you scroll down a bit between the second image and the Awards section. http://prntscr.com/fk5ysz

I would just like the elements to be flush against the image div if possible, I'm using "vh" as height unit for both the containers, not sure if that makes a difference.

Thanks for your help.

.container-galaxy {

width: 100%;

height: 90vh;

background-image: url(../images/products/galaxy/galaxy_cover.jpg);

background-size: cover;

background-position: center 0px;

background-repeat: no-repeat;

clear: both;

}

.container-galaxy2 {

width: 100%;

height: 80vh;

background-image: url(../images/products/galaxy/galaxy_semi_classic_cover.jpg);

background-position: center 1000px;

background-repeat: no-repeat;

background-size: cover;

border-color: #666;

clear: both;

}

----------

Brandon

Report · Jun 15, 2017

Most people don't resize their viewports. Ordinary users open the page in a device and keep it that way.

If you resize your viewport for testing, be sure to re-fresh the page with F5 or Ctrl+R.

Screenshots don't tell the whole story either. A quicker way to get help here is to put your work online and post the URL.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jun 15, 2017

Thanks Nancy for the reply. When I say resize I mean for different screen resolutions, so for screens which aren't 16:9 aspect we see a larger gap than a wider screen format so I was wondering if it was possible to have the elements flush against each other without the gap.

I'd included the URL above but here it is again:

CSS: [PHP] @charset "utf-8"; @import url("../webfonts/SourceSansPro_Regular/stylesheet.css - Pastebin.com

Markup: [PHP] <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta - Pastebin.com

Parallax Javascript: [PHP] $(window).scroll(function(e) { parallax(); }) function parallax() { - Pastebin.com

URL: Supreme Fireplaces - Galaxy Clean Face

Report · Jun 15, 2017

OK. I guess I missed the URL.

I don't see a gap in Firefox. That said, I do see some critical code errors that need attention. Fix those first.

Showing results for http://www.supremem.com/new_2017/galaxy.php - Nu Html Checker

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jun 15, 2017

Are you reducing your container height in a media query to compensate for the image getting smaller at smaller/narrower screen sizes?

I bet if you color the container background a bright yellow (so you can see what is happening) there will be no gap, its just the image that gets smaller, seemingly creating the gap.

Report · Jun 15, 2017

That's a great idea. I've set the bg color for that container and you can see the RED gap, don't know what I didn't do it sooner, was just "guessing" the size based on how quick the lower container kicked in.

http://prntscr.com/fk6wfm

I'm currently working on the issue so I'd set the background-attachment to "scroll" which fixed the first parallax container *sorry Nancy*. I'm currently just trying different settings for the background-position to try to fix that gap issue for the lower parallax container called .container-galaxy2 but at least you can see what I mean when you reduce to tablet view and scroll downwards.

Is it possible the issue has to do with the parallax.js, seems the fix would be for the image to start lower.

$(window).scroll(function(e) {

parallax();

})

function parallax() {

var scroll = $(window).scrollTop();

var screenHeight = $(window).height();

$('.parallax').each(function() {

var offset = $(this).offset().top;

var distanceFromBottom = offset - scroll - screenHeight

if (offset > screenHeight && offset) {

$(this).css('background-position', 'center ' + (( distanceFromBottom ) * 0.2) +'px');

} else {

$(this).css('background-position', 'center ' + (( -scroll ) * 0.5) + 'px');

}

})

}

Report · Jun 15, 2017

I think you may wish to reconsider using parallax anyway.

Looking at the page linked too, on my iPad, all i can see of the top image is a wood grain effect, as though you are showing two types of wood side by side. The lower image does not even show the fireplace itself, just the hearth and the very bottom of the fire itself, (lower metal part, does not even show any glass).

Report · Jun 15, 2017

Yes that's always an option to not use a parallax but I'll try to figure it out. You were probably looking at it while I was troubleshooting.

Report · Jun 16, 2017

If any of the solutions here helped managed to address your issue, please mark it as correct for the benefit of other users.

Thanks,

Preran

Report · Jun 16, 2017

For now what I did was simply display the parallax on large screens and disabled them for mobile since it doesn't display well on those devices, I just duplicated that section and applied a hidden tag to md, sm, xs. Not sure if that's the solution but it'll work for now, thanks for all the help.

Brandon

Report · Jun 16, 2017

brandonw6890098 wrote
For now what I did was simply display the parallax on large screens and disabled them for mobile since it doesn't display well on those devices.

I was going to suggest that as parallax effect on small devices is so insignificant its not worth the bother......so I think you have chosen wisely.

Report · Jun 16, 2017

Ya I just wanted to know what was causing the border, from what it looked like either the image was too small for container, the javascript or background-position was too high, if there was a way to adjust the bg-pos to be lower than the view port I think it might work but I'd have to learn javascript!