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


Tags: html,css,responsive-design

Problem :

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.


Solution :

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


    CSS Howto..

    How do I get this CSS to work in safari

    Better use one element inside h1 and use :before and :after with left and right properties. This will work in most of the browsers including Safari. h1 { overflow: hidden;...
    Read more

    How to center the center circle?

    You need to give your middle container, appropriate padding,It will help bringing the content to the center. You can achieve the same by giving a left i.e. making your .middle...
    Read more

    CSS3 Challenge - How to get this gradient background pattern without using all the divs?

    The css would be .back { position: absolute; width: 99%; height: 99%; background: linear-gradient(180deg, #6e529d 0%, #d97b93 100%); overflow: hidden; } .back:after { content: ""; position: absolute; width: 200%; height:...
    Read more

    How can I slow down my CSS Animated Text transitions?

    I guess that's the result that youre looking for: .slidingVertical span with opacity:0 plus max-width:10px and each word with a positive delay from 0 to 9): body { background: pink;...
    Read more

    CSS: How to achieve - Two elements to be centered and positioned side by side WITHOUT a third parent container?

    Demo here: http://jsfiddle.net/Shehi/6RqWb/ Following CSS rules solve the problem: #div_1 { width: 200px; height: 200px; background-color: red; position: relative; left: 50%; margin-left: -200px; /* = -1 * the width of...
    Read more

    How to make my twitter bootstrap overlap all other elements?

    #twitterbootstrap { position:relative; z-index:1000000; } try this... it will work... you need to provide z-index so that overlap will not occure....
    Read more

    Using vi, how can I remove all lines that contain [searchterm]?

    Is that such a wise idea? You could end up doing something you don't want if your CSS has sections like this body {background-color: #000; font-size: large; } p {...
    Read more

    How to get minimal jQuery slideshow to slide properly?

    I have changed your code quite a bit: JSFidle First of all, you should do prevItem.css("right", prevItem.width()); instead of prevItem.css("left", -prevItem.width());. And CSS should be changed like this: .slideshow img:first-child...
    Read more

    How to create a card flip effect on DIV using javascript

    3d Transforms in CSS3 currently only work on webkit browsers. Sorry - there is no way to do this in other browsers without using a JS polyfill such as cssSandpaper...
    Read more

    How do I align something in a in the top-left corner - without aligning everything?

    Wrap the number in a <span>, float it to the left, and give it a negative top margin to push it up into the corner: http://jsfiddle.net/ambiguous/chp8y/ You'll have to fiddle...
    Read more

    How to apply css on one html file only

    Just prefix the CSS rules Player.tpl.html : <div class="player"> whatever </div> CSS .player .someclass { } .player .some-other-class { } ...
    Read more

    How to make a css media query snippet in ATOM editor

    See the bottom of the page you linked: http://flight-manual.atom.io/using-atom/sections/snippets/ You can also use multi-line syntax using """ for larger templates So your template should be '.source.css': 'css-media': 'prefix': 'css-media' 'body':...
    Read more

    Is there a limit to how deep an HTML document or CSS tree can be?

    Neither the XHTML 1.0 nor the HTML 4.01 specification defines a nesting limitation. HTML5 is not yet standardized, but the working spec does not reference a limitation. The CSS 2...
    Read more

    How to make my div align in CSS?

    It works for me. Your problem is apparently elsewhere. Can you show us a complete page?...
    Read more

    how to deselect a css style using javascript?

    You are using the wrong CSS selector: ".selectpicker select" means "the select elements child of elements having the selectpicker class" you want the select element having the selectpicker class. execute...
    Read more

    How should you comment css? [closed]

    I think there are generally two cases where comments should be used: If you are using hacks. To illustrate the page structure. This may be beyond the question, but you...
    Read more

    How to achieve a silk-screen effect (a dotted shadowy effect) on an image with javascript/jquery?

    I'll suggest you to search for canvas element in html5, supported in all modern browsers. As canvas is subject to cross domain policy for media (even image), i cannot set...
    Read more

    How can I set the body color of a web page to the current width and height of the monitor?

    in your css: html { background-color:blue; } body { width:1050; height:800; } ...
    Read more

    How do I remove the extra height in my
  • ?

    • You need to add layout to your .nav li selector. .nav li { display: inline-block; } or you can float it: .nav li { float: left; } ...
    Read more

    Displaying the first in simple Show / Hide content menu with active a

    I'd make a few slight changes to make life easier on yourself. For your buttons... change so that the correct ID in the href as an anchor. E.g.: <li><a id="togglediv1"...
    Read more

    How can I remove the border around an image without a source?

    You can't it is a default from the browser, best to just add in the src or not have the image tag, or set its width/height to 0 unless there...
    Read more

    CSS - How to set many div width with a non-round percentage to fill a parent div space

    Try this fiddle Learn about Flex display http://css-tricks.com/snippets/css/a-guide-to-flexbox/ Is the best way to stop doing calculations it always fit in the grid HTML <div> <p class="p1">1</p> <p class="p1">2</p> <p class="p1">3</p>...
    Read more

    How to put the div at the center with css?

    Following css will make center both div. display:flex and position:absolute will do the trick. align-items: center; will center child div vertically and justify-content: center; will horizontally inside parent. div.father {...
    Read more

    How do I get Internet Explorer to do a better job displaying images

    The simple answer to this is that you can't. IE is just an inferior browser in almost every regard, and it shows more and more, from image rendering to debugging,...
    Read more

    How to debug the different behavior of the same browser on the different platforms?

    The text-overflow:ellipsis feature is notoriously difficult to detect support for. For most modern browser features, it is possible to run Javascript code which will detect whether the browser supports that...
    Read more

    How to get element by its partial class name CSS

    In the same way you can do this .class.class2.class3 { /*styles*/ } to target only things that have all 3 classes, you can can combine attribute selectors to do the...
    Read more

    how to link css files in organization github pages

    your style will work at /styles.css if you put it in the root, _layout folder is used by jekyll/ruby. create a css folder in the root of your repo and...
    Read more

    How do I create a radial css3 border gradient shadow

    Previous answers doesn't really answer your question: "How do I create a radial css3 border gradient shadow" You can use a radial gradient to simulate a border shadow without images....
    Read more

    How to generate a elongated hexagon shape with two circular sides?

    How about something like this i used svg Fiddle <svg width="1000" height="500"> <polygon points="100 10, 50 245, 100 500, 200 500, 200 10,100 10" fill="orange" /> <polygon points="400 10, 460...
    Read more

    How do I get this ul li dropdown menu to show on hover with jquery or javascript?

    The easiest way would be to apply the hover to the li, that way when the user hovers over the sub-menu they don't trigger the mouseout event from leaving the...
    Read more