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.
Related
I am just a writer, no knowledge of web programming. If you look at my page here: https://nataliaputilova.blogspot.com/2019/09/blog-post_50.html it looks normal.
But if you look at the screenshot from my phone (attached), it does not. What is the issue, how can I fix it? The same problem shows up on both iPhone and Android.
I know in the past it worked, but then I did some changes per How to reduce left margin on blogger that I think messed up the mobile view. I tried to undo them, but I was poking around a lot and I don't know what I changed exactly
Screenshot from iPhone:
(there's not even scrollbar at the bottom to move left-right, just this fixed partial view)
I tried to google if it's possible to customize the mobile version, but the results said for these modern themes it should work automatically. But the mobile version is not good, what can I do?
I have a perfectly working hosted website...on theory. I did all the responsiveness and I was testing it on a computer with mobile browser emulators. It is working with minor mistakes (which I am aware, and will fix). But here is the biggest challenge. If I run my website in emulator on the computer it does everything nicely. But from phone, it doesnt load the background-image.
So I excluded that problem would be with being responsive, problem must lay somewhere in mobile phones (both times ran by Chrome). Also doesnt work properly on other mobiles too.
Any idea or suggestion towards the mystery?
Thanks,
Koppany
I have made a web page, it works perfectly with just any browser except on iOS browsers, a little annoying, strengthens my determination to never buy iOS stuff.
... I want to see a different Web page in an ... scroll-able in the top-down direction. It's very simple in standard HTML / CSS... but on a new iPhone, it becomes junk in the browser ?
Anyone who wants to tell the great, mysterious, unfathomable mystery how the HTML code should be ?
I have encountered the strangest problem I have ever encountered in my web development career, and I just cannot seem to solve it.
I developed a website: www.ktngroup.co.uk a few months back, all worked perfectly upon launch across all devices. Now it would seem as though the site has developed some form of issue limited only to ipad. The strange thing is, I cannot replicate it when using css user agents and screen sizes, which is strange becuase it looks like a css problem.
I cannot describe the issue very well, but it looks as though all the content (Except the header) is pulled off the site on ipad/not displayed. Also, when using adobe edge inspect; I see that none of my css rules are being applied to the elements.
Comparing the desktop version at 1024px vs the ipad landscape is the best way to discover the issue.
UPDATE: When I cancel the iPad fully loading the site (roughly the first two panels) the site functions perfects on those two panels – almost as if its loading something further down that breaks the site?
If anyone has any guidance, I truly could not thank you enough.
For those who may encounter the issue – it's what Jack Pattishall suggested. The iPad didn't seem to respect vh as a unit, and as a result my images were huge.
To fix this I added a media query to handle the handheld tablets with a set pixel width/height.
Hopefully this can be of use to someone
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