Inspiring

Question

Resizing issue with vh units

Forum|Forum|9 years ago
June 15, 2017
2 replies
2050 views

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

This topic has been closed for replies.

O

osgood_

Legend

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.

LGMTLAuthor

Inspiring

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');

}

})

}

pziecina

Legend

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).

Nancy OShea

Community Expert

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

LGMTLAuthor

Inspiring

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