www.zdfans.com - desktop site instead of mobile site

[webcompat-bot]

URL: http://www.zdfans.com/

Browser / Version: Firefox Mobile 60.0
Operating System: Android 8.0.0
Tested Another Browser: Yes

Problem type: Desktop site instead of mobile site
Description: 移动版排版全乱
Steps to Reproduce:

From webcompat.com with ❤️

[softvision-oana-arbuzov]

Thanks for the report, strangely I can reproduce it on one device (Google Pixel (Android 8.1.0) - Resolution 1080 x 1920 pixels (~441 ppi pixel density), but not reproducible on another device (Samsung Galaxy S7 Edge (Android 7.0) - Resolution 1440 x 2560 pixels (~534 ppi pixel density)).

Tested with:
Browser / Version: Firefox Nightly Mobile 60.0a1 (2018-02-15)

Moving to Needsdiagnosis for further investigation.

[karlcow]

Each thumbnail image are placed on the left side with a float.
http://www.zdfans.com/wp-content/plugins/wptouch-pro-3/themes/cms/default/style.css?ver=3.0.8

.post img, .post img {
	max-width: 100%;
	height: auto;
	margin-top: 15px;
	margin-bottom: 15px;
}

img.wp-post-image {
	width: 78px;
	height: 78px;
	float: left;
	margin: 0;
}

on this markup

<div class="post section post-660 post-name-fscapture-v8-5-%e7%ae%80%e4%bd%93%e4%b8%ad%e6%96%87%e7%bb%bf%e8%89%b2%e7%89%b9%e5%88%ab%e7%89%88 post-author-1 not-single not-page has-thumbnail">
    <div class="entry">
        <img src="http://www.zdfans.com/wp-content/uploads/2015/04/FSCapture8.0.png"
    
            alt="thumbnail"
            class="post-thumbnail wp-post-image">
        <a href="http://www.zdfans.com/660.html">
        </a>
        <div class="entry-inner"><a href="http://www.zdfans.com/660.html">
            <span class="post-date">二月 18, 2018</span>
            <h2 class="post-title heading-font">FSCapture v8.8 已授权绿色汉化版及单文件</h2>
                            </a><a class="post-link-button">
                                        <i class="icon-chevron-right"></i>
                                    </a>
        </div>
        <!-- entry-inner -->
        <!-- permalink -->
    </div>
    <!-- entry -->
</div>

It also seems there is a mistake in the intended template up there. I have the feeling the image should be inside the a href, because currently the anchor is of no use.

On responsive design I can't reproduce. But I can force it.
in different ways.

For example removing the border-bottom or border-top will reproduce the issue. Aka not enough space for making float.

.entry-inner {
	margin-left: 78px;
	position: relative;
	height: 70px;
	padding-left: 10px;
	padding-top: 3px;
	padding-bottom: 3px;
	border-bottom: 1px solid rgba(0,0,0,.2);
	border-top: 1px solid rgba(255,255,255,.6);
	box-shadow: inset rgba(0,0,0,.1) 0px 0px 44px;
}

if I set the image 1 pixel higher to height: 79px in

img.wp-post-image {
	width: 78px;
	height: 78px;
	float: left;
	margin: 0;
}

this will fail too.

Note also that there is another issue which is not visible in the current circumstances because the titles are two shorts but they rely on -webkit-line-clamp: 2; for long titles.

#content .entry-inner h2.post-title {
	overflow: hidden;
	-o-text-overflow: ellipsis;
	-ms-text-overflow: ellipsis;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
	-ms-box-orient: vertical;
	box-orient: vertical;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	padding-right: 0%;
	line-height: 115%;
	font-size: 110%;
	margin: 3px 0 0;
	height: 2.3em;
}

Adding it to https://bugzilla.mozilla.org/show_bug.cgi?id=866102

with their structure (and if they fix their template for the a/img)

.content
  .post
     .entry
       a/img
     .entry-inner

They could do:

.entry {
	display: flex;
	flex-direction: row;
}
.entry > a {
	width: 78px;
}

img.wp-post-image {
	width: 78px;
	height: 79px;
	/* float: left; */
	margin: 0;
}

.entry-inner {
	/* margin-left: 78px; */
	position: relative;
	/* height: 70px; */
	padding-left: 10px;
	padding-top: 3px;
	padding-bottom: 3px;
	border-bottom: 1px solid rgba(0,0,0,.2);
	border-top: 1px solid rgba(255,255,255,.6);
	box-shadow: inset rgba(0,0,0,.1) 0px 0px 44px;
}

and the design would be a lot more flexible and resilient.

Moving to needscontact

[adamopenweb]

I wonder if @bli-mozbj can help with contacting this site? 😄

[bli-mozbj]

We tried to contact with them for several times, but still no reply. We'll keep trying.

[karlcow]

The layout changed totally.
Thanks for trying to contact. I will close it as non-compat, because currently they are sending the same broken version to Firefox and Chrome.

[karlcow]

[softvision-oana-arbuzov]

Indeed the layout has change and I can no longer reproduce the issue.

Tested with:
Browser / Version: Firefox Nightly 68.2a1 (2019-10-16), Firefox Preview Nightly 191010(🦎: 71.0a1-20191004094656)
Operating System: Huawei P20 Lite (Android 8.0.0) - 1080 x 2280 pixels, 19:9 ratio (~432 ppi density), Samsung Galaxy S7 Edge (Android 8.0.0) - Resolution 1440 x 2560 pixels (~534 ppi pixel density)