serg / yourfolio

:star: Super simple and responsive theme for your personal website on Hugo
https://themeslake.com/theme/yourfolio/
MIT License
40 stars 23 forks source link

Project pictures not inline (only Mozilla Firefox) #11

Open MUWalter opened 3 years ago

MUWalter commented 3 years ago

Dear @serg,

Sorry it's me again. I found another problem which used to be working before the 16 Nov. 20 changes. If you change the order of the picture arrangements from

..
class: short-col
...
class: wide-col
...
class: wide-col
..
class: short-col
..

to

..
class: wide-col
...
class: short-col
...
class: short-col
..
class: wide-col
..

the arrangement of the project pictures gets broken in Mozilla Firefox. Like this:

broken pictures

In Safari and Chrome it works. In my old version before the 16 Nov 2020 update it used to work to change the order, also in Mozilla Firefox. It's a bit of a shame, because I think Firefox is the best browser for this page.

I would love to find the error myself, but I don't know much about what is happening under the hood.

Please find the modified version to see for yourself here:

website standard.zip

serg commented 3 years ago

Hello Mark, Thank you for provided details and code about this issue! Not sure, but it looks like issue with gaps between tiles, that was fixed at Apr 25.

I will try to look on this when have some time.

Have a great day!

MUWalter commented 3 years ago

Ok cool. I took your recent code and modified it.

Von meinem iPhone gesendet

Am 17.05.2021 um 09:36 schrieb Sergey Furtak @.***>:

 Hello Mark, Thank you for provided details and code about this issue! Not sure, but it looks like issue with gaps between tiles, that fixed at Apr 25.

I will try to look on this when have some time.

Have a great day!

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

serg commented 3 years ago

For now, you could just try to replace float: left; with display: inline-block; in this 277 line

MUWalter commented 3 years ago

Perfect, that did the trick. Thank you very much! One more thing: Please let me know how you would want the MIT licence or your name / email to be implemented on my site.

serg commented 3 years ago

You are welcome, Mark! This is a free theme and you could do anything with it. You could add some attribution if you wish, but it's not required. Just choose a way that most suitable for you.

MUWalter commented 3 years ago

OK, I will send you a message once it is finished and implemented. You do such a great job, I would like to give you credit for it!

One more thing regarding the picture layout: I noticed that in Firefox all the images stay inline when the browser window is resized. In Safari and Chrome on the other hand you need to refresh the site so that the project pictures are aligned in a block. Is there a possibility to change that, or is this just a browser issue?

browser issue

serg commented 3 years ago

Mark, thank you for this! Hope you enjoy your website!

I am also saw this issue in Chrome browser. Hard to say why this happened... Perhaps, it's related with downloading proper responsive images by using picturefill library (this will be replaced in future for using native browser support). On other hand the user won't resize website too often as we do when checking different viewports.

MUWalter commented 3 years ago

Mark, thank you for this! Hope you enjoy your website!

I am also saw this issue in Chrome browser. Hard to say why this happened... Perhaps, it's related with downloading proper responsive images by using picturefill library (this will be replaced in future for using native browser support). On other hand the user won't resize website too often as we do when checking different viewports.

Yes, I think so too. I was just wondering why it works in Firefox.