Different iframe url page in mobile – extreme

[scrambler]

I cant test on mobile as there are no developer tools that I know off on these devices.

But from what you are describing, if you are getting the mobile site on your phone, what could cause a slight reduction in width is if the Iframe has a Vertical scrollbar that reduces the usable width.

But if it does, I am not sure you can do anything about it as it may require changes in the URL itself.

You can at least make sure the height of the iframe is higher than the content, and eventually add

style=”overflow:hidden;”

In the iframe shortcode

[nmb]

Hi! Thanks again. I added style=”overflow:hidden;” but nothing i can see changed on mobile. 

I did want to mention that in the landscape view on phone, the page on mobile on my site is displaying the same as their url without the right side being cut off. 

Also yes on my desktop viewing the page i am seeing two scroll bars on the right. Is there an option to hide the weaver iframe page scroll bar as i know i can not remove the external page one. http://www.thenickrocks.com/tickets/ 

[scrambler]

The two scroll bar are the one from the browser and the one from the iframe, none are weaver related.

You can deactivate the browser one on that page with the rule
body.page-id-2847 {overflow:hidden;}

[nmb]

That did hide the extra scroll bar (desktop no change in mobile view) but now the page will not scroll to the bottom of the content anymore. 

*I added height to the iframe shortcode to 5000. 
*Also added show footer in the page options. (footer is showing on mobile but not on desktop)
*I tried unchecking use force full browser height (did nothing so i checked it back)
Neither fixed the issue. 
Is there such a thing as an “infinite scroll” rule i can add somewhere.

http://www.thenickrocks.com/tickets/ 

[scrambler]

I am not following, if I go to your page, there is the iframe scroll bar that allows to scroll the iframe.
Now if you page has anything after the iframe, then of course given you removed the page scrollbar you would indeed not be able to scroll that…

You can have it both ways

[nmb]

i removed the height=2000 from the iframe shortcode and now it is scrolling to the bottom of the content 🙂 !!

Thanks Again for all your time

[nmb]

Hi Scrambler!
Can you see why i have this space under the page in the iframe? at The Bottom under the Ticketfly footer there is black padding or margin. Can i remove that?  http://www.thenickrocks.com/tickets/
I am sorry to bother again,  I am just terrible understanding how to use this firebug. I know I need a lot more studying. 

[scrambler]

I don’t understand what you mean, when I scroll the iframe, the bottom is the grey footer banner and there is no space below that in the iframe.

There is space below the iframe depending on the size of your browser because of the way you are handling the scrollbar(s).

Right now your iframe is set to 600px high, so on any browser that is higher than that the iframe looks like a short box with a lot of dead space below it (and it looks pretty bad)

As long as you disable the site vertical scrollbar, you will end up with a non responsive site.

I made some tests, and if you set the height of the iframe to a large enough number, the scrollbar of the iframe should disappear.

So remove the overflow:hidden that is removing the site scrollbar, and set the iframe height to something like 6000 and post back so we can see

[nmb]

Thanks!

removed overflow: hidden rule and changed show if shortcode to 
[show_if device='desktop'] [weaver_iframe src=’http://thenickrocks.ticketfly.com/calendar’ height=6000 percent=100 ] [/show_if]

I now view two scroll bars again and more space below 

http://www.thenickrocks.com/tickets/

[scrambler]

Do not use the iframe shortcode, switch your content editor to TXT mode and insert it directly like below, with the scrolling attribute set to no

<iframe width=”100%” height=”5500″ scrolling=”no” src=”http://thenickrocks.ticketfly.com/calendar&#8221; style=”border:1px;”></iframe>

[nmb]

still the same and now their list view page cuts off before the end. I changed around the height to see if it would fix but it did not. would cut into their external page but not get rid of the space below. Thank You!
Should i just put back the way it was you think? 
 http://www.thenickrocks.com/tickets/ 

[nmb]

This is what i have in text editor. is this done correctly 

[show_if device='desktop'] <iframe style=”border: 1px;” src=”http://thenickrocks.ticketfly.com/calendar&#8221; width=”100%” height=”5500″ scrolling=”no”></iframe> [/show_if]

[show_if device='mobile'] [weaver_iframe src=’http://thenickrocks.ticketfly.com&#8217; height=2000 percent=100 style=”overflow:hidden;] [/show_if]

[scrambler]

You need to do the same for BOTH iframes …..

[show_if device='desktop'] <iframe style=”border: 1px;” src=”http://thenickrocks.ticketfly.com/calendar” width=”100%” height=”5500″ scrolling=”no“></iframe> [/show_if]

[show_if device='mobile'] <iframe src=’http://thenickrocks.ticketfly.com&#8217; height=”5500″ percent=100 width=”100%” scrolling=”no”></iframe> [/show_if]

[nmb]

hi Scrambler.

I have tried the above code with all manner of height used and can not get the page to display scrolling to the bottom of the content. (specifically the listing page view that is in one of the three pages of their external site cuts off no matter what i put as height. (unless i remove height altogether)

I have just gone back to this with the iframe shortcode [weaver_iframe src=’http://thenickrocks.ticketfly.com’%5D&nbsp;and no height specified and am just not even going to worry about showing different page in mobile view. And have Added back the body.page-id-2847 {overflow:hidden;} in the custom css box. 

Going with this for now as it works – only problem being again the extra space at the bottom of my page and still the slight cut off on mobile on the right side. 

http://www.thenickrocks.com/tickets/

Once again, I appreciate all your effort on this..above and beyond
 

[Weaver]

If you are going to be trying a direct iframe statement anyway, you might have better luck adding a class to each and NOT use the [show_if] shortcode.

For the desktop version, add a class: <iframe class=”wvr-show-desktop” style= …. >

For the mobile, add: <iframe class=”wvr-show-mobile” style= …. >

[Author]

Posts