Images streched out of shape when...

User 69840 Photo


Registered User
49 posts

:o
OK, I created a temp site for a guy using html editor (I bought 3 yrs ago) using a responsive template from the responsive design pack from 2013.
When viewed on desktop, laptop or tablet , it is fine.
BUT, when viewed on a mobile phone the images are stretched.
the link is: http://beaucheminracing.canadianmusclecar.com/ and the page in question is the SALES page.
Please note, the design isn't final. And this is my first, maybe second real attempt at using responsive templates. Used to coding everything myself.
So what have I done wrong?? Curious for ideas.
OR should I just jump in and buy the new html editor?
Would like the RSD, but kinda pricey in Canadian dollars..
User 187934 Photo


Senior Advisor
20,181 posts
Online Now

Hi Rockman,
It looks fine on my iphone 6S.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 185561 Photo


Registered User
102 posts

Rockman,

Did you adjust the picture containers for the lower breakpoints? It seems that your pictures "stretch" at lower breakpoints (my iPad and iPhone both show this behavior).

If you provide us with your project file maybe we can assist you.
Once you accomplish the impossible, then you can move on to the hard stuff!
User 333213 Photo


Registered User
115 posts

Just need to add another breakpoint when the image stretches
10% of fishermen catch 90% of the fish.... then they release them for another day.
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

'Breakpoint' translated to HTML Editor lingo: You need another media query. ;)
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Well, after examining your code, you have the image setting 'width: 100%;' at the 'breakpoint' or media query @media screen and (max-width: 768px), while they are locked into a fixed height written with html tags. That is why they stretch out of proportions. If I were you, I would remove the styling in the html tags and put it into the css sheet. You may e.g. set the image width to 50% and max-width: 400px; for wide screens, and at each media query you can increase the %-age a bit. But I wouldn't let it go full 100% wide, that is quite massive on a 700+ screen size. 70 or 80% maybe... And make sure you give the images a max-width, so that they don't get too large.

You have the same problem on other pages too, where you have set fixed height in the html.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2885808 Photo


Registered User
16 posts

Inger wrote:
Well, after examining your code, you have the image setting 'width: 100%;' at the 'breakpoint' or media query @media screen and (max-width: 768px), while they are locked into a fixed height written with html tags. That is why they stretch out of proportions. If I were you, I would remove the styling in the html tags and put it into the css sheet. You may e.g. set the image width to 50% and max-width: 400px; for wide screens, and at each media query you can increase the %-age a bit. But I wouldn't let it go full 100% wide, that is quite massive on a 700+ screen size. 70 or 80% maybe... And make sure you give the images a max-width, so that they don't get too large.

You have the same problem on other pages too, where you have set fixed height in the html.

Make the images proportional to the container and not set px sizes. They will scale down to the viewport and will fix that one.
Cheers.
Peter Heath - #cleanupcrewcleaners
Commercial cleaning contractors
https://cleanupcrewcleaners.com.au/clea … e-cleaning for pressure cleaning Bundaberg
https://cleanupcrewcleaners.com.au/clea … -bundaberg for house cleaning Bundaberg
https://cleanupcrewcleaners.com.au/clea … g-cleaning for commercial building cleaning Bundaberg
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

That is assuming the images are in containers, which they are not, in this case.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com



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.