Images streched out of shape when...
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..
Hi Rockman,
It looks fine on my iphone 6S.
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
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
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.
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!
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.
'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
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
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.
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
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
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.
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
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
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
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.