Viewport issue

[codeispoetry]

I am facing a viewport issue. despite the fact that the head has viewport meta.

what can be the possible causes? I searched on google and few blogs had a concept that some overflow might be blocking, but I could not fix that in the whole day.

If someone can help me than it will be highly appreciated.

N.B. It’s WordPress.

Problem: After a certain resolution, everything starts to shrink.

[PaulOB]

It has nothing to do with the viewport meta tag. If you open the page on the desktop and slowly close the window you will see that a horizontal scrollbar appears at around 790px width.

It is this overflowing content that squashes the page on smaller devices as they need to fit all 790px into their smaller screens which they can only do by shrinking the content accordingly.

You must avoid horizontal scrollbars on the viewport at all times where mobile is concerned.

The problem element is your popover element which is lying at the side of the page making it too wide for mobile. Just temporarily make it display:none for now and you will see that it is indeed the element causing the problem.

You need to move it away from the edge of the right side of the viewport at smaller widths and make sure it doesn’t stick out.

[codeispoetry]

@PaulOB

You must avoid horizontal scrollbars on the viewport at all times where mobile is concerned.

Noted.

@PaulOB

You need to move it away from the edge of the right side of the viewport at smaller widths and make sure it doesn’t stick out.

Noted.

[codeispoetry]

HTML Version

WordPress version

The above are the two versions.

In the WordPress version where a theme has its own style. This →

Is distorted in terms of styling. Even in the last two days, I can’t fix that. Is there a way we can fix it?

Undistorted CSS:

Sir, If you can spare a couple of minutes to get it to look good too in WordPress the way I was able to get it look clean in Pure HTML/JS version.

[PaulOB]

@codeispoetry

Sir, If you can spare a couple of minutes to get it to look good too i

I’m offline tonight but I’ll take a look tomorrow. I did have a quick look at your other thread the other day and it looked like you had the wrong font showing so the size was all wrong. There were some other similar specificity issues but can’t remember off the top of my head.

Back tomorrow.

[codeispoetry]

@PaulOB

I’m offline tonight but I’ll take a look tomorrow. I did have a quick look at your other thread the other day and it looked like you had the wrong font showing so the size was all wrong.

Yes, You are right.

@PaulOB

Back tomorrow.

Thanks.

[PaulOB]

@codeispoetry

Sir, If you can spare a couple of minutes to get it to look good too in WordPress the way I was able to get it look clean in Pure HTML/JS version.

The difference between those two is that the wordpress version uses the border-box model whereas the first example uses the default content-box model. That means your padding is being added inside the width/height rather than adding to it for the inputs.

If you add the following code after all your other css files you should get it closer to what you want.

.input-append .uneditable-input, 
.input-append input, 
.input-prepend .uneditable-input,
.input-prepend input{ 
box-sizing:content-box;
padding:4px 6px;    
}

span.add-on, span.add-on *{
box-sizing:content-box;    
}
.input-append .add-on, .input-append .btn{margin-left:-7px;}