Page layout different on 1st load in chrome - html

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]?

Related

Mobile view for blogger is misformatted

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?

CSS error on Safari, it works on Chrome

I am trying to make a website and was looking at this template (http://www.uipasta.com/wordpress-preview/rolling/).
I really liked the "testimonials" part and was trying that on my code.
However, I realized that "testimonials" part works totally fine on Chrome with any browser size, but not on Safari.
All the elements of testimonials get overlapped on Safari when I first open it up... It's funny because if I shrink or enlarge the browser and keep doing it like that, the elements stop overlapping and work perfect like on Chrome.
I tried to modify some stuff in css files and tried to find a bug.
But, all the attempts failed in vain... Can someone help me out with this?
LOL I can't even upload more than 2 links yet, because i don't have enough reputation... Here is how it looks on Safari, https://i.stack.imgur.com/kza7d.jpg
but yeah that's how it looks on Safari when it should be clean carousel moving objects.

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

Why is this layout broken in Chrome?

This site: http://www.whsc.ie/ uses a jquery lightbox style plugin which seems to be breaking the layout in Google's Chrome Browser. When viewed in Chrome, the header of the site is about 30 pixels taller than it should be.
When inspecting the source elements it appears to be caused by some hidden elements that are used by the colorbox jQuery plugin.
I've tried everything I can think of to figure this out and fix the problem but to no avail.
Many thanks in advance.
My Bad!
It seems it's actually a Wordpress bug that only appears when a user is logged in. I kept seeing it on the browsers on my own machine because they were all logged in, but when I went to a different machine the bug wasn't visble.
Thanks for the replies though, much appreciated.

website written in HTML using iWeb doesn't show up correctly in different browsers

I have a question regarding how to make the same website appear consistently in different browsers on different platforms.
The following is a website that I made for my professor: http://youlab.wustl.edu/Home.html. The site itself was made using iWeb while the drop down menu was manually inserted using an external HTML code provider (SoThink DHTML).
While Firefox displays the site correctly, all the other browsers had some sort of problem displaying the site.
Internet Explorer: none of the links work
Chrome & Safari: the drop down menu is shifted all the way to the left, and were not clickable since it disappeared when the mouse moved towards it.
The movie on 1 page doesn't work either.
Could someone tell me what is wrong and how to fix the problem?
Here's your answer
http://en.wikipedia.org/wiki/Cross-browser