I'm using iframe-resizer to refit the content of one page inside another. I got it working well for desktop browser viewing, but cannot make my iframe resize on mobile in my realistic demo. I tested on a second server too with a different page design for another real-world demo. Both didn't resize. I'm testing in iOS Safari and Chrome. I set up a simple test case and it worked how it's supposed to, unlike my two demo pages. Obviously, something in the source of the demo parent pages is preventing the intended functionality. Can someone please help me find what is preventing these demo pages from resizing properly in mobile? I figure if two random sites to test this on cause a problem, it is likely that my clients installing this widget will also frequently encounter this problem and I need to be able to offer a remedy.
Test case (good): http://healthfitchiro.com/wp-content/iframe.html
Realistic demo (bad): http://healthfitchiro.com/alternate-login
Related
My site renders fine on every browser I’ve tested on both desktop and iPhone. However, on iPad, it cuts off the content at the top, no matter which browser is being used. (Each browser shows a slightly different amount of the content.) Super simple, single page site built with Bootstrap 3.
Would appreciate any pointers about where I went wrong with the code. CSS is not my strong suit; I’m relearning it, so apologies for what I’m sure is a basic question.
I will try my best to explain. I am using my Chrome browser to emulate iPhone 5 and look at different websites. The website displays in a frame which corresponds to the iPhone 5 frame as shown below:
This all works but I want to see the scrollable content too without scrolling. In other words I am interested in taking a single screenshot of the complete page without scrolling. Is there anyway I can do that?
This isn't iPhone specific, but Google's PageSpeed API offers the ability to view a screenshot of a particular live website in "mobile" and "desktop" mode. It's not an exact indication for a particular device, but it's handy to get a general feel for how a website shapes up on mobile and also handy if you are looking at many websites.
I needed this for something I'm working on and wrote a plunk using Angular here: http://plnkr.co/edit/c7fAFx?p=preview. In the end it's just making the following GET call, and using slightly modified results to display an image.
https://www.googleapis.com/pagespeedonline/v1/runPagespeed?url=<your-website-url>&key=<your-api-key>&screenshot=true&strategy=<mobile OR desktop>
You'll need to register a Google API account and grant it access to the PageSpeed API. Not sure if it's what you are after, but might help.
Im practicing how to create a responsive website using bootstrap. Everything was fine when i tested my site on Firefox and Chrome using the Resizer extension but when i tried to view it on Safari theres a very small but obvious discrepancy with the bottom padding in one of the boxes(the purple one with the greater than sign). Ill attached the pictures to show what i mean.
Firefox view using Resizer Extension
http://i168.photobucket.com/albums/u173/carlocarr/ScreenShot2013-11-01at52435PM_zps8da019a9.png
Safari view using Developer tools
http://i168.photobucket.com/albums/u173/carlocarr/ScreenShot2013-11-01at52455PM_zps587313c1.png
Is there any Safari Mobile specific CSS?? what should i do? help!
i heard stories that w3cSchool isn't the best resource (due to inaccuracies) but i feel this may be of some use to you. it seems that the image is being cropped but take a look at this and see your own CSS3 code to identify the issues, you may also have to consider using relative positioning as opposed to absolute.
http://www.w3schools.com/cssref/css3_browsersupport.asp
also, take into consideration that while some browsers may seem to "now" support the features of CSS3, you need to also check for to version compatibilities. You can set up your site to use specific CSS3 features depending on the versions.
Here is the website I want to replicate: http://www.voncarcha.com/contact
Here is my website: http://foxweb.marist.edu/users/kf79g/contact.php
I mainly want to replicate his about page and contact page across all screen sizes that are large medium and small. How can I do this with only css like I did with all of my other pages besides the about page and contact page?
All of my code is located in the page source under these files (after right clicking view source on your browser):
screen_styles.css
screen_layout_large.css
screen_layout_small.css
screen_layout_medium.css
contact.php
about.php
I tried absolutely everything I could think of. I tried to replicate his website, but mine simply does not work as smoothly. Mine especially looks terrible on older browsers IE 7-9 and Firefox, while his does not for some reason. I want my site to be optimized to work across all browsers. I do not know what to do anymore. After this is done, my website will finally be finished. Please help me out I need to get this project done as soon as possible. I would really appreciate any assistance.
Media Queries (currently what you're doing with responsive design) are the part of HTML5 and CSS3. So If you try these features in browsers that do not support HTML5, they will not work.
This link says, It can handle media queries in older browsers. You should take a look at it.
You can also take a look at This one
Came across an interesting problem that's really stumped me when attempting to implement the Twitter Bootstrap framework today. The issue I was initially attempting to solve was the appearance of horizontal scrollbars in Chrome when I resized the browser close to the breakpoints in the responsive template.
To troubleshoot this, I decided to copy the starter template verbatim, which was displaying correctly for me on the Twitter Bootstrap site. For extra consistency, I altered the relative paths of the included Bootstrap resources to point directly at the same files hosted on Github.
Mind-bogglingly, the problem still occurred even using the exact same code. You can view a working example of the broken version here. Just resize the window horizontally in the latest version of Chrome and you'll notice scrollbars will appear on the bottom when the width nears a breakpoint. On a hunch, I copied the same file over to a different server and...it works?!
I honestly don't have a clue what could be causing HTML/CSS/JS to be behaving differently in the same browser across two different servers. The closest I could find were discussions from developers transferring files from local to remote environments and/or using IE. Any insight would be much appreciated!
I'm guessing Chrome was zoomed in.