3 replies [Last post]
Filmguy2013
Filmguy2013's picture
Offline
newbie
Last seen: 7 years 26 weeks ago
Timezone: GMT-4
Joined: 2013-10-24
Posts: 7
Points: 9

Hello. My website Truck Driving Schools Info is a wordpress.org website that uses a custom theme from FThemes called Indicate. It is a responsive theme. Here is the problem. My laptop that I used to do some CSS customization on is a 17" widescreen format laptop. I have the width of the "container" set at 100%. I have two "sidebars" on either side of the "content". I believe my website is 1600px wide and it loads correctly on my 17" widescreen laptop. The problem is, when I bring up my website on a 4:3 aspect ratio computer monitor or even a widescreen monitor that is smaller than my 17" laptop screen, the website is all jumbled up and the right sidebar is pushed down and all the way to the left side of the screen and appears underneath the left sidebar! I can't run a professional website if it loads incorrectly on different sized devices and causes it to look amateur!

Here are two screenshots taken of my website from my friends laptop which has a 15" widescreen monitor; the first screenshot shows the upper part of my website. The right sidebar should appear under the social profile icons that are on the menu bar, but the second screenshot shows where the right sidebar actually appears... at the bottom of the webpage, below the left sidebar:

Screenshot #1: http://www.truckdrivingschoolsinfo.com/wp-content/upLoads/2014/07/Truck-Driving-Schools-Info-screenshot-2.jpg

Screenshot#2: http://www.truckdrivingschoolsinfo.com/wp-content/upLoads/2014/07/Truck-Driving-Schools-Info-screenshot.jpg

In the second screenshot, that dark blue horizontal line at the bottom is the top of the fat footer on my website.

The administrators at the FThemes support forum have told me that the problem is that the "container" width is set at a percentage value, while the "content" and "sidebar" widths are set at pixel values and that this is what's causing the problem but, they won't give me the CSS code I would need to insert into the CSS editor of my website to fix this problem. They only tell me to set the container width back to the default 960px. This is unacceptable. Is there any kind of CSS code I can insert that will force the website to load at the correct width whether it is viewed on a large widescreen laptop, a 4:3 aspect ratio computer monitor, or a small smartphone screen, since it is a responsive website? Can someone please help me resolve this situation? Thank you. Here is the CSS as seen in the CSS editor. Where it says "LAYOUT" is where you will find the "container", "content:, and "sidebar" that I am describing:

/*
    Theme Name: Indicate
    Theme URI: <a href="http://fthemes.com/indicate-free-wordpress-theme/
" rel="nofollow">http://fthemes.com/indicate-free-wordpress-theme/
</a>    Description: Free General/Blog WordPress theme by FThemes
    Author: FThemes
    Author URI: <a href="http://fthemes.com" rel="nofollow">http://fthemes.com</a>
    Version: 2.2
    Tags: blue, white, three-columns, left-right-sidebars
*/
 
/* INDEX:
 
    =GENERAL
    =LAYOUT
    =HEADER
    =MENUS
    =POST
    =SITEMAP
    =CONTACT FORM
    =SLIDER
    =WP-PAGENAVI
    =FOOTER
    =WIDGETS
    =COMMENTS
*/
 
/* =GENERAL
-------------------------------------------------------------- */
 
@import url(<a href="http://fonts.googleapis.com/css?family=Oswald" rel="nofollow">http://fonts.googleapis.com/css?family=Oswald</a>);
 
body {
    background:#FFFFFF  center top no-repeat;
    color: #000000;
}
 
a {
    color: #0000dc;
    text-decoration: none;
}
 
a:hover, a:focus {
    color: #ff8a00;
    text-decoration: underline;
}
 
a:focus { 
    outline: none;
}
 
/* =LAYOUT
-------------------------------------------------------------- */
 
#container {
	width: 100%;
	margin: 0 auto;
}
 
#main {
	padding: 15px;	
    background: #FFFFFF;
}
 
#main-fullwidth {
    padding: 15px;
    background: #FFFFFF;
}
 
#content {
    overflow: hidden;
    float: left;
    width: 955px;
    margin-left: 300px;
}
 
#sidebar-primary {
    overflow: hidden;
	float: left;
    width: 210px;
    margin-left: -1230px;
    border-right: 1px solid #E9EBE8;
    padding-right: 9px;
}
 
#sidebar-secondary {
    overflow: hidden;
	float: left;
    width: 210px;
    margin-left: 55px;
    border-left: 1px solid #E9EBE8;
    padding-left: 9px;
}
 
/* =HEADER
-------------------------------------------------------------- */
 
#header {
    height: 200px;
    padding:95px 0;
    background: url(images/header-bg.png) center top no-repeat;
    margin-top: 0px;
}
.logo {
    float: left;
    margin-left: 0px;
    margin-top: -100px;
}
 
.logo h1.site_title {
    margin: 0;
    padding:0;
    font-family: Arial, Helvetica, Sans-serif;
    font-size:48px;
    line-height: 40px;
    font-weight: bold;
}
 
.logo h1.site_title a, .logo h1.site_title a:hover {
    color: #292424;
    text-decoration: none;
}
 
.logo h2.site_description {
    margin: 0;
    padding:0;
    color: #292424;
    font-family: Arial, Helvetica, Sans-serif;
    font-size:14px;
    line-height: 14px;
}
 
.header-right {
    float: right;
}
 
#top-social-profiles {
    padding-top: 0px;
    height: 0px;
    text-align: right;
    margin-right: 0px;
 
}
#top-social-profiles img {
    margin: 0 0 0 6px !important;
} 
 
#top-social-profiles img:hover {
    opacity: 0.8;
}
#top-social-profiles .widget-container {
  background: none;
  padding: 0;
  border: 0;
}
 
/* =MENUS
-------------------------------------------------------------- */
 
/* Menu Primary
----------------------------*/
 
.menu-primary-container {
    padding: 0;
    position:relative;
    height: 0px;
    background: url(images/menu-primary-bg.png) left top repeat-x;
    z-index: 400;
}
 
.menu-primary {
}
 
.menu-primary ul {
	min-width: 160px;
}
 
/* First Level - Menu Primary */
 
.menu-primary li a {
    color: #FFFFFF;
    padding: 11px 15px;
	text-decoration: none;
    font-family: 'Oswald', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: normal;
}
 
.menu-primary li a:hover, .menu-primary li a:active, .menu-primary li a:focus, 
.menu-primary li:hover > a, .menu-primary li.current-cat > a, .menu-primary li.current_page_item > a, .menu-primary li.current-menu-item > a {
    color: #FFFFFF;
    outline: 0;
    background: url(images/menu-primary-bg.png) left -134px repeat-x;
}
 
/* Child Levels - Menu Primary */
 
.menu-primary li li a {
	color: #fff;
    text-transform: none;
    background: #3C83B3;
    padding: 10px 15px;
    margin: 0;
    border: 0;
    font-weight: normal;
}
 
.menu-primary li li a:hover, .menu-primary li li a:active, .menu-primary li li a:focus, 
.menu-primary li li:hover > a, .menu-primary li li.current-cat > a, .menu-primary li li.current_page_item > a, .menu-primary li li.current-menu-item > a {
	color: #fff;
    background: #499BCF;
    outline: 0;
    border-bottom:0;
    text-decoration: none;
}
 
 
/* Arrows Menu Primary */
 
.menu-primary a.sf-with-ul {
    padding-right: 20px;
    min-width: 1px;
}
.menu-primary  .sf-sub-indicator {
    position: absolute;
    display: block;
    overflow: hidden;
    right: 0;
    top:  0;
    padding: 9px 10px 0 0;
}
 
.menu-primary  li li .sf-sub-indicator {
    padding: 9px 10px 0 0;
}
 
/* Shadows Menu Primary */
 
.wrap-menu-primary .sf-shadow ul {
    background:	url('images/menu-primary-shadow.png') no-repeat bottom right;
}
 
/* Menu Secondary
----------------------------*/
 
.menu-secondary-container {
    position:relative;
    height: 34px;
    z-index: 300;
    background: #3A7FAF;
    margin-top: 0px;
}
 
.menu-secondary {}
 
.menu-secondary ul {
    min-width: 160px;
}
 
/* First Level - Menu Secondary */
.menu-secondary li a {
    color: #fff;
    padding: 11px 15px ;
	text-decoration: none;
    font-family: Arial, Helvetica, Sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: bold;
}
 
.menu-secondary li a:hover, .menu-secondary li a:active, .menu-secondary li a:focus, 
.menu-secondary li:hover > a, .menu-secondary li.current-cat > a, .menu-secondary li.current_page_item > a, .menu-secondary li.current-menu-item > a {
    color: #fff;
    background:#4A9CD1;
    outline: 0;
}
 
/* Child Levels - Menu Secondary */
 
.menu-secondary li li a {
	color: #fff;
    background: #3A7FAF;
    padding: 10px 15px;
    text-transform: none;
    margin: 0;
    font-weight: normal;
}
 
.menu-secondary li li a:hover, .menu-secondary li li a:active, .menu-secondary li li a:focus, 
.menu-secondary li li:hover > a, .menu-secondary li li.current-cat > a, .menu-secondary li li.current_page_item > a, .menu-secondary li li.current-menu-item > a {
	color: #fff;
    background: #4B9FD4;
    outline: 0;
}
 
/* Arrows - Menu Secondary */
 
.menu-secondary a.sf-with-ul {
    padding-right: 26px;
    min-width: 1px;
}
.menu-secondary  .sf-sub-indicator {
    position: absolute;
    display: block;
    overflow: hidden;
    right: 0;
    top:  0;
    padding: 10px 13px 0 0;
}
 
.menu-secondary li li .sf-sub-indicator {
 
    padding: 9px 13px 0 0;
}
 
/* Shadows - Menu Secondary */
 
.wrap-menu-secondary .sf-shadow ul {
    background:	url('images/menu-secondary-shadow.png') no-repeat bottom right;
}
 
/* =POST
-------------------------------------------------------------- */
 
/* Post General
----------------------------*/
 
.post {
    margin-bottom: 15px;
    border-bottom: 1px solid #E9EBE8;
}
 
.page, .post-single {
    border-bottom: 0;
    margin-bottom: 0;
}
 
.title {
    color: #3d3d3d;
    margin: 0 0 10px 0;
    padding: 0;
    font-family: 'Oswald', sans-serif;
    font-size: 24px;
    line-height: 24px;
    font-weight: normal;
}
 
.title a {
    color: #242424;
    text-decoration: none;
}
 
.title a:hover {
    color: #236E9E;
    text-decoration: none;
}
 
.entry {
    line-height: 20px;
}
 
.featured_image {
    padding: 6px;
    border: 1px solid #D2D9CE;
    background: #fff;
}
 
.featured-image-container {
    overflow: hidden;
    height: 200px;
    margin-bottom: 15px;
}
 
 
.featured-image-container img {
    width: 615px;
}
 
.page-title {
    color: #292424;
    margin: 0px 0 10px 0;
    padding: 0 0 10px 0;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 20px;
    font-family: Arial, Helvetica, Sans-serif;
    border-bottom: 2px solid #292424;
}
 
img.centered, .aligncenter, div.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}
 
img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
	}
 
img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
	}
 
.alignright {
	float: right;
	}
 
.alignleft {
	float: left;
	}
 
/* Post Metas
----------------------------*/
 
.postmeta-primary {
    color: #999999;
    font-size: 12px;
    line-height: 18px;
    padding: 0 0 10px 0;
}
 
.postmeta-secondary {
    color: #999999;
    font-size: 12px;
    line-height: 18px;
    padding: 0 0 10px 0;
}
 
.postmeta-primary span, .postmeta-secondary span {
    background: url(images/meta-separator.png) left center no-repeat;
    padding:3px 0 3px 10px;
}
 
 
.postmeta-primary span:first-child, .postmeta-secondary span:first-child {
    background: none;
    padding-left: 0;
}
 
/* Read More
----------------------------*/
 
.readmore {
    margin-bottom: 15px;
    float: right;
}
 
.readmore a {
    color: #fff;
    background: #2B2F32;
    padding: 8px 14px;
    font-size: 12px;
    line-height: 12px;
    display: inline-block;
    text-decoration: none;
    text-transform: uppercase;
}
 
.readmore a:hover {
    color: #fff;
    background: #5695C0;
    text-decoration: none;
}
 
/* =SITEMAP
-------------------------------------------------------------- */
.sitemap {
}
 
.sitemap-col {
    width: 30%;
    padding: 0 0 0 10px;
}
 
.sitemap-col-archives {
    width: 45%;
    padding: 0 0 0 10px;
}
 
.sitemap h2 {
    font-size: 18px;
    font-weight: bold;
    border-bottom: 2px solid #ddd;
    padding: 0 0 10px 0;
    margin: 0 0 10px 0;
}
 
.sitemap h3 {
    font-size: 14px;
    font-weight: bold;
    padding: 0;
    margin: 0 0 10px 0;
}
 
.sitemap-list {
    font-size: 13px;
    line-height: 22px;
}
 
.sitemap-list, .sitemap-list ul {
    padding: 0 0 0 20px;
}
 
/* =CONTACT FORM
-------------------------------------------------------------- */
.contact-form {
}
 
.contact-form-label {
    width: 90px;    
    font-weight: bold;
    font-size: 14px;
    padding: 7px 0;
}
 
.contact-form-input {
    margin-left: 90px;    
}
 
.contact-form input[type=text] {
    padding: 6px;
    width: 60%;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    background: #fff;
}
 
.contact-form input[type=submit] {
    padding: 5px 50px;
    border: 1px solid #ccc;
    background: #eee;
}
.contact-form textarea {
    width: 96%;
    padding: 6px;
    height: 160px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    background: #FFFFFF;
}
 
.contact-form-required {
    color: red;
}
 
/* =SLIDER
-------------------------------------------------------------- */
 
.fp-slider {
    margin: 0 0 15px 0;
}
 
.fp-slides-container {}
 
.fp-slides, .fp-thumbnail, .fp-prev-next, .fp-nav {
    width: 460px;
}
 
.fp-slides, .fp-thumbnail {
    height: 300px;
    overflow: hidden;
	position: relative;
}
 
.fp-title {
    font-family: Arial, Helvetica, Sans-serif;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    padding: 0 0 2px 0;
    margin: 0;
}
 
.fp-title a, .fp-title a:hover {
    color: #fff;
    text-decoration: none;
}
 
.fp-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #111;
    opacity: 0.7;
    filter: alpha(opacity = 70);
    padding: 10px 15px;
    overflow: hidden;
}
 
.fp-content p {
    color: #fff;
    padding: 0;
    margin: 0;
    line-height: 18px;
}
 
.fp-more,  .fp-more:hover{
    color: #fff;
    font-weight: bold;
}
 
.fp-nav {
    height: 12px;
    text-align: center;
    padding: 10px 0;
    background: #333;
}
 
.fp-pager a { 
    background-image: url(images/featured-pager.png); 
    cursor:pointer;  
    margin: 0 8px 0 0; 
    padding: 0;
    display: inline-block;
    width: 12px; 
    height: 12px;
    overflow: hidden;
    text-indent: -999px; 
    background-position: 0 0;
    float: none;
    line-height: 1;
    opacity: 0.7;
    filter: alpha(opacity = 70);
}
 
.fp-pager a:hover, .fp-pager a.activeSlide  { 
    text-decoration: none;
    background-position: 0 -112px;
    opacity: 1.0;
    filter: alpha(opacity = 100);
}
 
.fp-prev-next-wrap {
    position: relative; 
    z-index: 200; 
}
 
.fp-prev-next {
    position: absolute;
    bottom: 130px;
    left: 0;
    right: 0;
    height: 37px;  
}
 
.fp-prev {
    float:left;
    margin-left: 14px;
    width:37px;
    height:37px;
    background:url(images/featured-prev.png) left top no-repeat;
    opacity: 0.6;
    filter: alpha(opacity = 60);
}
 
.fp-prev:hover {
    opacity: 0.8;
    filter: alpha(opacity = 80);
}
 
 .fp-next {
    float:right;
	width:36px;
    height:37px;
    margin-right: 14px;
    background:url(images/featured-next.png) right top no-repeat;
    opacity: 0.6;
    filter: alpha(opacity = 60);
}
 
.fp-next:hover {
    opacity: 0.8;
    filter: alpha(opacity = 80);
}
 
/* =WP-PAGENAVI
-------------------------------------------------------------- */
 
.wp-pagenavi {
    float: left;
}
 
.wp-pagenavi a, .wp-pagenavi span {
	text-decoration: none;
	padding: 5px 8px;
	margin: 2px;
    font-size: 15px;
    line-height: 15px;
    float: left;
}
 
.wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi a:active {
    color: #333333;
    background:none;
}
 
.wp-pagenavi span.current {
    font-weight: bold;
    color: #fff;
    background:#5695C0;
}
 
.wp-pagenavi a:hover {
    color: #fff;
    background:#2B2F32;
}
 
.wp-pagenavi span.pages {
    color: #333333;
    background: none;
    padding: 4px 8px 4px 0;
}
 
.wp-pagenavi span.extend {
    background:transparent;
    color: #333333;
    background: none;
}
 
/* =FOOTER
-------------------------------------------------------------- */
 
#footer {
    margin-bottom:3px;
}
 
#copyrights {
    color: #FFFFFF;
    background: #d94700 left top repeat-x;
    text-align: center;
    padding: 15px 0;
}
 
#copyrights a {
    color: #FFFFFF;
} 
 
#copyrights a:hover {
    color: #FFFFFF;
    text-decoration: none;
} 
 
#credits {
    color: #FFFFFF;
    text-align: center;
    font-size: 11px;
    padding: 10px 0 0 0;
}
 
#credits a {
    color: #092675;
    text-decoration: none;
} 
 
#credits a:hover {
    text-decoration: none;
    color: #092675;
} 
 
#wpstats {
  display: none;
}
 
/* =WIDGETS
-------------------------------------------------------------- */
 
/* Widgets Defaults
----------------------------*/
 
.widget-container {
    list-style-type: none;
    list-style: none;
    margin: 0 0 15px 0;
    padding: 0;
    color: #666666;
    font-size: 13px;
}
 
.widget-container a {
    color: #666666;
    text-decoration: none;
}
 
.widget-container a:hover {
    color: #1A5984;
    text-decoration: none;
}
 
.widgettitle {
    background: #484E53;
    margin: 0 0 10px 0;
    padding: 10px;
    -moz-border-radius: 5px 5px 0 0;
    -khtml-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}
 
.widgettitle, .widgettitle a, .widgettitle a:hover {
    color: #FFFFFF;
    font-size: 16px;
    line-height: 16px;
    font-family: 'Oswald', sans-serif;
    font-weight: normal;
    text-decoration: none;
    text-transform: uppercase;
}
 
.widget ul {
    list-style-type: none;
    list-style: none;
    margin: 0;
    padding: 0;
}
 
.widget ul li {
    padding: 0 0 9px 12px;
    margin: 0 0 8px 0;
    background: url(images/widget-list.png) left 4px no-repeat;
    border-bottom: 1px dashed #C6C6C6;
}
 
/* Search
----------------------------*/
 
#search {
    border: 1px solid #A9ABA8;
    background: #fff url(images/search.png) 99% 50% no-repeat;
    text-align: left;
    padding: 6px 24px 6px 6px;
}
 
#search #s {
    background: none;
    color: #60625F;
    border: 0;
    width: 100%;
    padding: 0;
    margin: 0;
    outline: none;
}
 
#content-search {
    width: 300px;
    padding: 15px 0;
}
 
/* Wp Calendar
----------------------------*/
 
#wp-calendar td:hover, #wp-calendar #today {
    background: #3A7FAF;
    color: #fff;
}
 
#wp-calendar td:hover a, #wp-calendar #today a {
    color: #fff;
}
 
/* Text Widget
----------------------------*/
 
.textwidget {
    line-height: 18px; 
}
 
/* 125x125 Banners Widget
----------------------------*/
 
.banners-125 {
    text-align: center;
    margin-bottom: -10px;
}
 
.banners-125 img {
    margin: 0 5px 5px 5px;
}
 
 
/* Posts Widget
----------------------------*/
 
.posts-widget ul {
    list-style-type: none;
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
}
 
.posts-widget ul li {
    list-style-type: none; 
    list-style: none;
    padding: 0 0 15px 0; 
    margin: 0 0 15px 0;
    border-bottom: 1px dashed #C6C6C6;
}
 
.posts-widgettitle {
    font-weight: bold; 
    padding: 0 0 5px 0; 
    margin: 0; 
    font-family: Arial, Helvetica, Sans-serif;
    font-size: 14px;
}
 
.posts-widgettitle a {}
 
.posts-widgettitle a:hover {}
 
.posts-widget-meta { 
    font-style: italic;  
    padding: 0 0 5px 0;
}
 
.posts-widget-entry {
    font-family: Arial, Helvetica, Sans-serif; 
    line-height: 20px;
}
 
.posts-widget-more {
    font-weight: bold;
}
 
.posts-widget-more:hover {}
 
.posts-widget-featured-image {
    border: 1px solid #D2D9CE;
    padding: 4px;
    background-color: #fff;
}
 
.posts-widget .alignleft {
    margin: 0 8px 8px 0;
}
 
.posts-widget .alignright {
    margin: 0 0 8px 8px;
}
 
.posts-widget .aligncenter {
    margin-bottom: 8px;
}
 
/* Comments Widget
----------------------------*/
 
.comments-widget ul {
    list-style-type: none;
    list-style: none;
    padding: 0; 
    margin: 10px 0 0 0;
}
 
.comments-widget ul li {
    list-style-type: none; 
    list-style: none;
    padding: 0 0 10px 0; 
    margin: 0 0 10px 0;
    border-bottom: 1px dashed #C6C6C6;
}
 
.comments-widget-author {
    text-decoration: none; 
    font-weight: bold; 
    padding: 0 0 5px 0; 
    margin: 0;
}
 
.comments-widget-author:hover {}
 
.comments-widget-entry {
    font-family: Arial, Helvetica, Sans-serif; 
    line-height: 20px;
}
 
.comments-widget-more {
    font-weight: bold; 
}
 
.comments-widget-more:hover {}
 
.comments-widget-avatar {
    border: 1px solid #D2D9CE;
    padding: 4px;
    background-color: #fff;
}
 
.comments-widget .alignleft {
    margin: 0 8px 0 0;
}
 
.comments-widget .alignright {
    margin: 0 0 0 8px;
}
 
.comments-widget .aligncenter {
    margin-bottom: 8px;
}
 
/* Info Box Widget
----------------------------*/
 
.infobox-widget ul {
    list-style-type: none;
    list-style: none;
    padding: 0;
    margin: 0;
}
 
.infobox-widget ul li {
    list-style-type: none; 
    list-style: none;
    padding: 0; 
    margin: 5px 0 0 0;
}
 
.infobox-widget ul li a {
    text-decoration: none;
}
 
.infobox-widget-description {
    line-height: 20px;
}
 
.infobox-widget-more {
    font-weight: bold;    
}
 
.infobox-widget-more:hover {   
}
 
 
.infobox-widget .alignleft {
    margin: 0 10px 10px 0;
}
 
.infobox-widget .alignright {
    margin: 0 0 10px 10px;
}
 
.infobox-widget .aligncenter {
    margin-bottom: 10px;
}
 
.infobox-widget .inbottom {
    margin-top: 10px;
}
 
/* Social Profiles Widget
----------------------------*/
.social-profiles-widget img {
    margin: 0 4px 0 0;
} 
 
.social-profiles-widget img:hover {
    opacity: 0.8;
} 
 
/* Tabs Widget
----------------------------*/
 
.tabs-widget {
    list-style: none; 
    list-style-type: none;
    margin: 0 0 10px 0;
    padding: 0; 
    height: 26px;
}
 
.tabs-widget li {
    list-style: none; 
    list-style-type: none; 
    margin: 0 0 0 4px; 
    padding: 0; 
    float: left;
}
 
.tabs-widget li:first-child {
    margin: 0;
}
 
.tabs-widget li a {
    color: #FFFFFF;
    background: #5695C0;
    padding: 6px 16px;
    font-family: Arial, Helvetica, Sans-serif;
    font-weight: bold;
    display: block;
    text-decoration: none;
    font-size: 12px;
    line-height: 12px;
    -moz-border-radius: 5px 5px 0 0;
    -khtml-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}
 
.tabs-widget li a:hover, .tabs-widget li a.tabs-widget-current {
    background: #2B2F32;
    color: #fff;
}
 
.tabs-widget-content {
}
 
/* Tweets Widget
----------------------------*/
 
.tweets-widget ul {
    list-style-type: none; 
    list-style: none;
    margin: 0; 
    padding: 0; 
    line-height: 20px;
    font-family: Arial, Helvetica, Sans-serif; 
}
 
.tweets-widget ul li {
    list-style-type: none;
    list-style: none;
    padding: 0; 
    margin: 15px 0 0 0; 
}
 
.tweets-widget ul li:first-child {
    margin-top: 5px;
}
 
.tweets-widget li.tweets-bird {
    padding-left: 24px;
    background: url(images/tweets.png) left 2px no-repeat;
}
 
.tweets-widget a {}
 
.tweets-widget a:hover {}
 
a.tweets-widget-time {
    text-decoration: underline; 
}
 
a.tweets-widget-time:hover {
    text-decoration: none; 
}
 
/* Facebook Widget
----------------------------*/
 
.facebook-widget {
    list-style-type: none; 
    list-style: none;
    margin: 0; 
    padding: 0;
}
 
/* =COMMENTS
-------------------------------------------------------------- */
 
#comments {
    margin-bottom: 15px;
}
 
#comments p {
    margin: 5px 0 10px 0;
}
 
h3#comments-title {
    font-weight: bold;
    font-size: 20px;
    padding: 0;
    margin: 0 0 15px 0;
}
 
.commentlist { 
    list-style: none;
    margin: 0;
    padding: 0;
}
 
.commentlist li.comment {
    line-height: 24px;
    margin: 0 0 15px 0;
    padding: 0 0 0 0px;
    position: relative;
}
 
.commentlist li:last-child {
    border-bottom:none;
    margin-bottom:0;
}
 
#comments .comment-body ul,
#comments .comment-body ol {
    margin-bottom: 15px;
}
 
#comments .comment-body blockquote p:last-child {
    margin-bottom: 15px;
}
 
.commentlist .avatar {
    border: 3px solid #ffffff;
    margin-right: 10px; 
    width: 40px; 
    height: 40px; 
    vertical-align: middle;
    margin-bottom: 2px;
}
 
.comment-author {
    padding: 5px;
    display: block;
    background: #F2F2F2;
    border: 1px solid #DFDFDF;
    -moz-border-radius: 4px;
    -khtml-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}
 
.comment-author cite {
    font-style: normal;
    font-weight: bold;
}
 
.comment-author .says {
    font-style: italic;
}
 
.fn, .fn a:link, .fn a:hover, .fn a:visited {
    font-family: Arial, Helvetica, Sans-serif;
    font-size: 16px; 
    font-style: normal; 
    font-weight: bold;
    text-decoration: none;
}
 
.comment-meta {
    margin: -23px 0 0 65px;
    display: block;
    font-size: 11px;
    padding:0;
}
 
.comment-meta a:link,
.comment-meta a:visited {
    text-decoration: none;
}
.commentlist .bypostauthor {
}
.reply {
    text-align: right;
    margin-bottom: 10px;
}
 
.comment-reply-link  {
    font-size: 11px;
    font-weight: normal;
    text-decoration: none;
    background: #EDEDED;
    color: #333;
    padding: 2px 8px;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    border:  1px solid #999999;
}
 
.comment-reply-link:hover {
    background: #f5f5f5;
    color: #333333;
}
 
 
.commentlist .children {
    list-style: none;
    margin: 0;
}
 
/* Children */
 
.commentlist .children li {
    border: none;
    margin: 0;
}
 
.nocomments {
    display: none;
}
 
#comments .pingback {
    margin-bottom: 18px;
    padding-bottom: 18px;
}
 
.commentlist li.comment+li.pingback {
    margin-top: -6px;
}
 
#comments .pingback p {
    font-size: 12px;
    line-height: 18px;
    display:block;
    margin: 0;
}
 
#comments .pingback .url {
    font-style: italic;
    font-size: 13px;
}
 
/* Comments form */
 
#respond {
    overflow: hidden;
    position: relative;
    margin-bottom: 15px;
}
 
h3#reply-title {
    font-weight: bold;
    font-size: 20px;
    padding: 0;
    margin: 0 0 15px 0;
}
 
#respond .required {
    color:#FF4B33;
}
 
#respond .comment-notes {
    margin-bottom: 1em;
}
 
.form-allowed-tags {
    display: none;
}
 
.children #respond {
    margin: 0 48px 0 0;
}
 
#comments-list #respond {
    margin: 0 0 18px 0;
}
 
#comments-list ul #respond {
    margin: 0;
}
 
#cancel-comment-reply-link {
    font-size: 12px;
    line-height: 18px;
    font-weight: normal;
}
 
#respond .required {
    color:#FF4B33;
    font-weight:bold;
}
 
#respond label {
    font-size: 12px;
    font-weight: bold;
}
 
#respond input {
    margin:10px 0 0 0;
    width:98%;
}
 
#respond textarea {
    width:98%;
    margin:10px 0 0 0;
}
 
#respond .form-allowed-tags {
    font-size: 12px;
    line-height: 18px;
}
 
#respond .form-allowed-tags code {
    font-size: 11px;
}
 
#respond input[type=submit] {
    margin: 0;
}
 
#respond .form-submit {
    margin: 0;
}
 
#respond .form-submit input {
    width: auto;
    font-size: 14px;
}
#respond dl {
    margin: 0 0 10px;
}
 
#respond dt {
    display: inline;
    font-weight: normal;
}
 
#respond dd {
    display: inline;
}
 
/* =END
-------------------------------------------------------------- */
/* =RESPONSIVE
-------------------------------------------------------------- */
 
.menu-primary-responsive-container, .menu-secondary-responsive-container  {
    display: none;
    margin: 10px;
}
 
.menu-primary-responsive, .menu-secondary-responsive  {
    width: 100%;
    padding: 5px;
    border: 1px solid #ddd;
}
 
 
/* Tablets ----------- */
 
@media only screen and (max-width: 768px) {
 
     #container, #footer-container {
    	width: 100%;
    }
 
    #main, 
    #main-fullwidth, 
    #header, 
    #footer-widgets,
    #footer {
        padding-left: 10px;
        padding-right: 10px;
    }
 
    #main, #main-fullwidth {
        background-image: none;
    }
 
    #header {
        height: 100%;
        padding-top: 10px;
        padding-bottom: 10px;
    }
 
    .logo, .header-right {
        float: none;
        text-align: center;
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
    }
 
    .header-right {
        padding-top: 10px;
    }
 
    #topsearch {
        float: none;
        width: 96%;
        margin: 10px 2%;
    }
 
    #header #topsearch {
        margin-left: 0;
        margin-right: 0;
        width: 100%; 
    }
 
    #top-social-profiles {
        float: none;
        width: 100%;
        display: block;
        text-align: center;
    }
 
    #content, #sidebar-primary, #sidebar-secondary {
    	width: 100%;
        float: none;
        padding: 0;
        margin: 0;
        display: block;
    }
 
    .menu-primary-container, .menu-secondary-container {
        float: none;
        margin-left: 0;
        margin-right: 0;
        display: block;
    }
 
    .fp-slider, #fb-root {
        display: none;
    }
 
    .post-box {
        width: 100%;
        height: 100%;
        float: none;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }
 
    #footer-widgets-container #footer-widgets {
        width: inherit;
    }
 
    .footer-widget-box {
        width: 100%;
        float: none;
        margin: 0;
        padding: 0;
    }
    #copyrights, #credits {
        display: block;
        float: none;
        text-align: center;
    }
 
    #footer-container #copyrights, #footer-container #credits {
        padding: 5px 0;
    }
 
    #footer-container #footer {
        width: auto;
        padding-left: 100px;
        padding-right: 10px;
    }
 
}
 
/* Mobile Phones ----------- */
 
@media only screen and (max-width: 480px) {
 
    .menu-primary-responsive-container, .menu-secondary-responsive-container {
        display: block;
    }
 
    .menu-primary-container, .menu-secondary-container {
        display: none;
    }
 
    #header .menu-primary-responsive-container, #header .menu-primary-responsive-container {
        margin-left: 0;
        margin-right: 0;
        width: 100%; 
    }
}
 
/* Some General Formattings ----------- */
 
embed,
img,
object,
video,
.wp-caption {
	max-width: 100%;
}
 
img {
	height: auto;
}
 
/* WooCommerces ----------- */
 
.woocommerce .content, .woocommerce #main-fullwidth {
    background: #fff;
}
 
.variations .label {
    background-color:inherit;
    color: inherit;
    display: block !important;
    font-size: inherit;
    font-weight: inherit;
    line-height:inherit;
    text-shadow: none;
    vertical-align: inherit;
    white-space: inherit;
    padding: 8px 8px 8px 0 !important;
} 
.woocommerce input[type="text"], .woocommerce input[type="password"], .woocommerce input.text, .woocommerce input.title, .woocommerce textarea, .woocommerce select {
    margin: 0;  
    padding: 4px !important;
}
 
.quantity input[type="text"], .quantity input.text, .quantity input{
    margin: 0;  
    padding: 0 !important;
}
 
.woocommerce img {
    width: auto !important;
    height: auto !important;
}

Filmguy2013
Filmguy2013's picture
Offline
newbie
Last seen: 7 years 26 weeks ago
Timezone: GMT-4
Joined: 2013-10-24
Posts: 7
Points: 9

Hello? Anyone?

Hello? Anyone?

csscr
csscr's picture
Offline
Enthusiast
Last seen: 3 years 27 weeks ago
Timezone: GMT+7
Joined: 2003-03-12
Posts: 126
Points: 55

Hi Filmguy2013, Have you

Hi Filmguy2013,
Have you thought about using percentages for column widths.
Basically what is happening is the columns with fixed widths can't sit beside each other when the screen is less then the total of the columns and margins etc.

Filmguy2013
Filmguy2013's picture
Offline
newbie
Last seen: 7 years 26 weeks ago
Timezone: GMT-4
Joined: 2013-10-24
Posts: 7
Points: 9

Thank you for the reply,

Thank you for the reply, CSSCR. Do you know what CSS code I would use to do that? Sorry, I am a total noob when it comes to custom CSS.