iuk

Don’t have a diff, but there are the changes needed to fix the issue.

@media screen and (min-width: 768px) {
.hero {
margin-left: calc( (-100vw + 768px ) / 2 );
}
}

@media screen and (min-width: 1056px) {
.hero {
margin-left: calc( (-100vw + 960px ) / 2 );
}

.no-sidebar .hero {
margin-left: calc( (-100vw + 660px ) / 2 );
}
}

@media screen and (min-width: 1272px) {
.hero {
margin-left: calc( (-100vw + 1176px ) / 2 );
}
.no-sidebar .hero {
margin-left: calc( (-100vw + 660px ) / 2 );
}
}

@media screen and (min-width: 1416px) {
.hero {
margin-left: calc( (-100vw + 1320px ) / 2 );
}
.no-sidebar .hero {
margin-left: calc( (-100vw + 660px ) / 2 );
}
}

Hi,

looks like I found a solution. I was able to debug Chrome on Android from my laptop, so I found out that the margin-left: calc( ( -100vw + 660px ) / ); declaration was seen as an Invalid property.

Eventually I found out that the problem lies in the ( and - separated by a space. If these are not separated, Chrome is accepting the property and the issue is fixed.

So I basically replaced all the ( - occurencies with (- and now it works like a charm. I have uploaded a fixed style.css at this link.

I would really appreciate if you could incorporate this fix and update the theme, so that I don’t need to override these declaration in my child theme.

Thanks

Update: as this look like a margin-left issue to me, I tried to play bit with the @media screen and (min-width: 1272px) { .no-sidebar .hero { }} declaration (and testing with a 1280px width screen).

The theme default is

.no-sidebar .hero {
margin-left: -378px;
margin-left: calc( ( -100vw + 660px ) / );
}

I think the second declaration is supposed to override the first is the browser supports calc and vw. However, if comment out the first delcaration, like:

.no-sidebar .hero {
/* margin-left: -378px; */
margin-left: calc( ( -100vw + 660px ) / 2 );
}

This results in a better (even if not perfect) rendering on Chrome for Android. A small white vertical bar is displayed on the left, so I suppose we would need a bit more negative margin, but at least it’s not cut off the screen.

https://dl.dropboxusercontent.com/u/15068406/2016-01-15%2019.40.26.jpg

I’m afraid that this little fix would break the theme somewhere else, so I’m not saying this is solving the issue, but looks to me as Chrome for Android is not overriding that margin-left declaration as I suppose you were expecting to do.

Hope this helps in investingating the issue.

So I tried Firefox and Opera on the Lenovo Tablet.

– Firefox: issue is NOT present
– Opera: issue is present in both portrait and landscape

So looks to me as there is some issue with Chrome and Opera for Android starting from a certain screen width (no issue on my smartphones, while issues starts on Nexus 7 in lanscape). Chrome and Opera share the same rendering engine if I’m not wrong…

Hi Kathryin.

I just check and the issue is present also in the Publication demo. I tried with the following

– Nexus 7 (2012 version), Android 4.4.4, Chrome: issue is present only in landscape orientation.
– Samsung Tab 2 10.1, Android 4.2.2, Chrome: issue is present in both portrait and landscape orientation.
– Samsung Tab 2 10.1, Android 4.2.2, Samsung stock browser: issue is NOT present
– Lenovo Tab2 A10-70, Android 5.0.1, Chrome: issue is present in both portrait and landscape orientation.

I will also try installing a different browser on the Lenovo tablet and let you know later.

Hi, sorry about the delay.

Currently this is not implemented yet. The plugin is only looking for HTML IMG tag in the post body. However, it shouldn’t be too hard to implement.

Did you find anything else or are you still in need of this feature?