Picture shrinking within its frame! -...
I have one picture that is shrinking inside the border I gave it, as I scroll the screen size to the left (becoming smaller). I mean, everything is shrinking, but this leaving a huge gap between the photo and the border. The picture next to it is not doing that. It's weird.
You can see it here, if you use your mobile phone:
http://tanyasolomon.coffeecup.com/index.html
You can see it here, if you use your mobile phone:
http://tanyasolomon.coffeecup.com/index.html
Check the min / max height settings
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
how have you put them in the design row/column/subgrid/container/image? (in other words what is the configuration)
have you used flexbox to control their positioning?
have you used flexbox to control their positioning?
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
It is behaving correctly. I believe this is what is happening;
You have two different proportional photos, the photos used are left-right as 540x1007, and 479x847. (less than 3% different in proportions at original size) In the desktop, container on the right is given a max width greater than the left (285 vs 300px). That artificially creates the photos with the same height, but the one on the right is still wider.
Then, as the viewport shrinks, the width allotted to each photo gets smaller than the max width given to them (and available in the viewport). When the viewport is reduced so that the photo on the left is at 190 for example, it is smaller that the max width allotted to the left (still 285) and the same as the right (still 300). So - the photos are no being manipulated by an artificial width to produce the same height, and are being displayed smaller and at their natural proportions, making the the one on the left appear taller - because it is proportionately taller. The containers are given a height of auto - which I believe gets them to expand to the height of the column - making it seem that the right photo is shrinking relative to the container.
I would edit the pictures so that they have the same proportions. Even use an image editor like ifranview (free!) to resize/resample the images if the original size is not being served in your large desktop scenario (and set the max widths to be the same - or use the same class container)
I can trace the violin bitmap. It looks really jagged. I can get around to it in a couple of weeks, if you are interested, email me at bmanlanc@comcast.net. I should be able to produce a svg that can be used, or a clean full size image in png or a gif (this image is not optimal as a jpg). There are some angles of curves than can look jagged no matter what, but it seems just too many even in the large circle, it should be as clean as the text. I did a quick trace in Corel Draw, but - it will need some time to rework the curves because even at full size there were enough edges in the full size jpg to mess up Corel Draw enough to introduce bumps in curves. If using a large images, I'd want mirrored bezier curves. And then, that svg trace, can be used to create pngs or gifs at any size (and reduce errors and image artifacts from mathematically reducing an image from a larger size ) on letterhead or smaller versions of the image if served elsewhere.
You have two different proportional photos, the photos used are left-right as 540x1007, and 479x847. (less than 3% different in proportions at original size) In the desktop, container on the right is given a max width greater than the left (285 vs 300px). That artificially creates the photos with the same height, but the one on the right is still wider.
Then, as the viewport shrinks, the width allotted to each photo gets smaller than the max width given to them (and available in the viewport). When the viewport is reduced so that the photo on the left is at 190 for example, it is smaller that the max width allotted to the left (still 285) and the same as the right (still 300). So - the photos are no being manipulated by an artificial width to produce the same height, and are being displayed smaller and at their natural proportions, making the the one on the left appear taller - because it is proportionately taller. The containers are given a height of auto - which I believe gets them to expand to the height of the column - making it seem that the right photo is shrinking relative to the container.
I would edit the pictures so that they have the same proportions. Even use an image editor like ifranview (free!) to resize/resample the images if the original size is not being served in your large desktop scenario (and set the max widths to be the same - or use the same class container)
I can trace the violin bitmap. It looks really jagged. I can get around to it in a couple of weeks, if you are interested, email me at bmanlanc@comcast.net. I should be able to produce a svg that can be used, or a clean full size image in png or a gif (this image is not optimal as a jpg). There are some angles of curves than can look jagged no matter what, but it seems just too many even in the large circle, it should be as clean as the text. I did a quick trace in Corel Draw, but - it will need some time to rework the curves because even at full size there were enough edges in the full size jpg to mess up Corel Draw enough to introduce bumps in curves. If using a large images, I'd want mirrored bezier curves. And then, that svg trace, can be used to create pngs or gifs at any size (and reduce errors and image artifacts from mathematically reducing an image from a larger size ) on letterhead or smaller versions of the image if served elsewhere.
Thanks....I adjusted the photos so they were pretty much the same height and width. That seemed to fix it (though I haven't re-uploaded it yet). Also found a better logo for the top, not so pixelated!
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.