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.