Make site responsive through CSS - html

Question

Hello guys im having problem with my website i just updated it from wordpress 3.4.1 and i wanted to make it responsive using CSS because i've tried a lot of Responsive plugins but it didnt work. Here's the CSS code:
/*
Theme Name: Me 'n Mommy
Author: Webspec Design
Author URI: http://www.webspecdesign.com/
*/
body { font-family: 'Droid Sans', sans-serif; font-size: 13px; background-color: #e1d8af; }
h1, h2 { font-family: "corner-store",sans-serif; font-weight: 400; }
h1 { font-size: 25px; color: #6d284a; }
h1.post-title { font-family: "futura-pt",sans-serif; color: #302a22; font-size: 18px; }
h1.no-thumb { margin-top: 20px; }
h1.post-title, h1.category-title { display: block; background-color: #8bd378; text-align: right; text-transform: lowercase; padding: 15px; line-height: 1.2em; }
h1.category-title { color: #dc0083; font-size: 65px; margin-top: 20px; margin-bottom: 0px; }
h1.product-name { font-family: "futura-pt",sans-serif; text-transform: lowercase; color: #6d284a; font-size: 44px; }
h2 { font-size: 25px; color: #302a22; text-transform: lowercase; }
h3 { font-size: 18px; font-weight: normal; font-family: "futura-pt",sans-serif; line-height: 1.618em; }
h1, h2, h4 { line-height: .8em; }
a { color: #ff0098; text-decoration: none; }
a:hover { text-decoration: underline; }
address { font-style: normal; line-height: 1em; }
.location-address { float: left; }
hr { border: 0px; background-color: transparent; height: 1px; background: url('images/hr-background.png') repeat-x; }
#sidebar hr { width: 320px; margin-left: 0px; }
.thumb-right img { float: right; }
td.constrain { max-width: 200px; }
.error { color: red; font-weight: bold; }
.interior strong { color: #dc0083; }
.handwriting { font-family: "corner-store",sans-serif; font-weight: 400; }
.geometric { font-family: "futura-pt",sans-serif; }
.container { width: 935px; margin: 0 auto; }
.footer-container { width: 500px; margin: 0 auto; }
.read-more-primary, input[type="submit"] { background-color: #dc0083; color: black; text-transform: uppercase; padding: 6px 5px; border: 0px; }
.read-more-secondary, button.remove { color: white; font-size: 10px; font-weight: bold; background-color: #8d4166; display: block; padding: 5px; border: 0px; }
.read-more-primary:hover, .read-more-secondary:hover, a:hover .read-more-primary, a:hover .read-more-secondary { text-decoration: underline; }
textarea, input[type="text"] { background-color: #f2f0e5; border: 0px; background-color: #f2f0e5; border: 0px; font-size: 12px; padding-left: 5px; }
input[type="text"] { height: 25px; }
textarea { height: 75px; }
input:focus, textarea:focus { outline-color: #dc0083; }
.wpcf7 input[type="text"], .wpcf7 textarea, .wpcf7 select { width: 248px; }
.wpcf7 p { font-weight: bold; }
.wpcf7-list-item { display: block; }
.accordion { }
.accordion .accordion-record { background-color: #8BD378; margin-bottom: 20px; }
.accordion .accordion-title { font-family: "futura-pt",sans-serif; font-size: 18px; color: #302A22; cursor: pointer; margin: 8px 15px 8px 10px; }
.accordion .accordion-title a { color: #302A22; }
.accordion-arrow { float: right; height: 20px; width: 17px; background: url('images/accordion-arrows.png') no-repeat; margin-top: 4px; margin-right: 20px; }
.accordion-arrow.closed { width: 17px; background-position: 0px 0px; }
.accordion-arrow.open { width: 22px; background-position: -20px 0px; }
.accordion-content { padding: 0px 15px 15px; }
.header-top { height: 50px; position: relative; z-index: 99999; }
.header-top ul { list-style-type: none; }
.header-top li { float: left; }
.signup label { text-transform: uppercase; }
.signup label strong { text-transform: none; }
#sign-up { width: 175px; margin-left: 10px; }
.signup-form input[type="submit"] { margin-left: -2px; }
#header .cart { text-transform: uppercase; margin-left: 60px; margin-top: 3px; }
#header .cart img { vertical-align: middle; margin-right: 5px; }
#header .cart a { color: black; }
#header .cart a .cart-number { color: #ff0098; }
.social-media { margin-top: -2px; margin-left: 20px; }
.social-media ul { padding-left: 0px; }
.social-media a { text-indent: -9999em; display: block; width: 33px; height: 35px; background: url('images/social-media-icons.png') no-repeat; }
a.tw { background-position: 0px 0px; }
a.vm { background-position: -35px 0px; }
a.fb { background-position: -70px 0px; }
li.consignor-login{ margin-left: 20px; margin-top: -5px; float: right; }
.consignor-login a { display: block; text-indent: -9999em; background: url('images/consigner-login.png') no-repeat; width: 201px; height: 39px; }#consignor-packages a { color: white; }
.consignor-input { width: 155px; }
.consignor-list{ padding-left:0; width: 201px; display:none; height:0; position:absolute;}
a.consignor-list-item-link{ background: #0e3ea0; text-indent:10px; color: #fff; line-height: 39px;}
.consignor-login:hover .consignor-list { display:block; height: auto;}
#nav { height: 112px; background: url('images/nav-bg.png') repeat-x; margin-top: -25px; position: relative; z-index: 9999; }
#nav ul { list-style-type: none; padding-left: 0px; }
#nav .parent { margin: 45px auto 0 auto; }
#nav .parent li { float: left; position: relative; border-left: 1px solid #b3f6f6; padding: 0 10px; }
#nav .parent li.first { border-left: 0px; padding-left: 0px; }
#nav .parent li.last { padding-right: 0px; margin-right: 0px; }
#nav .parent a { font-family: "futura-pt",sans-serif; font-weight: 400; font-size: 18px; color: black; }
#nav a:hover, #nav a.active { color: #ff0098; }
#nav .parent li:hover .child { left: 0px; }
#nav .child { position: absolute; left: -999em; z-index: 99999; width: 100%; min-width: 220px; background-color: #5eedec; padding: 5px 10px; }
#nav .child li { margin-bottom: 5px; border-left: 0px; float: none; }
.top-left { margin-top: -15px; width: 347px; float: left; margin-left: 20px; }
.logo h1 { margin-top: -5px; }
#points { list-style-type: none; text-transform: lowercase; font-size: 20px; font-family: "futura-pt",sans-serif; font-weight: 400; text-align: right; padding-left: 0px; margin-top: 24px; }
#points li { width: 347px; height: 51px; background: url('images/bullet-background.png') no-repeat; margin-top: 10px; }
#points a { color: #302a22; margin-top: 5px; margin-right: 30px; display: block; padding-top: 3px; }
#points .handwriting { font-size: 26px; }
.top-right { float: right; }
#top-slider { position: relative; margin-top: -31px; }
#top-slider .slides { width: 548px; height: 438px; }
.photo-caption { width: 528px; height: 50px; background: url('images/caption-background.png'); position: absolute; z-index: 999; top: 388px; text-align: right; padding-right: 20px; }
.photo-caption a, .photo-caption { color: #302a22; font-family: "futura-pt",sans-serif; font-weight: 400; font-size: 20px; display: block; text-transform: lowercase; font-size: 25px; margin-right: 20px; }
#top-slider a:hover .photo-caption .handwriting { text-decoration: underline; }
.photo-caption .handwriting { font-size: 30px; }
#middle-slider { padding: 11px; background-color: #e5debf; width: 368px; height: 205px; float: left; margin-right: 35px; }
#middle-slider iframe { width: 368px; height: 205px; }
#testimonials { width: 294px; height: 220px; background: url('images/testimonials-background.png') no-repeat; float: left; position: relative; }
#testimonials blockquote { font-size: 16px; line-height: 2em; font-weight: bold; color: #7a0b4d; width: 260px; margin: 15px auto 0; text-align: center; }
#testimonials cite { font-size: 16px; font-weight: bold; color: #7a0b4d; text-align: right; display: block; width: 260px; margin: 10px auto 0; }
.testimonials-buttons { position: absolute; width: 260px; display: block; left: 20px; bottom: 45px; }
.testimonials-buttons a { margin: 0 auto; }
.employee-testimonial { margin-top: 10px; margin-bottom: 10px; }
#advertisement { padding: 11px; background-color: #e5debf; width: 155px; height: 207px; float: right; }
.dotted-line { background: url('images/dotted-line.png') repeat-x; height: 3px; margin-top: 20px; }
.bottom-portion { background-color: #e9e2c4; }
.bottom-content { background-color: #dbd4b3; margin-top: 40px; padding: 20px 50px 70px; }
.bottom-left { width: 300px; float: left; }
.bottom-left h2 { font-size: 30px; margin-bottom: -5px; margin-top: 0px; }
.bottom-left p { line-height: 20px; }
.bottom-right { width: 500px; float: right; text-align: center; line-height: 1.618em; }
#locations .location { width: 230px; }
#locations .location-left { float: left; }
#locations .location-right { float: right; }
.location-pic a { width: 222px; height: 170px; padding: 7px; background-color: #a19769; display: block; position: relative; margin-bottom: -5px; }
.location-pic span { display: inline; position: absolute; bottom: 7px; right: 7px; }
#locations h3 { margin-bottom: 3px; }
.ribbon-container { width: 1005px; margin: 0 auto; position: relative; top: -110px; }
.ribbon { background: url('images/ribbon.png') no-repeat; width: 572px; height: 91px; float: right; text-transform: lowercase; font-size: 25px; }
.ribbon-content { margin: 32px auto 0; width: 475px; }
.ribbon a { color: white; }
.ribbon .handwriting { font-size: 43px; }
.ribbon-learn-more { text-transform: uppercase; font-family: 'Droid Sans', sans-serif; font-size: 16px; font-weight: bold; margin-left: 25px; }
.interior { background-color: #e9e2c3; padding: 0 15px 20px; width: 930px; margin: -31px auto 40px; }
#sidebar { float: right; width: 350px; padding-top: 20px; margin-right: 10px; }
#interior-content { float: right; width: 560px; }
#interior-content.no-sidebar { float: none; width: 100%; }
.callout { padding: 10px; display: block; color: white; }
#sidebar .callout { width: 300px; margin-bottom: 10px; clear:both; }
.callout-pink { background-color: #FF0098; }
.callout-brown { background-color: #A19769; }
.callout-green { background-color: #8BD378; } .callout-green, .callout-green h2, .callout-green a { color: #302A22 !important; }
.callout a { color: white; }
.footer-break { background-color: #b3b3d7; height: 18px; }
#footer { background-color: #02c4c6; text-align: center; font-size: 11px; color: white; padding: 15px 0 50px; line-height: 1.5em; position: relative; z-index: 1; }
#footer a { color: white; }
.footer-pattern { height: 260px; background: url('images/footer-pattern.png'); margin-top:-10px; position: relative; z-index: 0 }
.testimonial-masonry .testimonial-box { background-color: #EFEBD5; padding: 10px; margin-left: 10px; width: 430px; margin-bottom: 10px; float: left;
-webkit-border-radius: 15px;
border-radius: 15px; }
.testimonial-box cite { font-size: 11px; font-weight: bold; color: #7a0b4d; text-align: right; display: block; margin: 10px 10px; }
.older-posts { float: left; }
.newer-posts { float: right; }
.wp-caption { padding: 7px; background-color: #A19769; border: 0px; }
.wp-caption p.wp-caption-text { font-size: 13px; line-height: 2em; font-weight: bold; color: white; }
.package, .column { float: left; margin-left: 10px; padding: 10px; }
.package img { max-width: 100%; }
.column { width: 140px; }
.package { min-height: 570px; width: 160px; }
.package ul { padding-left: 0px; list-style-type: none; margin-left: 0px; }
.package li { padding-left: 0px; margin-left: 0px; margin-bottom: 5px; }
h2.package-title { text-align: center; font-family: "futura-pt",sans-serif; }
.package-price { display: block; text-align: center; font-family: "futura-pt",sans-serif; font-size: 20px; color: #302A22; }
.package-add { display: block; text-align: center; margin-top: 10px; }
#package-1 { margin-left: 0px; }
#package-1, #package-3 { background-color: #A19769 }
#package-2 { background-color: #8BD378; }
#store-rotator .flexslider { height: 204px; margin-bottom: 0px; }
.shopp-breadcrumbs { text-transform: lowercase; text-align: right; display: block; background-color: #c0dca3; font-size: 13px; padding: 5px 10px; color: #6d284a; }
.shopp-breadcrumbs a, .shopp-breadcrumbs strong { color: #6d284a; }
#product-images .slides { width: 430px; height: 270px; float: left; background-color: #A19769;
-webkit-box-shadow: 0px 0px 8px 1px rgba(255, 255, 255, .8);
box-shadow: 0px 0px 8px 1px rgba(255, 255, 255, .8);}
#product-images .flex-control-thumbs { float: right; width: 97px; }
#product-images .flex-control-thumbs img {
-webkit-border-radius: 15px;
border-radius: 15px; }
#product-images .flex-control-thumbs li { margin-bottom: 10px; float: none; width: 97px; height: 97px; }
#shopp .product-variations { float: left; }
#shopp .product-variations label { font-weight: bold; font-size: 16px; }
#product-purchase select { margin-bottom: 10px; margin-top: 10px; }
#product-purchase { float: right; text-align: right; }
.product-price { display: block; font-weight: bold; font-size: 30px; text-align: right; color: #6d284a; }
.atc { display: block; float: right; }
#shopp .category-view { margin: 20px 0px; text-align: center; }
#shopp .category-view img { margin-bottom: 5px;
-webkit-border-radius: 15px;
border-radius: 15px; }
#shopp .category-view li { float: left; width: 155px; margin: 0px 15px; }
#shopp .category-view a { color: black; }
.shopp-sidebar { text-align: right; text-transform: lowercase; }
.shopp-sidebar .sidebar-my { margin-top: 60px; margin-bottom: 20px; }
.shopp-sidebar .sidebar-my a { display: block; color: #02c4c6; font-size: 30px;
text-shadow: 0px 0px 8px #ffffff; }
.sidebar-icon { display: block; float: right; height: 29px; width: 30px; background: url('images/sidebar-icons.png') no-repeat; margin-left: 10px; }
.sidebar-icon.lock { background-position: 0 0; margin-top: 5px; }
.sidebar-icon.cart { background-position: 0 -28px; }
.shopp-sidebar .shopp-categories-menu, .shopp-sidebar .shopp-categories-menu .children { list-style-type: none; }
.shopp-sidebar .shopp-categories-menu li { margin-bottom: 15px; }
.shopp-sidebar .shopp-categories-menu > li { margin-bottom: 40px; }
.shopp-sidebar .shopp-categories-menu > li li:first-child { margin-top: 15px; }
.shopp-sidebar .shopp-categories-menu a { color: #6d284a; font-size: 25px; font-family: "corner-store",sans-serif; }
.shopp-sidebar .shopp-categories-menu .children a { color: #302a22; font-size: 14px; font-weight: bold; font-family: 'Droid Sans', sans-serif; }
.rentals {background:#FFF7DB;}
.rentals tr:nth-child(even) {background:#eee;}
.rentals thead {background:#fff;}
.rentals th {padding:10px;}
.rentals td { text-align: center; min-width: 75px; padding:10px;}
#rental-form img{padding:5px; border:1px solid #ddd;background:#fff;}
.float-left{float:left; width:50%;}
.float-right{float:right;width:30%;}
.rentals tr.error { background-color: #ffdbdb; }
.consignor-package { margin-bottom: 20px; color: white; }
.consignor-package.platinum { background-color: #231F20; }
.consignor-package.gold { background-color: #A99A6F; }
.consignor-package.silver { background-color: #948A88; }
.consignor-package.pink { background-color: #FF0098; }
.consignor-package-heading { padding: 1px 10px; }
.consignor-package-heading h1 { color: white; font-family: 'Droid Sans', sans-serif; line-height: 1em; text-transform: uppercase; font-size: 18px; }
.consignor-package-callout, .consignor-package-benefits { padding: 5px 10px; }
I wanted to make my site responsive thru several plugins but it didnt work so im hoping someone can help me do it thru CSS, i hope you can help me. Thanks
Edit: I added the header for more relative info on how to make site responsive.
<?php
if(strpos($_SERVER['REQUEST_URI'], 'checkout') !== false && (!isset($_SERVER['HTTPS']) || $_SERVER['HTTPS'] !== 'on')) {
if(!headers_sent()) {
header("Status: 301 Moved Permanently");
header(sprintf(
'Location: https://%s%s'.(!empty($_SERVER['QUERY_STRING'])?'?'.$_SERVER['QUERY_STRING']:''),
$_SERVER['HTTP_HOST'],
$_SERVER['REQUEST_URI']
)
);
exit();
}
}
else if(strpos($_SERVER['REQUEST_URI'], 'checkout') === false && (isset($_SERVER['HTTPS']) || $_SERVER['HTTPS'] == 'on')) {
if(!headers_sent()) {
header("Status: 301 Moved Permanently");
header(sprintf(
'Location: http://%s%s',
$_SERVER['HTTP_HOST'],
$_SERVER['REQUEST_URI']
)
);
exit();
}
} ?>
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<title><?php wp_title() ?></title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="<?php bloginfo('template_directory') ?>/css/normalize.css">
<link rel="stylesheet" href="<?php bloginfo('template_directory') ?>/style.css?20140717">
<link rel="stylesheet" href="<?php bloginfo('template_directory') ?>/css/flexslider.css">
<!--[if lte IE 9]><link rel="stylesheet" href="<?php bloginfo('template_directory') ?>/css/ie9.css"><![endif]-->
<!--[if lte IE 7]><link rel="stylesheet" href="<?php bloginfo('template_directory') ?>/css/ie7.css"><![endif]-->
<link href='https://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="//use.typekit.net/kxd7fvf.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<link rel="stylesheet" href="<?php bloginfo('template_directory') ?>/css/hummanity/hummanity.css">
<script src="<?php bloginfo('template_directory') ?>/js/jquery.flexslider-min.js"></script>
<script src="<?php bloginfo('template_directory') ?>/js/jquery.masonry.min.js"></script>
<script src="<?php bloginfo('template_directory') ?>/js/jquery.validate.min.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-35285936-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<?php wp_head(); ?>
</head>
<body>
<header>
<div id="header">
<div class="header-top">
<div class="container cf">
<ul>
<li class="signup">
<form name="constant-contact-signup" action="<?php echo constant_contact_current_page_url() ?>" method="post" class="signup-form">
<label for="sign-up"><strong>eOffers</strong> Sign Up:</label>
<input type="text" name="fields[email_address][value]" id="sign-up"<?php echo ($_POST['fields']['email_address']['value']) ? 'value="Thanks for signing up."':'' ?>>
<input type="hidden" name="cc_newsletter[]" value="2">
<input type="hidden" id="cc_referral_url" name="cc_referral_url" value="<?php echo urlencode(constant_contact_current_page_url()) ?>" />
<input type="hidden" id="cc_redirect_url" name="cc_redirect_url" value="<?php echo apply_filters('constant_contact_form_redirect_url', urlencode($redirect_url)) ?>" />
<input type="hidden" name="uniqueformid" value="constant_contact_api_widget-2">
<input type="submit" value="subscribe" class="read-more-primary">
</form>
</li>
<li class="cart">
<a href="<?php shopp('cart','url') ?>"><img src="<?php bloginfo('template_directory') ?>/images/cart.png">
View Cart <span class="cart-number">(<?php shopp('cart','total-items') ?>)</span></a>
</li>
<li class="social-media">
<ul>
<li>Twitter</li>
<li>Vimeo</li>
<li>Facebook</li>
</ul>
</li>
<li class="consignor-login">Consignor Login
<ul class="consignor-list">
<li class="consignor-list-item">
<a class="consignor-list-item-link" href="http://ankeny.consignoraccess.com" target="_new">Ankeny</a>
</li>
<li class="consignor-list-item">
<a class="consignor-list-item-link" href="http://wdm.consignoraccess.com" target="_new">West Des Moines</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="nav">
<?php
$is_child = $post->post_parent;
if($is_child) {
$top_ancestor = end(get_post_ancestors($post->ID));
$top_ancestor = get_post($top_ancestor);
}
?>
<div class="container cf">
<ul class="parent cf">
<li class="first">
Home
</li>
<li>
Shop Online
<ul class="child">
<li>Gift Cards</li>
<li>Hair Accessories</li>
<?php if(get_pages( 'child_of=9' )) : ?><?php wp_list_pages( array('child_of'=> 9, 'title_li'=>'') ); ?><?php endif; ?>
</ul>
</li>
<li>
Sell Your Items
<?php if(get_pages( 'child_of=11' )) : ?><ul class="child"><?php wp_list_pages( array('child_of'=> 11, 'title_li'=>'') ); ?></ul><?php endif; ?>
</li>
<li>
Baby & Toddler Equipment Rentals
<?php if(get_pages( 'child_of=14' )) : ?><ul class="child"><?php wp_list_pages( array('child_of'=> 14, 'title_li'=>'') ); ?></ul><?php endif; ?>
</li>
<li>
About
<?php if(get_pages( 'child_of=19' )) : ?><ul class="child"><?php wp_list_pages( array('child_of'=> 19, 'title_li'=>'') ); ?></ul><?php endif; ?>
</li>
<li>
Fundraising & Charities
<?php if(get_pages( 'child_of=21' )) : ?><ul class="child"><?php wp_list_pages( array('child_of'=> 21, 'title_li'=>'') ); ?></ul><?php endif; ?>
</li>
<li class="last">
Contact Us
<?php if(get_pages( 'child_of=23' )) : ?><ul class="child"><?php wp_list_pages( array('child_of'=> 23, 'title_li'=>'') ); ?></ul><?php endif; ?>
</li>
</ul>
</div>
</div>
</div>
</header>

Answer 1

Just installing a plugin doesn't make your site responsive. I don't know what you have installed but, check your responsive plugin documentation for more information. May be there are some additional steps to follow.
Anyway, you don't have to mess with plugins. You can get this done with css media queries. You can find more about media queries from foloowing links.
CSS media queries - Mozilla developer guide
Media queries for standard devices
For an example, Following is the media query that works for iPhone6
/* Portrait and Landscape */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
/* Your custom css goes here*/
}
Hope this will help you.

Answer 2

Firstly i suggest u can use #media file in css to make it responsive, set the width according to the screen and set all the elements value again.
Second method use rem value in elements because it sets according the screen automatically, we don't have to make media file.
E.g. like u have given width 18px just change px value into rem, like 18rem
change all the value in your code it will help u to make it responsive.