Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Images are getting cropped when browser window is resized


Recommended Posts

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.

image.thumb.png.3d83d0ad41917998a51a5d3d7e083b0b.pngimage.thumb.png.6e7c03fa43c8f5694f2b96307958024e.png

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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

image.thumb.png.ce098ef6af268f3b471d9b9e91a35536.pngsec.thumb.PNG.f7f6a03148326b844c7267ffdc5c9e92.PNGsec2.thumb.PNG.1ee426248066dfab3101db9520552ad2.PNG

Link to comment

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

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...