http://kilgorerodriguez.com/index.html
&
http://kilgorerodriguez.com/CarlosRodriguez.html
On the second page the background spans the entire page but on the first page it cuts off. I'm guessing it's something with CSS, but I can't figure it out.
If you have the Xcode developer tools installed on your Mac, you can attach the Safari Web Inspector to the iPad Simulator, like this:
Open the iOS simulator:open Xcode, then go to menu Xcode > Open Developer Tool > iOS Simulator
Change the hardware mode in the simulator to iPad
Open the Settings app on the simulator, go to Safari > Advanced and set Web Inspector to On
Follow the instructions under the Web Inspector switch: open the desired web page in Safari in the iPad Simulator, and also open the desktop version of Safari on the Mac. Go to the Develop > iPad Simulator menu in Safari and choose the appropriate page
Now you'll have a Web Inspector window that is attached to the web page in the iPad Simulator, with full power to debug the web page.
I used this to find the bad HTML markup I mentioned in the comment. When I used the Web Inspector to fix that markup (find the HTML element in the Resource tab or use the hand icon to select the element in the simulator window, then right click the element and choose Edit as HTML), and then also changed the style attribute for that div I mentioned to have min-width: 1002px;, the page looked OK in the iPad Simulator for me. The change to 1002px is based on one of the parent elements, <div id="wrapper">, having width: 1002px defined in the CSS. The wider min-width of 1124px probably caused the page width problem.
Related
I'm having a problem with Wordpress. I've styled my website in the customize console in Wordpress on my Desktop, but when I open it with my iPhone (can't confirm if this is happening with other mobile browsers) there is this gray border on the outside of the block. Here's a screenshot:
https://imgur.com/a/A3nEgTy
I can't find any information about this or find anything about other people having this issue. Is there some way to access the source code or Inspect tool in mobile Safari? Just trying to make the block fill the screen.
I'm building a web app using the create-react-app toolkit. I'm trying to make my website as mobile friendly as possible. I'm initially designing for an iPhone 5 because that is one of the smallest phones around and because it's the phone I have. When I render my website using Chrome or Safari developer tools, the page renders very much different than when I open the page directly on my iPhone. Both Chrome and Safari developer tools have iPhone5 viewpoint defined as 320x568 however that doesn't account for the bar at the top and bottom of the page. In Safari the ACTUAL viewpoint size for my iPhone5 is 320x460 when the page first loads, and after you start scrolling down it expands to 320x529. I figured this out using:
window.addEventListener('resize', function(event){
console.log('width: ' + window.innerWidth);
console.log('height: ' + window.innerHeight);
});
HOWEVER, even when I change the size of the viewport in my developer tools to those values (both Chrome and Safari), it still looks different than the actual iPhone.
I've been unable to find similar problems/solutions to this problem on stack or anywhere else and I want to know if there's a way to make sure the page is viewed correctly on all devices?
Thank you in advance
iPhone 5 Web Design Specs
I'm currently working on one of my first two projects and you can tell that I'm still at the beginning of my youtube-tutorials-&-SO-powered learning journey:
our neighbor's skin & beauty spa
Please don't be too harsh on my code :D I've hand-written everything from scratch in a little editor.
In short, everything seems to work A-OK on desktop computers (I tested FF and Chrome), but on the iPad and other tablets I'm experiencing nasty bugs - I'm having major trouble with two issues:
the Google Maps iframe is always visible (overlaps other
sections) on tablets even if the corresponding section isn't clicked
on in the menu, and I have no idea why! It seems that the
visibility:hidden on a position-fixed element isn't interpreted
correctly?
:focus works on the image gallery 'sneak peak', but
in the services section, the 4 sub-content areas are inaccessible.
(Unrelated?) When the page loads on my iPad (mini) the #logo_box
div appears at page load, but turns semi-transparent the very
instant as the map iframe appears.
EFFORT1: I removed the Google maps iframe-containing 'content' container altogether, and suddenly the :hover on the other content sections stopped working as well. This might be an indicator that something is 'linked' in a way that's not right...
EFFORT2: I assumed that the < label> is the culprit, but I can't pinpoint it. I tried this suggested solution, but it's for IOS4 (2011), and as Rob Fletcher commented last Feb., it doesn't work on IOS7.
EFFORT3: I feel that the .content div's {visibility:hidden/visible;} is causing trouble in the android mobile browser: input:checked hides instead of reveals the particular section while all others show.
Btw, how do I friggin' trouble-shoot tablets? I don't have any dev tool on ipad & android browsers.
Help is much appreciated!!
On iPad, you can go into the Settings App, then go Safari -> Advanced -> Web Inspector.
Then plug it into your Mac via USB and open Desktop Safari on the Mac. If you haven't already enabled the Develop menu, go Safari -> Preferences -> Advanced -> Show Develop Menu.
Then when you open a web page in Safari on the iPad, you can connect to it via the Develop menu on your Mac's Safari and use the web inspector.
If you're using Chrome on Android you can use remote debugging https://developer.chrome.com/devtools/docs/remote-debugging
Weinre provides similar functionality across more platforms (including Android native browser), but is a bit more involved to set up.
I'm coding a fully responsive cross-browser site. I've already coded portrait mode and what I did to inspect changes and modify the my CSS file was to scale my Chrome Browser up to a point where I saw the same thing on my browser and on my iOS simulator. In that way I could work out every change and edit my CSS file. I now need to do the same on landscape mode, but I can't find a way to use an inspector that would simulate landscape mode.
I have Chrome, Firefox, Safari and IE and I'm open to any tool that would enable me to inspect the webpage simulating landscape mode not only regular tablets and phones but also Retina-supported devices.
Here is a really cool plugin.
http://lab.maltewassermann.com/viewport-resizer/
You can use it on any browser. Drag the "Click or Bookmark" button to your bookmark bar, then click it on any page you want to change the view size for.
Here is the image of the button you want to drag to your bookmark bar:
Here is an image of the toolbar that it adds.
My favorite tool to use for this is http://www.browserstack.com/. This isn't free but well worth it.
A third option is Adobe Edge Inspect. You can display the page right on the device but inspect the elements through you laptop or desktop computer. This option is free but you need to create an Adobe ID.
I've just begun working with MVC 4 for the first time and have a simple site that has a separate desktop and mobile version of several views. I have always used Page Inspector or my desktop browsers to examine and work with the html source that I get back from the webserver. I'm using Electric Plum to test my site on Safari in the iPhone/iPad emulator (I don't see that you can get a view of the html source from the emulator). So I need a new browser, a new emulator, or way to trick the webserver with one of my current browsers so that I can easily work with the html I'm getting back for my mobile views. Any suggestions?
Here's a link on how to use Google Chrome to emulate different devices.
Link
If you have a Mac:
open your site on the iPhone/iPad on Safari app
connect your iPhone/iPad via USB
enable the developer mode in Settings > Safari > Advanced
open Safari on your laptop
in the top bar, go into Development > Phone's name > page's name
The Safari Web Inspector is opened and lets you inspect all your dom elements and even alter them from your desktop.
In Firefox you can select Tools > Web Developer > Responsive Design View (CTRL + SHIFT + M).