www.aestheticsofjoy.com - layout is messed up

[Macxim]

URL: http://www.aestheticsofjoy.com/
Browser / Version: Firefox 51.0
Operating System: Mac OS X 10.12
Problem type: Layout is messed up

Steps to Reproduce

1. Navigate to: http://www.aestheticsofjoy.com/
2. Go to the footer

Expected Behavior:

Text should be readable.

Actual Behavior:

Several items are overlapping.

From webcompat.com with ❤️

[karlcow]

@Macxim Thanks for the report.
The site is responsive and has indeed difference of behaviors in between Gecko (Firefox) and Blink (Opera, Chrome)

And both have issues of their own. The bottom/top of the lists are cut in Blink. And the list is just spreading in one colum on Gecko.

[karlcow]

The easy fix in Gecko (Firefox)

<li id="menu-item-4836" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-4836 dropdown">
<a title="Explore" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Explore <span class="caret"></span></a>

<ul role="menu" class=" dropdown-menu">
   <li id="menu-item-4838" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-4838"><a title="Art" href="http://www.aestheticsofjoy.com/category/joyful-art/">Art</a></li>

<!-- … cut for brevity - series of li elements … -->

</ul>
</li>

So let's check the CSS. They use CSS column to spread this on 3 columns.

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {

/*… cut … */

#footer-menu li {
	display: inline-block;
	/* float: left; */
	clear: none;
	padding: 0px 20px 10px 0;
}

/*… cut … */
}

#footer-menu li {
	display: block;
	/* clear: both; */
	/* float: left; */
	clear: left;
	padding: 0px 40px 20px 0;
}

By commenting out the two float:left we get the right layout.

And it solves also the issue in blink.

Switching to needscontact.

Pinging @dholbert for the Gecko behavior difference in between Blink and Gecko on the combination of column layout and float.

[karlcow]

They have a strange email address in their footer with an IP address :)
hello@77.104.161.84

The owner of the site is on twitter too.
https://twitter.com/ingridfetell
She is also here
http://www.ingridfetell.com/about.html

switching to contactready

[karlcow]

It also says in the footer

Design by Gander and Development by Yonderday

hello@takeagander.com

And yonderday is http://yonderday.com/contact/

[dholbert]

I don't have cycles to debug at the moment (multicol layout and floats are each super-complicated and not paged into my brain currently), but I reduced a testcase and filed https://bugzilla.mozilla.org/show_bug.cgi?id=1341542 since this definitely seems like a Gecko bug.

[karlcow]

Contacted on http://twitter.com/MozWebCompat/status/864734515389808640

[karlcow]

to note that the last update on the site was december 2016.

[karlcow]

@MozWebCompat @yonderday Thanks for letting us know!!
http://twitter.com/ingridfetell/status/864801887912153089

[reinhart1010]

It seems that the issue is resolved. Tested on Nightly 60 with minimal browser window width.