I would be very grateful for some help with a Safari image resizing issue as I have spent three days on this one problem.
I am building a responsive store with Woo Commerce using the Canvas template.
The problem is with the Safari browser...it won't enlarge the images to fit their container div and be evenly spaced and sized.
Here is a category page for your reference: http://omshivaloka.x-gr.net/product-category/shop/men-2/men-malas/
Here is a single product page, with the issue at the bottom beneath: "Products you may like": http://omshivaloka.x-gr.net/shop/hanuman/
I researched extensively all over the internet to find a solution and keep hearing to change the height and width in my CSS to:
ul.products li.product a img {
height: 100%!important;
width: 100%!important;
}
It's making them stretch, and is therefore not a solution.
In my Woo Commerce configuration, I have set the size of that picture to be 210*300px - Safari is not recognizing that...or maybe it is and is not outputting it immediately?
Perhaps you are having the same experience as I am in seeing the image expand when you mouse over it. Strange indeed...
I appreciate any help...thank you!
Cassandra
Related
In our company he have been developing new email design recently and we have bumped into interesting bug occuring only in default macOS Mail.app client. The problem is that around 990px width of viewport all images are offset approximately 40px to the left from their parent <td> element. But the exact width of the viewport when the image is offset is based on the images' width. The HTML snippet is uploaded here. The output HTML is generated by MJML library in NestJS backend of our system. Screenshots with outline turned on on all elements from are on imgur gallery here.
Have you ever experienced this? If so, do you have any tips how to hack this thing to work properly?
I'm currently developing a responsive website and have a certain image within a set amount of 'columns' (div size) for the site. This image is bigger than the size of div itself so flows over the edges (using html and not CSS Background-Image). When I use the CSS background-image method the image gets cut off to fit the div and overflow:visible doesn't fix it (from what I've read you can't have a background-image overflow it's own div).
So I want this image to overflow it's div but also have the image be cropped to the edge of the browser window, otherwise I have a big empty white bar down the side of the website when you resize the browser window for smaller screen devices, like so:
http://i.imgur.com/74NEmDF.jpg
Are there any known methods of solving this or does Javascript need to be used to fix it (I know little JavaScript so I couldn't figure it out myself). Thanks in advance.
edit: Still no luck, been searching everywhere. Would love any help, thanks guys.
edit 2: Figured it out! Was a very simple fix of adding overflow:hidden to my hero unit (big containing div). I feel so stupid it took me so long to figure out such a simple fix.
Just wondered if anyone using the Flexslider has found that when switching back and forth from different size browser windows the slide images do not automatically adjust to new height and widths.
Let me clarify - they do shrink correctly but when scaling back up the first image in the slideshow gets stuck at the previous aspect ratio until the next slide comes in, at which point the whole thing adjusts.
To stop my content from being affected I have created a fixed height container for the flexslider and have used media queries to change its height as it is scaled down. This works perfectly scaling down.
It seems to be on the way back up that it has trouble sorting the image heights out.
I would provide links but it is a new client project in confidence.
All coding is exactly as is from the demo files, with exception to the fixed height and media queries on the container div.
I had the SAME problem - I found that not all my widths were of the same value.
e.g.
.clone { display: block; float: left; width: 994px!important; }
<img src="http://www.website.com/images/panel1.jpg" alt="" width="980px">
There were about 4 instances in my css that had different widths [shame shame] so I went in there and raked the css file.
I hope this helps
Good Luck
I've spotted some weird behavior across browsers border-radius implementation. Take this code: http://jsfiddle.net/pm7FZ/1/ On Windows every browser excerpt Chrome rounds inner image: http://imgur.com/54In8 Chrome doesn't and the image stays square.
I don't have OS X, but my friend send me this: https://img.skitch.com/20120925-eypjk593tdest3ud9hcji1sauf.png Seems it behaves differently. Although another friend says that if you set border-radius to 20px on OS X it will round the image corners on OS X's version of Firefox.
Question - what is happening here? Why so much inconsistency.
It's obviously easy to "fix", just curiosity.
I can only speculate but here's what I suspect is going on. If you check out the W3C spec for the basic box model (http://www.w3.org/TR/2007/WD-css3-box-20070809/) you'll see a graphic that demonstrates how elements are laid out. Each element has a content area, padding, border, and margin areas. I believe browsers render each of these areas as a layer and where FF would render the 'border layer' on top of the content layer Chrome would render the 'content layer' on top of all the other layers. In your sample if you would remove the height and width attributes from your img tag you'll see the image does get rounded but is not affected by the border itself. I haven't found any specification on the way browsers should handle this but I'm pretty sure the Chrome devs chose this method to squeeze out some more performance.
This is a bit weird. When I apply -webkit-transform: translate3d(0px, 0px, 0px); to images on a site I am building, they look fine initially. But when I start scrolling or resize the browser window to above a certain size (roughly past 1200x1024) the images get all glitched up, containing parts of other images, or of the site. All stretched, cut up. Sometimes even change color and whatnot. This also applies to the #font-face text that is floating above the images. I assume this is very isolated case in combination with Win7x64/ATI Firepro v5800/Chrome version. But its a bit annoying to build a site this way :)
Anyone came across a similar issue and knows how to solve it, or should i just notify google of this?