mobile comment box

<script src="https://apis.google.com/js/plusone.js"></script>
<div id="comments"></div>
<script>
gapi.comments.render('comments', {
    href: window.location,
    width: '624',
    first_party_property: 'BLOGGER',
    view_type: 'FILTERED_POSTMOD'
});
</script>

Open in new window



I am placing this script for comment and is not displaying as full width in mobile for www.moizsaif.com
On PC it shows fine but in mobile device i have to scroll right to view the whole box.please advise.
LVL 4
Moizsaif123Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
You are not using a responsive design. The comment box is in an iframe that sets itself to the max width of its container when the window is resized.

Because your site is not responsive - when viewed on a small device the page extends to the right and so the box resizes to outside the window frame.

What you can do is wrap your comment box in a <div> and give that a fixed width so that the box won't expand beyond that width.

You can moderate this further with media queries to set that width for different devices.

Or you can migrate to a mobile-first framework that supports a responsive design.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Moizsaif123Author Commented:
What is the max width or min width criteria if use media queries
0
Julian HansenCommented:
You might have to experiment - but it seems it defaults to 624px - that is what the iframe is set to initially, once the window size drops below this it resizes to 100%

So I would make your containing <div> 624px and then style that down to smaller amounts for each media cut off you want to support.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.