Jump to content
dianepep

product images height stretched on mobile

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. 

 

Share this post


Link to post
Share on other sites

Sorry. I had meant to put that in there. http://www.aprils-choice.com

Thanks again for more help. You have been priceless. With little documentation and no prior knowledge of css, I could not have done this without your help. 

 

Edited by dianepep
correct errors.

Share this post


Link to post
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.

Share this post


Link to post
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.

Edited by dianepep
correct mistakes

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...