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.
Related
I am developing a static web app via React.js. I am using the google dev tool to inspect elements. In responsive design mode, everything is fine. However, when I select a specific mobile phone the footer element is not shown when I scroll to the bottom. However, it is visible on the console when ı inspect elements I can see the HTML info. I thought that maybe somehow I fixed the height for mobile devices or smt. Then I tried the firefox dev tool and I am able to see the footer. I have no idea which one is more realistic since I didn't deploy it yet. I deleted the history of browser before I tried.
More specifically; on the chrome dev tool when I select responsive design mode and change the resolution to 375x812 (same as iPhone X), I am able to see my footer. If I select iPhone x rather than responsive design mode, then I don't see it. It is more annoying that, both cases are okay for the firefox tool and I see my footer. So what is the problem ? Why two dev tools act so so differently for the same app and more importantly which one is true ?
Okay, I figured it out. There is a zoom option next to the width and height. It was 100% for my case, which should be "fit to window". I am leaving this dumb question here, it helps if any other beginner faces the same issue.
I'm not an expert in web and I composed and updated my website recently. I ran all the test that I could on DreamWeaver CC and tested on multiple mobile devices (tablet, android and iphone); all seems to work fine. Until I uploaded the site to my server, the site start to act weird.
1st problem:
It is a portfolio website with individual pages to corresponding projects. On each project page, the first image on the lightbox has always gone missing; but clicking into the lightbox I can find the missing image (the preview image and the lightbox image share the same source so if the lightbox can find the image it implies that the image is on the server and the path is correct).
2nd problem:
when the browser is shrink below certain size, a toggle menu will replace the content on the header, clicking the toggle menu will show a pop up menu to site links. For some reason, after uploading the site to server, the toggle menu pop up never work.
3rd problem:
The above problem is never apparent on desktop browser(all image shows up correctly; toggle menu works). To make the problem more complicated, I can't confirm if it is device or browser oriented problem. For example, the site works on chrome browser on my iphone and nexus 5(android), but problem occurs on my xperia tablet(android) chrome browser; on my xperia tablet, the site works perfectly on firefox.
Does anybody has any idea what the potential cause to the problem, and perhaps a direction to a solution?
Here's the link to my site: http://www.itsatommy.com
Thank you for your time and look forward to any reply.
Looks fine to me (Google Chrome), you need to use media queries for some certain resolutions. You also need to use some cross browser css tags lide "-webkit, -moz, -o" etc.
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 have a problem with a responsive website and how it is displaying on the iphone. But I am not able to replicate the visual glitch by using Chrome or Safari and shrinking the window width or changing the user agent in the Chrome console to the iPhone I can only replicate the visual glitch when testing using an actual iPhone.
This makes diagnosing the problem hard as I cannot access the web developer console to inspect the element to see what is going on.
Are there any other options?
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.