Title: Layout problem on Chrome for Android Last modified: August 31, 2016 --- # Layout problem on Chrome for Android * [iuk](https://wordpress.org/support/users/iuk/) * (@iuk) * [10 years, 5 months ago](https://wordpress.org/support/topic/layout-problem-on-chrome-for-android/) * Hi, * I’m having some issue in rendering Publication on Chrome for Android. Rendering is fine with displays up to 5”, but on 7” or 10” screens I’m seeing the hero image shifted to the left. * You can see an example here: [https://dl.dropboxusercontent.com/u/49378907/20160110_203823.jpg](https://dl.dropboxusercontent.com/u/49378907/20160110_203823.jpg) * You can notice that post title is cut because it is starting outside the visible area. Moreover there is a grey vertical bar on the right as the hero image is not filling the display. * Test site showing the proble is at [http://preproduzione.ilricettariodianna.com/](http://preproduzione.ilricettariodianna.com/) * Thanks for your help. * iuk Viewing 9 replies - 1 through 9 (of 9 total) * Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/) * (@zoonini) * [10 years, 5 months ago](https://wordpress.org/support/topic/layout-problem-on-chrome-for-android/#post-6927839) * Thanks for the report. * Can you please confirm whether the issue is present on the Publication demo here: [https://publicationdemo.wordpress.com/](https://publicationdemo.wordpress.com/) * It would also be helpful if you could let us know: * – what specific device you’re using (i.e. Nexus 7) – what version of Android you’re using (i.e. Android 4.4.4 Kitkat) – visit [http://whatismyandroidversion.com/](http://whatismyandroidversion.com/) if you’re not sure * Thanks. * Thread Starter [iuk](https://wordpress.org/support/users/iuk/) * (@iuk) * [10 years, 5 months ago](https://wordpress.org/support/topic/layout-problem-on-chrome-for-android/#post-6927852) * 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. * Thread Starter [iuk](https://wordpress.org/support/users/iuk/) * (@iuk) * [10 years, 5 months ago](https://wordpress.org/support/topic/layout-problem-on-chrome-for-android/#post-6927853) * 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… * Thread Starter [iuk](https://wordpress.org/support/users/iuk/) * (@iuk) * [10 years, 4 months ago](https://wordpress.org/support/topic/layout-problem-on-chrome-for-android/#post-6927903) * 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](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. * Thread Starter [iuk](https://wordpress.org/support/users/iuk/) * (@iuk) * [10 years, 4 months ago](https://wordpress.org/support/topic/layout-problem-on-chrome-for-android/#post-6927906) * 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](https://dl.dropboxusercontent.com/u/15068406/publication-style-fixed.css). * 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 * Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/) * (@zoonini) * [10 years, 4 months ago](https://wordpress.org/support/topic/layout-problem-on-chrome-for-android/#post-6927918) * Thanks for all the testing and for the workaround you found. * Do you happen to have just the portion of the styles you modified handy, instead of the entire style.css? (If not, our developers can run a diff on the two files but if you have it handy, even better.) * Thread Starter [iuk](https://wordpress.org/support/users/iuk/) * (@iuk) * [10 years, 4 months ago](https://wordpress.org/support/topic/layout-problem-on-chrome-for-android/#post-6927921) * Don’t have a diff, but there are the changes needed to fix the issue. * > [@media](https://wordpress.org/support/users/media/) screen and (min-width: > 768px) { > .hero { margin-left: calc( (-100vw + 768px ) / 2 ); } } > [@media](https://wordpress.org/support/users/media/) screen and (min-width: > 1056px) { > .hero { margin-left: calc( (-100vw + 960px ) / 2 ); } > .no-sidebar .hero { > margin-left: calc( (-100vw + 660px ) / 2 ); } } > [@media](https://wordpress.org/support/users/media/) screen and (min-width: > 1272px) { > .hero { margin-left: calc( (-100vw + 1176px ) / 2 ); } .no-sidebar. > hero { margin-left: calc( (-100vw + 660px ) / 2 ); } } > [@media](https://wordpress.org/support/users/media/) screen and (min-width: > 1416px) { > .hero { margin-left: calc( (-100vw + 1320px ) / 2 ); } .no-sidebar. > hero { margin-left: calc( (-100vw + 660px ) / 2 ); } } * Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/) * (@zoonini) * [10 years, 4 months ago](https://wordpress.org/support/topic/layout-problem-on-chrome-for-android/#post-6927923) * Thanks, iuk, much appreciated. 🙂 I’ll pass this along to our developers. * Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/) * (@zoonini) * [10 years, 4 months ago](https://wordpress.org/support/topic/layout-problem-on-chrome-for-android/#post-6927950) * I just wanted to let you know that this has been fixed and will be included in the next update of Publication. Thanks again for the report. Viewing 9 replies - 1 through 9 (of 9 total) The topic ‘Layout problem on Chrome for Android’ is closed to new replies. * ![](https://i0.wp.com/themes.svn.wordpress.org/publication/1.0.4/screenshot.png) * Publication * [Support Threads](https://wordpress.org/support/theme/publication/) * [Active Topics](https://wordpress.org/support/theme/publication/active/) * [Unresolved Topics](https://wordpress.org/support/theme/publication/unresolved/) * [Reviews](https://wordpress.org/support/theme/publication/reviews/) * 9 replies * 2 participants * Last reply from: [Kathryn Presner](https://wordpress.org/support/users/zoonini/) * Last activity: [10 years, 4 months ago](https://wordpress.org/support/topic/layout-problem-on-chrome-for-android/#post-6927950) * Status: not resolved