[snippet248]

“It might be worth tinkering with different optimisation options then.”
Turns out I used all the free optimizations with Tinypng so now the images uploaded recently haven’t been modified by it.

Anyways I uploaded/replicated the changes so it’s live here: https://www.otzerling.com/index#actividades-todo

[snippet248]

I generated them with wordpress and with “regenerated thumbnails” plugin, I have set the “medium size” to 650x of height, and added to functions the size “medium1xretina”. They are optimized with Tinypng/jpg plugin but not resized with it.

[snippet248]

“How are your images looking “bad”? The only one I’ve seen so far is the butterfly one and it seems fine.”
That’s what doesn’t make sense to me either.
1. This is how to it looks with retina size 650px
https://drive.google.com/open?id=1fu0UcFWsfkJ_FenjelmX7kL1kkMgtW8b
2. Now the non-retina image size
https://drive.google.com/open?id=13SjBmkRjFUtuq7KHvYaKRMqRJ736lrwN

[snippet248]

In case it helps someone else https://css-tricks.com/responsive-images-css/#article-header-id-2

[snippet248]

It’s not about me but about other users, so in your logic I should put a message that tells all desktop computers with large screens to buy a retina monitor if the images look bad? Instead I have been reading the topic and is much more complex https://medium.com/hceverything/applying-srcset-choosing-the-right-sizes-for-responsive-images-at-different-breakpoints-a0433450a4a3

[snippet248]

Okey it seems it’s an issue on the detection of retina implementation and not in the code. Check out this https://codepen.io/bseymour/pen/EjaNyj Is pretty much the same, and I’m still getting the 1x version, which means that my computer is not recognized as retina 2x, if flip 1x and 2x versions I get the 2x. So the question is why this happens and what can I do to fix it, I don’t want some computers like mine with crappy experience over this.

[snippet248]

Yes except that there is a hover zoom effect thats why i added a bit more. Maybe I can use a less visited part of the website to test it..

[snippet248]

In the local WordPress installation they are set with object-fit, added that css to the codepen as well.
“which is is the 2x image actually retina”

It is the second one; which is called with the “medium” wordpress image size 650×650: http://localhost/tomastestart/wp-content/uploads/2019/06/WhatsApp-Image-2019-06-25-at-11.49.21-PM-4-459×650.jpeg

And the 1x retina is this one with 230x325px: http://localhost/otzerling/wp-content/uploads/2019/06/WhatsApp-Image-2019-06-25-at-11.49.21-PM-4-230×325.jpeg

Update: there was a missing line in the codepen in the rendered part, it got lost when I trying to post the code here in the forum…

[snippet248]

“Frankly, it’s hit and miss.”
:/ will it ever be fixed?
“It’s much easier to provide a demo in a Codepen.io link that we can actually interact with.”
So if I can’t replicate the interaction in codepend I shoud still use it I suppose.. Okey I will.

[snippet248]

Thank you so much!!! Definitively helps!! Wish my Javascript was good enough to fully understand it , which is at bests very basic. Still I’m playing with it :-) If I may I have some questions:

1: ['top'],
2: ['top', 'bottom'],
3: ['top', 'bottom', 'bottom'],
4: ['top', 'left', 'bottom', 'right'],
5: ['top', 'top-left', 'bottom', 'bottom', 'top-right'],
6: ['top', 'top-left', 'bottom-left', 'bottom', 'bottom-right', 'top-right'],
default: []
};
I could replicate this with css.. but that’s not the idea I guess and use instead radians… What does the duplicated bottoms do? for example for item 3 or 5? Ok this is a exam that has to be finished in some days so for the time being I will go with the css replicated way but then on I will work on it.. ;-)

[snippet248]

I know how to do that but can’t it be done differently, what happens if for example I add another bubble or I remove one. I need it to automatically adjust, and right now everything does adjust itself (try deleting a li) exception for that numbered text

[snippet248]

This is odd I was pretty sure I posted the codepen snippet.. Anyway here it is: https://codepen.io/Snippet/pen/agqqRx

[snippet248]

Reinstalled wordpress and now it works correctly.

[snippet248]

Using Mozilla Firefox Responsive Mode specifically with iphone 8 size allows you to debug the issue, you can download a portable version from portableapps.com I can tell the issue is with article class=”bodyMain”

[snippet248]

What about using a negative “spread radius” on the shadow?
Example: box-shadow: 0px 0px 10px -30px rgba(0,0,0,0.5);

[Author]

Posts