Images streched out of shape when viewed on mobile phone.


Registered User
39 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..


Senior Advisor
17,334 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.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
https://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
http://progrower.coffeecup.com/shop/
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 personnel site used for testing and as an easy way to share photos.(RLM imported to RSD)
http://ericrohloff.com


Registered User
76 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!


Registered User
110 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.


Senior Advisor
10,737 posts

'Breakpoint' translated to HTML Editor lingo: You need another media query. ;)
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: http://www.horgenhonning.net/
Component sharing for RSD, RFF and RBB: http://www.horgenhonning.net/sharing/



Senior Advisor
10,737 posts

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 new honey site, built with RFF: http://www.horgenhonning.net/
Component sharing for RSD, RFF and RBB: http://www.horgenhonning.net/sharing/



Registered User
4 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


Senior Advisor
10,737 posts

That is assuming the images are in containers, which they are not, in this case.
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: http://www.horgenhonning.net/
Component sharing for RSD, RFF and RBB: http://www.horgenhonning.net/sharing/



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.