Images are getting cropped when browser window is resized

Site URL: http://www.macasgardeningservice.com

Hi,  

I have been having scaling issues with the site and my 2 pictures.  Using some script from @tuanphan that has fixed the issue with mobile phone and tablets, but trying to use the same code to correct the problem on a laptop or computer doesn't seem to work. 

The issue is easy to replicate.  Opening the page on a phone or making the browser window the size of a tablet or phone will give you the way the images are meant to display on all devices.  Resizing the window starts to chop off heads. 

I have added the same code to the laptop and desktop functions but no matter what values I use the images don't respond to the changes.  When I put the code where I have bolded, the images respond to value changes, but the changes only apply for the current size of the browser window.  I am looking for a more dynamic way to keep the entire picture within the frame of the browser regardless of size.

http://www.macasgardeningservice.com

Pass: Fisher07

Thanking you,

Bent2Bits

<Script>

h1, h2, h3, p {
  hyphens: none;
}

body#collection-62b6621d5e541e2575ab7882 {
.Parallax-item:first-child img {
    width: 100% !important;
    left: 0 !important;
    height: 60vh !important;
    top: 20vh !important;
}
.Parallax-item:first-child {
    height: 100vh !important;
}
.Parallax-item:first-child figure {
    bottom: 0 !important;
    transform: unset !important;
}
section#home {
    height: 20vh !important;
    min-height: auto !important;
}
}
/* CSS FOR TABLET AND MOBILE */
@mobile: ~"only screen and (max-width: 480px)";
@tablet: ~"only screen and (min-width: 481px) and (max-width: 768px)";
@laptop: ~"only screen and (min-width: 769px) and (max-width: 1024px)";
@desktop: ~"only screen and (min-width: 1025px) and (max-width: 1500px)";

/* CSS FOR MOBILE */
@media @mobile {
/* Insert Code for Mobile Below This Line*/
/* resize main image for phone*/
h2 { 
  font-size: 19px; 
}
body#collection-62b6621d5e541e2575ab7882 {
.Parallax-item:first-child img {
    width: 100% !important;
    left: 0 !important;
    height: 30vh !important;
    top: 40vh !important;
}
.Parallax-item:first-child {
    height: 30vh !important;
}
.Parallax-item:first-child figure {
    bottom: 0 !important;
    transform: unset !important;
}
section#home {
    height: 20vh !important;
    min-height: auto !important;
}
}
/* Insert Code for Mobile Above This Line */
}

/* CSS FOR TABLET */
@media @tablet {
/* Insert Code for Tablet Below This Line*/
h2 { 
  font-size: 25px; 
}
body#collection-62b6621d5e541e2575ab7882 {
.Parallax-item:first-child img {
    width: 100% !important;
    left: 0 !important;
    height: 45vh !important;
    top: 28vh !important;
}
.Parallax-item:first-child {
    height: 45vh !important;
}
.Parallax-item:first-child figure {
    bottom: 0 !important;
    transform: unset !important;
}
section#home {
    height: 35vh !important;
    min-height: auto !important;
}
}

/* Insert Code for Tablet Above This Line */
}

/* CSS FOR Laptop */
@media @laptop {

/* Insert Code for Laptop Above This Line */
}

/* CSS FOR Desktop */
@media @desktop {
/* Insert Code for Desktop Below This Line*/

/* Insert Code for Desktop Above This Line */
}

<Script>

The way I want vs what happens when I make the browser window smaller.

Hi,

Edit this code

.Parallax-item:first-child figure {
    bottom: 0 !important;
    transform: unset !important;
}

to this

.Parallax-item:first-child figure {
    bottom: 0 !important;
    transform: unset !important;
	top: 0 !important;
}

Hi Mate, 

Thanks for getting back to me on this.  The code change was successful in anchoring the first picture to the top, but not the second picture.  Also when resizing the browser window although the top picture remains anchored, the bottom of it becomes "dislodged" so to speak.  Maybe a way to change the underlying background to white so the black line doesn't appear regardless of window size?

Thanks again brother

B2B

Hi Mate, 

  Got the background changed to white with :

.Parallax-item:first-child {
    height: 100vh !important;
    background-color: #FFFFFF !important;

}

Just looking for a way to keep the second picture from cropping.

Thanks,

B2B