Jump to content

product images height stretched on mobile


dianepep

Recommended Posts

Hopefully this is my last issue with the site. I added images to my description of my product by adding them in my html of the page. I do not like the way the images show on the website when I check them to show as thumbnails that must be clicked on so I placed them before my text description of my product. The problem I am having is that the images are not showing correct scale on mobile. The width looks fine but the height is stretched.  I have this code in my main.php 

<meta name="viewport" content="width=device-width, initial-scale=1" />

but I'm assuming that works for images that were added and checked to show through the admin panel images option, not for images added in html on the page description. I do have size tags added to the html to have the images show correctly. 

Anyone have any ideas how I can correct this? Thanks ahead of time. I'm hoping to get his site up and running by black friday but I'm cutting it close because I still have quite a bit to do. 

 
Link to comment
Share on other sites

Let's do a couple of things:

1. Remove the hard-coded height and width specs from the images in the product description.

2. Add to cubecart.default.css, the following:

#product_info img { max-width: 100%; }

Clear the cache.

Even though there is a CSS spec on the element, which takes priority, and would expect the image to be wider than the viewport (requiring a horizontal scroll), sometimes that just doesn't happen. Thus, the width will be reduced to fit the viewport. In my experiments, that was 75% (max) of the width of the image's container. This 75% is a standard Foundation styling.

The height is a different matter. The height will be as high as the CSS spec.

Thus stretched images.

By removing hard-coded dimensions, the browser is free to keep the width/height ratio - reducing width and height equally. Then, we are overruling Foundation's max-sizing of images located specifically in the product description.

Link to comment
Share on other sites

6 hours ago, bsmither said:

Let's do a couple of things:

1. Remove the hard-coded height and width specs from the images in the product description.

2. Add to cubecart.default.css, the following:


#product_info img { max-width: 100%; }

Clear the cache.

Even though there is a CSS spec on the element, which takes priority, and would expect the image to be wider than the viewport (requiring a horizontal scroll), sometimes that just doesn't happen. Thus, the width will be reduced to fit the viewport. In my experiments, that was 75% (max) of the width of the image's container. This 75% is a standard Foundation styling.

The height is a different matter. The height will be as high as the CSS spec.

Thus stretched images.

By removing hard-coded dimensions, the browser is free to keep the width/height ratio - reducing width and height equally. Then, we are overruling Foundation's max-sizing of images located specifically in the product description.

That worked perfectly! You are the best! Thank you so much. I researched viewport but could not find much about it. I'm really happy with how my store turned out and it took so little time, thanks to you of course. I am really enjoying learning the package also. It's fun putting this together. Now I'm happy with the layout, I just have to tweak some other things like email templates and then test it. 

p.s. If you would like a free roller/massager I would love to send you one as a thank you for all the help you have given me. If you don't want it for yourself you could always use it as a gift. Just go on the site and take a look at them and let me know which one you would like and email me. Now I'm realizing I should check to see if there is a contact me button on the site. I hope I remember to look for that. If not, my email is [email protected](If you're not allowed to accept gifts then just email me and we will keep it quiet.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...