Having an issue with iPad display - html

I am having a problem with our site not displaying the CSS while on iPads.
Here is what I have done so far:
Works fine on mobile. In addition when I use browser console to view as iPad it works fine and when I use a site to view the page as an ipad it also works fine
However on a physical iPad none of the styling kicks in and I cannot figure out why. Any help would be very much appreciated.
We are using a html include for the CSS scripts - could this be an issue?
The site is:
www.roburir.com/index.html (we are working on getting rid of the index.html displaying).

You are using HTML imports to load content including header content, which has very little browser support. Just use a PHP include to import stuff, or normal CSS links that have worked fine for decades. :)

Related

Need help debugging Bootstrap/CSS that renders fine everywhere but iPad

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.

Page layout different on 1st load in chrome

I'm trying to get a job as a developer. I've made a personal website to show employers but I've got a bug. Everything is fine in all browsers except Chrome.
On the first load of the page, the navbar layout is messed up. After you hit refresh or navigate to other pages the proper layout is maintained.
I have no idea what is causing this. Can anyone help?
Link to website: www.alexanderisgr8.com
Possibly a caching issue due to an older css. Try doing a hard-refresh [ctrl+f5]?

Single HTML file showing in Firefox smaller than the other HTML files

I have a web site that I'm building using HTML and CSS. I have 3 pages built exactly the same minus the actual content on the page. The issue I'm having is that on Firefox, one of the pages shrinks. Everything from the Header down to the Footer and including icons shrink. When launched on Safari, it works fine. Any suggestions as to what to look into for the issue or why it would happen on Firefox? I've exchanged the CSS for the other pages and it hasn't changed. I know it's bad practice to have 3 HTML files that will look the same but to give them each their own CSS and I'll fix that now. Thanks for your help!

How do I replicate this website in terms of responsiveness using only css?

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

External css link not working in IE website page

I seem to be having an interesting problem linking my css stylesheet. Everything is working perfectly fine on my website css wise for every page on chrome, firefox, and anything else. But for some reason, 1 page in IE is displaying weird. Im using the same stylesheet for almost every page on the website but yet its not working on 1 page on IE.
Check it out for your self on IE. Heres the home page that works fine http://www.sentinelgaming.net
Then on the forums page it messes up. http://www.sentinelgaming.net/forums
Again, im using the same stylesheet on the home page as the forums. But one page displays differently.
Thanks for any help.
It looks like the forums page is failing to load this css file:
http://files.enjin.com/202624/general%20files/navbar%20css.css
It might be due to the fact that on line 740 there are second DOCTYPE, html, head, and body tags. You should delete all that and move the css file link to the proper head tag at the top of the page.
This should hopefully fix your issue.