White bars on page resize around 700px width [RESOLVED]

Tagged: ,

Author Posts

audiumsoundwaves March 28, 2016 at 11:24 am

Heads up! this post was created when Microthemer was at version 4. The current version is 7. Some references to the interface may be out of date.

Hello,
This has been bugging me, when resizing the page width, around 700px, i start getting some white bars on top and as i squeeze it into mobile size, more white bars show before the menu, making a clumsy layout on smaller screens.

The problem is i was looking only on the pc screen and not on the mobile itself. when i test it on my 5.5 mobile screen it shows just fine… any idea why then, microthemer shows those bars even if they don’t show on mobile screen?..

Thanks in advance!

Sebastian March 29, 2016 at 11:07 am

Hey,

I assume when you refer to the white bars that you are referring to the horizontal scrollbars. These happen when elements on the page have been given explicit width dimensions that exceed the available screen space. Microthemer is right to show the scrollbars. The solution is to find fixed width pixel (px) styles e.g. width:600px and replace them with width:auto or width:100% on smaller screens (via MT’s responsive tabs) so that elements never exceed the width of the screen.

As to why the scrollbars don’t appear on your mobile, have you set the Set device viewport zoom level to “1” option to yes via the Edit media queries popup?

Unless you set the viewport zoom to 1, phones can apply their own automatic scaling based on what they think will result in the best view for the end user. This option is handy for sites that are not responsive. But if you’re making your site responsive, you should set viewport scaling to 1 and then fix the scrollbars issue using the method I’ve suggested.

Please let me know if you require further assistance with this.

Cheers!
Sebastian

audiumsoundwaves April 2, 2016 at 7:18 pm

Hello and thank you for your answer.

I think i didn’t make myself clear.
If my mobile is working ok so i won’t make changes. why fix what is alright?
I tested and asked some people to see if they saw the white line that i mentioned i see (only) when i switch to microthemer interface. They didn’t report seeing those and so i rest my mind because there’s nothing unwanted displaying anywhere.

I took a screenshot to better describe the issue i am having to see if it is fixable.

You can see the comparison here.

Please try looking at the site http://www.suzanamendes.com and resize the window until it’s below 700px to see there’s no change, like in the screenshot i sent of the same page, inside microthemer interface.

Thanks again for your time and patience.

Sebastian April 8, 2016 at 8:48 am

Hey,

Sorry for the slow reply. I see what you mean now about the top white bar. It’s not what I thought you were referring to. I’ve fixed this issue and will roll a new version of Microthemer in the coming days, I just need to finish some other updates first…

You must login or register to reply to this topic.