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
Related
I'm a novice at HTML and CSS and I launched a simple responsive website with only one page, but then I managed to add a couple of pages more to it after a few days. Everything looks good on desktop and when I make it smaller to 350px width via developer tools, it actually looks good as it should and all responsive.
Link: https://transporte.capital/
However, when I enter it from my mobile phone it looks horrible as CSS becomes almost inexistent. The logo becomes a link with underlines, the tweet widget is still there (I disabled it via display: none; in media queries because it takes too long to load), the social media section is distorted, all images are huge, and so on.
Is there something wrong with my mobile phone? I tried to look for cache in Site Settings - Data Stored in Chrome, but there was nothing for my website there.
Now I tried the Opera browser and the website looks good as it should. What should I do to make it update on Chrome? And will it update as it should the next time I make changes to it? Thank you!
screenshot 1
screenshot 2
I could see the page properly in my Android mobile Chrome browser. Please clear cookies once and ensure the zoom in is not enabled. Attached is my screenshot. Screen size: 393x719px
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]?
In dreamweaver cs6 the live view works fine for displaying the divs. But when it comes to the design and split view. They both display the divs wrong and it is nothing like what is shown on the live view or in a browser. Is there a reason for that? How do I fix it?
You fix it by not using dreamweaver, and just test your site in a real browser.
It's bad enough that modern browsers have slightly different interpretations of HTML/CSS/JS. I wouldn't want to further complicate things by viewing/testing a website in something that isn't a web browser.
If you want a more useful answer, it would help us if you posted screenshots of the site in dreamweaver vs in a browser.
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
Im practicing how to create a responsive website using bootstrap. Everything was fine when i tested my site on Firefox and Chrome using the Resizer extension but when i tried to view it on Safari theres a very small but obvious discrepancy with the bottom padding in one of the boxes(the purple one with the greater than sign). Ill attached the pictures to show what i mean.
Firefox view using Resizer Extension
http://i168.photobucket.com/albums/u173/carlocarr/ScreenShot2013-11-01at52435PM_zps8da019a9.png
Safari view using Developer tools
http://i168.photobucket.com/albums/u173/carlocarr/ScreenShot2013-11-01at52455PM_zps587313c1.png
Is there any Safari Mobile specific CSS?? what should i do? help!
i heard stories that w3cSchool isn't the best resource (due to inaccuracies) but i feel this may be of some use to you. it seems that the image is being cropped but take a look at this and see your own CSS3 code to identify the issues, you may also have to consider using relative positioning as opposed to absolute.
http://www.w3schools.com/cssref/css3_browsersupport.asp
also, take into consideration that while some browsers may seem to "now" support the features of CSS3, you need to also check for to version compatibilities. You can set up your site to use specific CSS3 features depending on the versions.