The top of what and the bottom of what? Please try to phrase your descriptions more completely. If all else fails, annotated screen shots help.
Have you solved the issue with the horizontal scroll bar?
The top of the webpage to move down 20px and the bottom of the webpage to move up 20px. I was not able to fix the horizontal scroll bar as shown in the screen shot.
Also how do I make the background blue without making the 600px site blue? Seems if I change the background color the whole webpage turns that color.
I have attached a screen shot of what I want the webpage to look like.
Thanks
OK. While weâre waiting for the attachment to be approved, let me ask for clarification about âmoving the bottom of the page up 20pxâ. Do you actually mean that you want the height of the page reduced by 40px 
, or do you want to add 20px of empty space beneath the bottom of the page? :nod: ?
Is the page on a server so we can access the code? I ask because I cannot reproduce a horizontal scroll bar here, so there must be more code in the picture than just the code that you have posted. Maybe the links for which there is no full URL, are accessing code that I donât see that is causing the scrollbar. Somehow, I need to be able to see the code that is causing that problem.
Thanks
20px of empty space on the top and bottom of the webpage. I dont have the webpage on a server sorry.
Thanks
Well body{} doesnât have margin/padding set to 0 (you actually have no reset set) so make sure you do that. Then the top section is still 30px down from the page because of the 30px padding you set on the header.
The screen shot of your objective layout is very good to see.
Because you are asking for a fixed width layout, it appears that you do not wish to use the responsive capabilities of bootstrap. That eliminates the need for a good bit of your CSS. 
Iâm not sure that you can achieve that static layout as it is drawn with any degree of flexibility for user differences in fonts/font sizes, though. It seems too narrow. There is not room for the longest menu items with their icons without wrapping their text⌠which in turn unbalances that nice regular layout. Maybe 800px wide would allow a little breathing room for most users, but even that would be snug. You can reduce your designated font size, but users will be obligated to increase it again so they can read it, which will unbalance the layout again.
Iâm inclined to recommend a different approach to the 3 column layout that will maintain 3 equal height columns while allowing the menu text to wrap. That will change the HTML a bit.
Are you are just trying to change one of the breakpoints in the bootstrap layout (instead of asking for a fixed with page, which seems like an odd thing to do)? I may be misinterpreting your objectives, so let me know.
The blue background is very simple. Set blue background to body{} and on #outer{} just set background to white. Ron makes good points though.
⌠and then change the margins on #outer from {margin:0 auto;} to {margin:40px auto;}. That should give you the increased space at the top and bottom of the page.
I changed it to margin:40px auto; and it made the top and bottom with a space but also the entire website expanded the same so it wont work.
Thanks
In the code that I gave you earlier, #outer was assigned a width of 600px. This addition should not change the width of the site.
#outer, .container {
width:600px;
margin:0 auto;
}
[color=blue]#outer {
background-color:#fff;
margin:40px auto;
}[/color]
You may have to post your code again so we can find out itâs not behaving as expected.
Starting to look ok but the background color wont change and trying to get rid of the scroll bar on the bottom.
HTML Code:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="Register your own domain name for cheap and enjoy lifetime cPanel web hosting by only paying
one time. You only have to pay one time for our web hosting and you will have cPanel web hosting for life." />
<meta name="keywords" content="cheap cpanel web hosting, cheap cpanel reseller web hosting, cheap domain name registration"/>
<meta name="author" content="OnlyPayOnce" />
<title>Cheap cPanel Web Hosting - 97CentHosting</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<!--Fav and touch icons-->
<link rel="shortcut icon" href="img/icons/favicon.ico">
<link rel="apple-touch-icon" href="img/icons/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/icons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/icons/apple-touch-icon-114x114.png">
<!--google web font-->
<link href='http://fonts.googleapis.com/css?family=Bad+Script|Open+Sans:400,300,300italic,400italic,600,600italic'
rel='stylesheet' type='text/css'>
<!--style sheets-->
<link rel="stylesheet" media="screen" href="css/bootstrap.css"/>
<link rel="stylesheet" media="screen" href="css/bootstrap-responsive.css"/>
<link rel="stylesheet" media="screen" href="css/style.css"/>
<link rel="stylesheet" media="screen" href="css/whhg.css"/>
<link rel="stylesheet" media="screen" href="css/flexslider.css"/>
<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="css/fullwidth.css" media="screen"/>
<!--main jquery libraries / others are at the bottom-->
<script src="js/jquery-1.9.1.min.js" type="text/javascript" ></script>
<script src="js/modernizr.js" type="text/javascript"></script>
<style>
/*
Theme Name: Ciaohost
Theme URI: http://tanshcreative.com/ciaohost-st-demo/index.html
Description: Ciaohost is a responsive hosting site template designed and developed by Tansh.
Author: Tansh
*/
/*------------------------------*/
/*
PLEASE REMOVE - Useless whitespaces and comments in HTML/CSS, once you are done with customization
*/
/*------------------------------*/
/*----- Searching for particular element? -----*/
/*Here is CSS structure...
1. TEMPLATE SETUP
1.1 General styles
1.2 Typography
1.3 Spacers and divider
1.4 Image styles
1.5 Button styles
1.6 Custom list styles
2. TEMPLATE STRUCTURE
2.1 Header / Header bottom section
2.2 Slider / content-top section
2.3 Commons / content Misc section
2.4 Footer & Copyright
2.5 Pricing
2.6 Form
2.7 Filterable
3. TEMPLATE COMPONENTS
3.1 Blockquote
3.2 Tabs
3.3 Menu
3.4 accordion
4. Media queries
5. Browser fixes
*/
/*============================================================*/
/*---------- 1. TEMPLATE SETUP ----------*/
/*============================================================*/
/*----------------------------------------*/
/*----- 1.1 General styles -----*/
/*----------------------------------------*/
body {
background: #fff;
}
img, embed, object, video {
max-width: 100%;
height: auto;
}
video {
width: 100% !important;
height: auto !important;
}
iframe {
border: none !important;
}
ul, ol {
margin-bottom: 0;
}
.label, .badge {
text-shadow: none !important;
font-weight: 600;
}
.color, .color-orange, .color-green, .color-dark {
font-family: inherit;
font-weight: inherit !important;
}
/*----------------------------------------*/
/*----- 1.2 Typography -----*/
/*----------------------------------------*/
/*----- only font families are specified here -----*/
body, input[type="text"], input[type="password"], select, textarea, .submit, .mybtn, .ddsmoothmenu ul li a, .heading-styled {
font-family: Arial, Helvetica, sans-serif
}
h1, h2, h3, h4, h5, h6, .price-label, .pricing table thead th, .fr-icon {
font-family: 'Open Sans', Arial, Helvetica Neue, sans-serif;
}
.cursive {
font-family: 'Bad Script', cursive;
}
/*----- font colors / weights / sizes -----*/
/*typography for -- buttons, menu, tabs, pricing, feature styles and forms -- in their respective sections*/
/*body*/
body {
font-size: 14px;
color: #677273;
font-weight: normal;
line-height: 1.6em;
}
/*links*/
a:link {
color: #3498db;
text-decoration: none;
cursor: pointer;
font-style: normal;
outline: none;
-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
a:visited {
color: #3498db;
}
a:hover {
color: #677273;
text-decoration: none;
}
/*headings*/
h1, h2, h3, h4, h5, h6 {
margin-bottom: 15px;
margin-top: 0px;
font-weight: 600;
line-height: 1.4em;
}
h1 {
font-size: 44px;
margin-bottom: 5px;
}
h2 {
font-size: 22px;
}
h3 {
font-size: 20px;
}
h4 {
font-size: 18px;
}
h5 {
font-size: 16px;
}
h6 {
font-size: 14px;
}
h1, h2, h3, h4, h5, h6, h1 a:link, h2 a:link, h3 a:link, h4 a:link, h5 a:link, h6 a:link, .heading-styled {
color: #131415;
}
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span {
font-weight: 400;
}
/*cursive*/
.cursive {
font-size: 20px;
color: #131415;
font-weight: 400;
margin-bottom: 15px;
}
/*heading-styled*/
.heading-styled {
font-size: 20px;
font-weight: bold;
line-height: 1.1em;
}
.heading-styled span {
display: block;
font-size: 12px;
color: #3498db;
font-weight: bold;
}
.heading-styled span a:link, .heading-styled span a:visited {
display: block;
font-size: 12px;
color: #3498db;
}
.heading-styled span a:hover {
color: #677273;
}
/*color classes*/
.color {
color: #3498db !important;
}
.color-orange {
color: #f05722 !important;
}
.color-green {
color: #27ae60 !important;
}
.color-dark {
color: #131415 !important;
}
/*size classes*/
.text-small {
font-size: 12px;
}
.text-big {
font-size: 20px;
}
/*----- Other typography -----*/
.team h6 {
margin-bottom: 0;
}
.blogpost h4 {
margin-bottom: 0;
}
#copyright {
font-size: 12px;
}
#copyright a:link, #copyright a:visited {
color: #677273;
}
#copyright a:hover {
color: #3498db;
}
/*----------------------------------------*/
/*----- 1.3 Spacers and dividers -----*/
/*----------------------------------------*/
/*use suitable height spacer for vertical spacing*/
.spacer-10px, .spacer-20px, .spacer-40px {
width: 100%;
height: 10px;
display: block;
clear: both;
}
.spacer-20px {
height: 20px !important;
}
.spacer-40px {
height: 40px !important;
}
/*divider*/
.divider-line, .divider-line-narrow, .divider-line-var {
background: #e5e9ea;
width: 100%;
height: 1px;
margin: 40px auto;
display: block;
clear: both;
position: relative;
}
.divider-line-narrow {
margin: 20px 0;
}
.divider-line-var {
margin: 0;
}
.divider-line .arrow-down, .divider-line-var .arrow-down {
position: absolute;
left: 50%;
top: -27px;
margin-left: -23px;
}
/*----------------------------------------*/
/*----- 1.4 Image styles -----*/
/*----------------------------------------*/
.img-left {
float: left;
margin-right: 20px;
margin-bottom: 10px;
}
.img-right {
float: right;
margin-left: 20px;
margin-bottom: 10px;
}
.mythumb {
margin-bottom: 20px;
}
/*----------------------------------------*/
/*----- 1.5 Button styles -----*/
/*----------------------------------------*/
.mybtn {
background: #27ae60;
padding: 8px 15px;
margin: 10px 0;
font-size: 14px;
color: #fff !important;
font-weight: bold;
line-height: 14px;
text-align: center;
border: 1px solid #27ae60;
cursor: pointer;
display: inline-block;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 14px 0 0 rgba(255, 255, 255, .12) inset;
-webkit-box-shadow: 0 14px 0 0 rgba(255, 255, 255, .12) inset;
box-shadow: 0 14px 0 0 rgba(255, 255, 255, .12) inset;
}
.mediumbtn {
padding: 13px 45px;
-moz-box-shadow: 0 20px 0 0 rgba(255, 255, 255, .12) inset;
-webkit-box-shadow: 0 20px 0 0 rgba(255, 255, 255, .12) inset;
box-shadow: 0 20px 0 0 rgba(255, 255, 255, .12) inset;
}
.bigbtn {
padding: 18px 40px;
-moz-box-shadow: 0 27px 0 0 rgba(255, 255, 255, .12) inset;
-webkit-box-shadow: 0 27px 0 0 rgba(255, 255, 255, .12) inset;
box-shadow: 0 27px 0 0 rgba(255, 255, 255, .12) inset;
}
/*hovers*/
.mybtn:hover {
-moz-box-shadow: 0 29px 0 0 rgba(255, 255, 255, .12) inset;
-webkit-box-shadow: 0 29px 0 0 rgba(255, 255, 255, .12) inset;
box-shadow: 0 29px 0 0 rgba(255, 255, 255, .12) inset;
}
.mediumbtn:hover {
-moz-box-shadow: 0 38px 0 0 rgba(255, 255, 255, .12) inset;
-webkit-box-shadow: 0 38px 0 0 rgba(255, 255, 255, .12) inset;
box-shadow: 0 38px 0 0 rgba(255, 255, 255, .12) inset;
}
.bigbtn:hover {
-moz-box-shadow: 0 48px 0 0 rgba(255, 255, 255, .12) inset;
-webkit-box-shadow: 0 48px 0 0 rgba(255, 255, 255, .12) inset;
box-shadow: 0 48px 0 0 rgba(255, 255, 255, .12) inset;
}
/*----------------------------------------*/
/*----- 1.6 Custom list styles -----*/
/*----------------------------------------*/
.list-checkmark, .myunstyled, .inline-right, .inline-left, .blocked-links, .social, .pricing table ul {
background: none;
list-style-type: none;
margin: 0;
padding: 0;
}
.list-checkmark ul, .myunstyled ul {
margin-top: 10px;
}
/*checkmark list*/
.list-checkmark li {
background: url(../img/bullet-checkmark.png) no-repeat 0 5px;
padding-left: 25px;
margin-bottom: 15px;
display: block;
overflow: hidden;
}
/*myunstyled list*/
.myunstyled li {
margin-bottom: 20px !important;
display: block;
overflow: hidden;
}
.submenu li {
margin-bottom: 10px !important;
}
/*inline - left & right aligned list*/
.inline-right {
float: right;
}
.inline-right li {
margin-left: 20px;
display: inline-block;
}
.inline-left {
float: left;
}
.inline-left li {
margin-right: 20px;
display: inline-block;
}
.inline-right img, .inline-left img {
margin-right: 7px;
float: left;
}
/*inline links with colored background*/
.blocked-links li {
margin: 0 3px 3px 0 !important;
float: left;
}
.blocked-links li a:link {
background: #bdc3c7;
padding: 8px 15px;
font-size: 13px;
color: #fff;
line-height: 1em;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
float: left;
}
.blocked-links li a:hover {
background: #3498db;
color: #fff;
}
/*============================================================*/
/*---------- 2. TEMPLATE STRUCTURE ----------*/
/*============================================================*/
/*----------------------------------------*/
/*----- 2.1 Header / Header bottom section -----*/
/*----------------------------------------*/
#header {
padding: 30px 0;
border-bottom: 1px solid #e5e9ea;
}
/*----- header bottom -----*/
#header-bottom {
padding: 20px 0;
border-bottom: 3px solid #dfe6eb;
}
#header-bottom .inline-right li {
margin-left: 10px;
}
#header-bottom .inline-right img {
margin: 0;
}
#header-bottom h4 {
margin: 0;
}
#header-bottom .mybtn {
margin-top: 7px;
margin-bottom: 0;
}
/*----------------------------------------*/
/*----- 2.2 Slider / content-top section -----*/
/*----------------------------------------*/
#slider-wrapper, #slider-wrapper-var {
background-image: url(../img/shadow.png), url(../img/slide-bg.jpg);
background-repeat: no-repeat, no-repeat;
background-position: center top;
}
/*----------------------------------------*/
/*----- 2.3 Commons / Content / Misc section -----*/
/*----------------------------------------*/
#content-home, #content {
background: url(../img/shadow.png) no-repeat center top;
padding: 30px 0 40px 0;
}
#content-home {
background: none;
padding: 40px 0;
border-top: 1px solid #e5e9ea;
}
/*----- sidebars -----*/
.sidebar-right {
padding-left: 20px;
}
.sidebar-left {
padding-right: 20px;
}
/*----- content-top -----*/
#content-top {
padding-bottom: 30px;
text-align: center;
}
#content-top p {
margin: 0;
}
/*----- others -----*/
.pos-rel {
position: relative;
}
.map {
background: url(../img/preview/map.png) no-repeat center top;
padding: 40px 0;
margin-bottom: 40px;
border-bottom: 1px solid #e5e9ea;
}
.box {
background: #f3f7f8;
padding: 20px;
border: 1px solid #e5e9ea;
}
.row-color {
background: #f3f7f8;
padding: 30px 0;
border: 1px solid #e5e9ea;
border-width: 1px 0 1px 0;
}
.number {
background: #3498db;
width: 26px;
height: 26px;
font-size: 14px;
color: #fff;
font-weight: 600;
line-height: 26px;
text-align: center;
-webkit-border-radius: 26px;
-moz-border-radius: 26px;
border-radius: 26px;
float: left;
margin-right: 10px;
}
/*----- feature styles -----*/
/*features with icons in circle*/
.icon-circle {
background: #fff !important;
width: 80px;
height: 80px;
border: 1px solid #bdc3c7;
-webkit-border-radius: 80px;
-moz-border-radius: 80px;
border-radius: 80px;
}
.icon-circle img {
-webkit-border-radius: 80px;
-moz-border-radius: 80px;
border-radius: 80px;
}
.fr-icon-circle {
text-align: center;
}
.fr-icon-circle img {
margin-bottom: 10px;
}
/*features with icons*/
.fr-icon {
font-size: 13px;
color: #131415;
line-height: 1.4em;
font-weight: bold;
}
.fr-icon p {
font-weight: normal;
color: #677273;
margin-top: 10px;
}
.fr-icon i, .fr-icon img {
margin-right: 10px;
color: #bdc3c7;
font-size: 30px;
line-height: 1em;
float: left;
margin-right: 10px;
}
.fr-support i {
margin-top: -7px;
}
.fr-support p {
font-weight: normal;
color: #677273;
margin-top: 20px;
}
.fr-icon a {
font-weight: normal;
}
/*features with only icons to left*/
.fr-icon-left i, .fr-icon-left img {
margin-right: 20px;
margin-bottom: 95px;
color: #bdc3c7;
font-size: 32px;
line-height: 1em;
float: left;
}
/*features with images*/
.fr-img img {
margin-bottom: 20px;
}
/*----- social -----*/
.social li {
background: #bdc3c7;
width: 26px;
height: 26px;
margin-right: 1px;
-webkit-border-radius: 26px;
-moz-border-radius: 26px;
border-radius: 26px;
-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
list-style-type: none;
display: inline-block;
}
.social li:hover {
background: #3498db;
}
/*----- review-slider -----*/
.review-slider {
margin-top: 20px !important;
}
.review-slider span {
display: block;
margin-top: 10px;
font-size: 12px;
}
/*----- flex slider with content -----*/
#slider-wrapper-var {
padding: 40px 0;
}
#slider-wrapper-var h1 {
font-size: 38px;
line-height: 1.1em
}
#slider-wrapper-var .list-checkmark {
margin-top: 20px;
}
#slider-wrapper-var .list-checkmark li {
margin-bottom: 20px !important;
}
.flex-text-padding {
padding-top: 60px;
}
/*-- twitter feed --*/
.tweet_list, .tweet_list li {
background: none;
list-style-type: none;
margin: 0;
padding: 0;
}
.tweet_time {
font-size: 12px;
margin-bottom: 5px;
display: block;
}
/*----------------------------------------*/
/*----- 2.4 footer and copyright section -----*/
/*----------------------------------------*/
#footer {
background: #f3f7f8;
padding: 30px 0;
border-top: 1px solid #e5e9ea;
}
/*-- payment --*/
.payment li {
margin-right: 1px;
}
.payment img {
margin: 0;
}
/*----- copyright -----*/
#copyright {
background: #ecf0f1;
padding: 15px 0;
border-top: 3px solid #dfe6eb;
}
#copyright p {
float: right;
margin-bottom: 0;
}
/*----------------------------------------*/
/*----- 2.5 Pricing -----*/
/*----------------------------------------*/
.pricing-wrapper {
padding-top: 50px;
}
.pricing {
background: #fff;
border: 2px solid #dfe6eb;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
position: relative;
-webkit-transition: all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.pricing:hover {
border: 2px solid #3498db;
}
.pricing table {
width: 100%;
text-align: center;
}
.pricing table thead th {
width: auto;
padding: 60px 20px 20px 20px;
font-size: 22px;
color: #131415;
font-weight: 600;
text-align: center;
}
.pricing table tbody td {
width: auto;
padding: 0 20px;
font-size: 12px;
}
.pricing table tfoot td {
padding: 20px;
text-align: center;
}
.pricing table ul {
display: block;
}
.pricing table ul li {
background: #ecf0f1;
padding: 10px 15px;
margin-bottom: 1px;
font-size: 13px;
color: #677273;
text-align: left;
}
/*price label*/
.pricing table .label-wrapper {
position: relative;
}
.price-label {
background: #3498db;
width: 70px;
height: 48px;
padding: 21px 10px;
font-size: 20px;
color: #fff;
font-weight: 600;
line-height: 1em;
text-align: center;
position: absolute;
top: -110px;
left: 50%;
margin-left: -49px;
border: 4px solid #fff;
-webkit-border-radius: 90px;
-moz-border-radius: 90px;
border-radius: 90px;
}
.price-label span {
font-size: 14px;
font-weight: 400;
line-height: 1.2em;
display: block;
}
/*pricing button*/
.pricing .mybtn {
padding-left: 5%;
padding-right: 5%;
width: 90%;
}
.hosting-list li {
font-size: 13px;
}
.hosting-list i, .hosting-list img {
margin-right: 20px;
color: #bdc3c7;
font-size: 14px;
}
.hosting-list li .tooltip-arrow {
display: none;
}
/*----------------------------------------*/
/*----- 2.6 Forms -----*/
/*----------------------------------------*/
form {
margin: 0;
padding: 0;
}
form p {
margin-bottom: 20px !important;
}
/*errors*/
label.error {
font-size: 11px;
color: red;
line-height: 1.6em;
font-weight: normal;
}
input.error, textarea.error, password.error {
border-color: #C00 !important;
box-shadow: none;
}
/*label and inputs*/
label {
width: 100%;
font-size: 12px;
font-weight: bold;
}
input[type="text"], input[type="password"], select, textarea {
background-color: #fff;
width: 95.5%;
height: 30px;
padding: 10px 2%;
margin-bottom: 0;
font-size: 14px;
color: #677273;
line-height: 18px;
display: inline-block;
border: 1px solid #bdc3c7;
-webkit-transition: border linear 0.2s;
-moz-transition: border linear 0.2s;
-ms-transition: border linear 0.2s;
-o-transition: border linear 0.2s;
transition: border linear 0.2s;
box-shadow: none;
}
textarea {
height: auto;
}
select {
width: 99.7%;
height: 52px;
padding-left: 0;
line-height: 38px;
text-indent: 4px;
color: #677273 !important;
font-weight: normal;
}
textarea:focus, input[type="text"]:focus, input[type="password"]:focus {
box-shadow: none;
border-color: rgba(82, 168, 236, 0.8) !important;
opacity: 1 !important;
}
::-webkit-input-placeholder {
color: #ccc9c6 !important;
opacity: 1;
}
:-moz-placeholder {
color: #ccc9c6 !important;
opacity: 1;
}
::-moz-placeholder {
color: #ccc9c6 !important;
opacity: 1;
}
:-ms-input-placeholder {
color: #ccc9c6 !important;
opacity: 1;
}
/*submit button*/
.submit {
background: #27ae60;
width: auto !important;
height: 52px;
padding: 0 40px;
margin-bottom: 10px;
font-size: 14px;
color: #fff !important;
font-weight: bold;
line-height: 14px;
text-align: center;
border: 1px solid #27ae60;
cursor: pointer;
display: inline-block;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 25px 0 0 rgba(255, 255, 255, .12) inset;
-webkit-box-shadow: 0 25px 0 0 rgba(255, 255, 255, .12) inset;
box-shadow: 0 25px 0 0 rgba(255, 255, 255, .12) inset;
-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.submit:hover {
-moz-box-shadow: 0 48px 0 0 rgba(255, 255, 255, .12) inset;
-webkit-box-shadow: 0 48px 0 0 rgba(255, 255, 255, .12) inset;
box-shadow: 0 48px 0 0 rgba(255, 255, 255, .12) inset;
}
.antispam {
display:none;
}
/*----- domainform specific -----*/
#domainform input {
float: left;
width: 50%;
margin-right: 4px;
}
#domainform .submit {
width: 18%;
padding: 0 4%;
height: 52px;
float: left;
}
#domainform select {
width: 12%;
height: 52px;
padding-left: 0;
line-height: 52px;
text-indent: 4px;
float: left;
margin-right: 4px;
font-weight: bold;
}
/*----- login form specific -----*/
.login-box {
background: #f3f7f8;
width: auto !important;
padding: 20px;
margin: 0 auto !important;
border: 1px solid #e5e9ea;
}
/*----- signup form specific -----*/
.first-field {
width: 48%;
float: left;
}
.second-field {
width: 48%;
float: left;
margin-left: 4%;
}
#signupform .submit {
margin-top: 10px;
}
.check-error {
position: relative;
}
.check-error label.error {
position: absolute;
top: 8px;
left: 20px;
}
.first-field input[type="text"], .first-field input[type="password"], .first-field textarea, .second-field input[type="text"],
.second-field input[type="password"], .second-field textarea {
text-align: left;
font-weight: normal;
}
/*----- header serch form -----*/
.search-header {
float: left;
margin: 0 0 0 0px;
position: relative;
right: 0;
top: 0;
}
.search-header form {
float: left;
}
.search-header ::-webkit-input-placeholder {
color: #bdc3c7 !important;
opacity: 1;
}
.search-header :-moz-placeholder {
color: #bdc3c7 !important;
opacity: 1;
}
.search-header ::-moz-placeholder {
color: #bdc3c7 !important;
opacity: 1;
}
.search-header :-ms-input-placeholder {
color: #bdc3c7 !important;
opacity: 1;
}
/*----------------------------------------*/
/*----- 2.7 Filterable -----*/
/*----------------------------------------*/
.filter_nav {
margin: 0;
}
.filter_nav li {
list-style-type: none;
float: left;
}
.filter_nav li a:link {
background: #3498db;
padding: 8px 15px;
margin: 0 20px 20px 0;
font-size: 12px;
color: #fff !important;
font-weight: 600;
line-height: 1em;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
float: left;
}
.filter_nav li a:hover {
background: #bdc3c7 !important;
color: #fff;
}
.filter-content img {
width: 100%;
}
.item {
margin-bottom: 30px;
}
/*folio-thumb*/
.folio-thumb {
position: relative;
overflow: visible;
height: auto;
border: 1px solid #dfe6eb;
}
.folio-thumb .zoom, .folio-thumb .video-play {
background: url(../img/icons/zoom.png) 0 0 no-repeat transparent;
width: 40px;
height: 40px;
position:absolute;
outline: none;
display: none;
z-index: 99;
opacity: 1;
left: 50%;
top: 50%;
margin-left: -20px;
margin-top: -20px;
-moz-transition: 0s;
-webkit-transition: 0s;
-o-transition: 0s;
transition: 0s;
opacity: 1;
}
.folio-thumb .video-play {
background: url(../img/icons/video.png) 0 0 no-repeat transparent;
}
.folio-thumb .zoom:hover, .folio-thumb .video-play {
opacity: 0.7;
}
.img-overlay {
background-color: #000;
width: 100%;
height: 100%;
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 9;
opacity: 0.5;
}
/*============================================================*/
/*---------- 3. TEMPLATE COMPONENTS ----------*/
/*============================================================*/
/*----- 3.1 Blockquote -----*/
blockquote {
padding: 7px 0 10px 15px;
margin: 0 20px 10px 0;
border-left: 2px solid #509fb9;
}
blockquote p {
font-size: 24px;
font-style: italic;
line-height: 1.4em;
margin-bottom: 0;
padding: 0;
}
blockquote.pull-right {
border-right: 2px solid #509fb9;
margin: 0 0 10px 20px;
}
/*----- 3.2 Tabs -----*/
.nav-tabs {
font-size: 14px;
font-weight: 600;
margin-bottom: 0;
border-bottom: 1px solid #e5e3e1;
}
.nav-tabs > li > a {
background: #fff;
border: 1px solid #e5e3e1;
}
.nav-tabs > li > a:hover {
color: #403e3d;
border: 1px solid #e5e3e1;
border-bottom-color: transparent;
}
.nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus {
background-color: #fff;
border-bottom-color: transparent;
}
.nav-tabs > .active > a:focus {
color: #403e3d;
}
.nav-tabs i {
margin-right: 5px;
}
.tab-content {
padding: 10px;
border: 1px solid #e5e3e1;
border-width: 0 1px 1px 1px;
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
}
/*----- 3.3 Menu / Navigation -----*/
.ddsmoothmenu {
margin-top: 9px;
width: auto;
display: block;
float: left;
}
/*ul*/
.ddsmoothmenu ul {
background: transparent;
margin: 0;
padding: 0;
list-style-type: none;
z-index:100;
float: left;
}
.ddsmoothmenu ul li ul {
background: #fff;
margin-left: -15px;
position: absolute;
left: 0;
float: none;
display: none;
overflow: visible;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 2px 2px 1px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 2px 2px 1px rgba(0, 0, 0, .2);
box-shadow: 0 2px 2px 1px rgba(0, 0, 0, .2);
}
.ddsmoothmenu ul li ul li ul {
margin-left: 7px;
margin-top: -1px;
top: 0;
}
/*li*/
.ddsmoothmenu ul li {
position: relative;
display: inline;
float: left;
}
.ddsmoothmenu ul li ul li {
display: list-item;
float: none;
box-shadow: none !important;
}
.ddsmoothmenu ul li ul li:first-child a {
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
.ddsmoothmenu ul li ul li:last-child a {
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
border-bottom: 0;
}
/*a*/
.ddsmoothmenu ul li a {
padding: 7px 40px 10px 0;
margin: 0;
font-size: 15px;
color: #677273;
font-weight: bold;
line-height: 1em;
text-decoration: none;
outline: none;
display: block;
-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.31s ease;
transition: all 0.3s ease;
}
.ddsmoothmenu ul li a:visited {
color: #677273;
}
.ddsmoothmenu ul li a:hover, .ddsmoothmenu ul li a.selected {
color: #3498db;
}
.ddsmoothmenu ul li ul li a {
width: 170px; /*width of sub menus*/
padding: 15px;
margin: 0;
font-size: 13px !important;
color: #677273 !important;
line-height: 1em;
font-weight: 400;
border: 0;
text-transform: none;
display: block;
background: #fff;
}
.ddsmoothmenu ul li li a:hover, .ddsmoothmenu ul li li a.selected {
background: #3498db;
color: #fff !important;
}
* html .ddsmoothmenu ul li a { /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
color: #000;
}
/* Holly Hack for IE \\*/
* html .ddsmoothmenu {
height: 1%;
}
/* CSS classes applied to down and right arrow images */
.downarrowclass {
margin-left: 6px;
}
.rightarrowclass {
display: none;
}
/*Menu select for responsive*/
.ddsmoothmenu select {
background: #222;
width: 100%;
height: auto;
padding: 5px 10px;
margin: 0 auto;
font-size: 13px;
color: #fff !important;
border: 1px solid #222;
outline: none;
display: none;
cursor: pointer !important;
}
/*----- 3.4 accordion -----*/
.accordion-group {
border: 1px solid #e5e9ea;
}
.accordion-inner {
border-top: 1px solid #e5e9ea;
}
.accordion-heading {
background: #f3f7f8;
}
/*============================================================*/
/*---------- 4. MEDIA QUERIES ----------*/
/*============================================================*/
/*----------------------------------------*/
/*----- 4.1 Mobile (Portrait) -----*/
/*----------------------------------------*/
@media only screen and (max-width: 767px) {
body {
padding: 0;
}
.container {
margin-left: 20px;
margin-right: 20px;
}
.sidebar-right {
padding-left: 0;
margin-bottom: 10px;
}
.sidebar-left {
padding-right: 0;
margin-bottom: 10px;
}
h1 {
font-size: 30px;
}
blockquote p {
font-size: 18px;
}
/*menu*/
.ddsmoothmenu ul {
display: none;
}
.ddsmoothmenu {
float: none;
margin: 0;
}
.ddsmoothmenu select {
width: 100% !important;
float: none;
display: block;
margin-bottom: 20px;
}
/*header*/
#header {
text-align: center;
}
.search-header {
display: none;
}
.social {
text-align: center;
width: 100%;
margin-top: 20px;
}
#header-bottom .mybtn {
display: none;
}
#header-bottom .inline-right {
float: left;
}
#header-bottom .inline-right li {
margin-left: 0;
}
/*footer & copyright*/
#footer .social {
text-align: left;
}
#copyright {
text-align: center;
}
#copyright ul {
float: none;
}
#copyright p {
float: none;
margin-top: 10px;
}
#copyright .inline-left li {
margin-left: 10px;
margin-right: 10px;
display: inline-block;
}
/*domain form*/
#domainform input {
float: none;
width: 90%;
display: block;
margin-bottom: 10px;
}
#domainform select {
width: 95%;
float: none;
display: block;
margin-bottom: 10px;
}
#domainform .submit {
width: 90%;
float: none;
}
/*others*/
.team img {
display: block !important;
margin: 0 0 10px 0;
float: none;
}
.team .text-right {
text-align: left !important;
}
.pricing {
margin-bottom: 60px;
}
.fr-icon div {
margin-bottom: 10px;
}
.blogpost .social {
text-align: left;
margin-bottom: 10px;
}
.first-field {
width: 100% !important;
float: none;
display: block;
}
.second-field {
width: 100% !important;
float: none;
margin: 0 !important;
display: block;
}
#slider-wrapper-var {
background: #f3f7f8;
background-image: none;
}
#slider-wrapper-var h1 {
font-size: 30px;
}
}
/*----------------------------------------*/
/*----- 4.2 Mobile (Landscape) -----*/
/*----------------------------------------*/
@media only screen and (min-width: 480px) and (max-width: 767px) {
/*All are same as Portrait*/
}
/*----------------------------------------*/
/*----- 4.3 Tablet / ipad -----*/
/*----------------------------------------*/
@media (min-width: 768px) and (max-width: 1024px) {
.ddsmoothmenu ul li a {
padding: 7px 20px 10px 0;
}
.sidebar-right {
padding-left: 0;
}
.sidebar-left {
padding-right: 0;
}
.heading-styled {
font-size: 18px;
}
h1 {
font-size: 32px;
}
#domainform input {
float: left;
width: 43%;
margin-right: 4px;
}
#domainform select {
width: 19%;
}
.pricing table thead th {
font-size: 20px;
}
.pricing table img {
width: 100%;
}
.team img {
display: block !important;
margin: 0 0 10px 0;
float: none;
}
.team .text-right {
text-align: left !important;
}
.fr-icon-left i, .fr-icon-left img {
margin-bottom: 120px;
}
#slider-wrapper-var h1 {
font-size: 30px;
}
}
/*============================================================*/
/*---------- 5. BROWSER FIXES ----------*/
/*============================================================*/
/*safari*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
#domainform select {
width: 12%;
height: 52px !important;
padding-left: 0;
line-height: 46px !important;
text-indent: 4px;
float: left;
margin-right: 4px;
}
#signupform select {
height: 52px !important;
padding-left: 0;
line-height: 46px !important;
text-indent: 4px;
}
}
/*IE8*/
@media \\0screen {
.ddsmoothmenu ul li ul li a {
background: #eee;
}
}
#outer, .container {
width:872px;
margin:0 auto;
top:40px auto;
bottom:40px auto;
}
#outer {
background-color:#fff;
margin:40px auto;
}
</style>
</head>
<body bgcolor="#000000">
<div id="outer">
<!-- header / header-bottom section starts
================================================== -->
<section id="header">
<div class="container">
<div class="row">
<!--logo starts-->
<div class="span4"> <a href="#"><img src="img/logo.png" height="26" width="331" alt="logo"></a> </div>
<!--logo ends-->
</div>
</div>
</section>
<!--header ends-->
<!--header-bottom starts-->
<section id="header-bottom">
<div class="container">
<div class="row">
<!--menu starts-->
<div class="span8">
<div id="smoothmenu" class="ddsmoothmenu">
<ul>
<li><a href="index.html" class="selected">Home</a></li>
<li><a href="contact.html">Contact</a> </li>
<li><a href="support.html">Support</a></li>
</ul>
</div>
<a href="#sign-up" class="mybtn">Sign-Up</a>
</div>
<!--menu ends-->
<!--call / mail starts-->
<div class="span4">
<ul class="inline-right">
<li><img src="img/icons/icon-call-mail.png" alt="icon"></li>
<li>
<h4 class="heading-styled text-right">LIVE CHAT <font color="#27AE60">ONLINE <span><a
href="#">support@97centhosting.com</a></span> </h4>
</li>
</ul>
</div>
<!--call / mail ends-->
</div>
</div>
</section>
<!--header-bottom ends-->
<!-- header / header-bottom section ends
================================================== -->
<!-- content section starts
================================================== -->
<section id="content">
<div class="container" id="sign-up">
<!--row for pricing starts-->
<div class="row">
<div class="pricing-wrapper">
<!--table one starts-->
<div class="span3">
<div class="pricing">
<table>
<thead>
<tr>
<th> <div class="label-wrapper">
<div class="price-label"> $0.97<span>/month</span> </div>
</div>
<font size="3">Hosting Plan</font> </th>
</tr>
</thead>
<tfoot>
<tr>
<td><a href="#" class="mybtn bigbtn">Sign-Up Now</a></td>
</tr>
</tfoot>
<tbody>
<tr>
<td><img src="img/preview/server-1.png" alt="icon"></td>
</tr>
<tr>
<td><ul class="hosting-list">
<li><i class="icon-info-sign"></i>Unlimited Space</li>
<li><i class="icon-info-sign"></i>Unlimited Bandwidth</li>
<li><i class="icon-info-sign"></i>Unlimited Domains</li>
<li><i class="icon-info-sign"></i>Perl/PHP/MySQL/FTP</li>
<li><i class="icon-info-sign"></i>cPanel Control Panel</li>
<li><i class="icon-info-sign"></i>24 / 7 / 365 Support</li>
<li><i class="icon-info-sign"></i>30 Day Guarantee</li>
</ul></td>
</tr>
</tbody>
</table>
</div>
</div>
<!--table one ends-->
<!--table two starts-->
<div class="span3">
<div class="pricing">
<table>
<thead>
<tr>
<th> <div class="label-wrapper">
<div class="price-label"> $14.97<span>/year</span> </div>
</div>
<font size="3">Domain & Free Hosting Plan</font> </th>
</tr>
</thead>
<tfoot>
<tr>
<td><a href="#" class="mybtn bigbtn">Sign-Up Now</a></td>
</tr>
</tfoot>
<tbody>
<tr>
<td><img src="img/preview/server-2.png" alt="icon"></td>
</tr>
<tr>
<td><ul class="hosting-list">
<li><i class="icon-info-sign"></i>Domain Registration</li>
<li><i class="icon-info-sign"></i>Free Hosting</li>
<li><i class="icon-info-sign"></i>Unlimited Space</li>
<li><i class="icon-info-sign"></i>Unlimited Bandwidth</li>
<li><i class="icon-info-sign"></i>cPanel Control Panel</li>
<li><i class="icon-info-sign"></i>24 / 7 / 365 Support</li>
<li><i class="icon-info-sign"></i>30 Day Guarantee</li>
</ul></td>
</tr>
</tbody>
</table>
</div>
</div>
<!--table two ends-->
<!--table three starts-->
<div class="span3">
<div class="pricing">
<table>
<thead>
<tr>
<th> <div class="label-wrapper">
<div class="price-label"> $4.97<span>/month</span> </div>
</div>
<font size="3">Reseller Hosting Plan</font> </th>
</tr>
</thead>
<tfoot>
<tr>
<td><a href="#" class="mybtn bigbtn">Sign-Up Now</a></td>
</tr>
</tfoot>
<tbody>
<tr>
<td><img src="img/preview/server-3.png" alt="icon"></td>
</tr>
<tr>
<td><ul class="hosting-list">
<li><i class="icon-info-sign"></i>WHM/cPanel Control Panel</li>
<li><i class="icon-info-sign"></i>Unlimited Domains</li>
<li><i class="icon-info-sign"></i>Unlimited Space</li>
<li><i class="icon-info-sign"></i>Unlimited Bandwidth</li>
<li><i class="icon-info-sign"></i>Custom Nameservers</li>
<li><i class="icon-info-sign"></i>24 / 7 / 365 Support</li>
<li><i class="icon-info-sign"></i>30 Day Guarantee</li>
</ul></td>
</tr>
</tbody>
</table>
</div>
</div>
<!--table three ends-->
</div>
</div>
<!--row for pricing ends-->
</div>
</section>
<!-- content section ends
================================================== -->
<!-- footer section starts
================================================== -->
<section id="footer">
<div class="container">
<div class="row">
<!--first column starts-->
<div class="span3">
<h5>About 97CentHosting</h5>
<p>97CentHosting is one of the major web hosting companies for cheap cPanel web hosting. Join us and thousands for
reliable cPanel web hosting at A cheap price.</p>
<div class="spacer-10px"></div>
<p class="cursive color-orange">Hosting thousands for cheap!</p>
</div>
<!--first column ends-->
<!--third column starts-->
<div class="span2">
<h5>We Accept</h5>
<ul class="inline-left payment">
<li><img src="img/icons/icon-visa.png" alt="icon"></li>
<li><img src="img/icons/icon-maestro.png" alt="icon"></li>
<li><img src="img/icons/icon-paypal.png" alt="icon"></li>
<li><img src="img/icons/icon-cirrus.png" alt="icon"></li>
<li><img src="img/icons/icon-direct-debit.png" alt="icon"></li>
<li><img src="img/icons/icon-visa-electron.png" alt="icon"></li>
<li><img src="img/icons/icon-american-express.png" alt="icon"></li>
<li><img src="img/icons/icon-switch.png" alt="icon"></li>
<li><img src="img/icons/icon-mastercard.png" alt="icon"></li>
</ul>
</div>
<!--third column ends-->
<!--fourth column starts-->
<div class="span2">
<h5>Support</h5>
<ul class="myunstyled submenu">
<li><a href="support.html">Contact Support</a></li>
</ul>
</div>
<!--fourth column ends-->
<!--fifth column starts-->
<div class="span3"> <span class="cursive color-orange"> 24 / 7 / 365 support <img src="img/icons/icon-help.png"
alt="icon"></span> <a href="#" class="mybtn mediumbtn">Live Chat Online</a>
<div class="spacer-20px"></div>
</div>
<!--fifth column ends-->
</div>
</div>
</section>
<!-- footer section ends
================================================== -->
<!-- copyright section starts
================================================== -->
<section id="copyright">
<div class="container">
<div class="row">
<div class="span12">
<ul class="inline-left">
<li> <a href="#">> Terms & Conditions</a> </li>
<li> <a href="#">> Privacy Policy</a> </
<p>© Copyright 2014 97CENTHOSTING.COM. All Rights Reserved.</p>li>
</ul>
</div>
</div>
</div>
</section>
<!-- copyright section ends
================================================== -->
</div>
<!-- scripts starts
================================================== -->
<!-- Revolution slider scripts starts -->
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<script type="text/javascript">
// var tpj=jQuery;
// tpj.noConflict();
//<![CDATA[
$(document).ready(function () {
var api = $('.fullwidthbanner').revolution({
delay: 8000,
startwidth: 1170,
startheight: 500,
onHoverStop: "on", // Stop Banner Timet at Hover on Slide on/off
thumbWidth: 100, // Thumb With and Height and Amount (only if navigation Tyope set to thumb !)
thumbHeight: 50,
thumbAmount: 3,
hideThumbs: 1,
navigationType: "none", // bullet, thumb, none
navigationArrows: "solo", // nexttobullets, solo (old name verticalcentered), none
navigationStyle: "round", // round,square,navbar,round-old,square-old,navbar-old, or any from the list in the docu
(choose between 50+ different item), custom
navigationHAlign: "left", // Vertical Align top,center,bottom
navigationVAlign: "bottom", // Horizontal Align left,center,right
navigationHOffset: 30,
navigationVOffset: 30,
soloArrowLeftHalign: "left",
soloArrowLeftValign: "center",
soloArrowLeftHOffset: 20,
soloArrowLeftVOffset: 0,
soloArrowRightHalign: "right",
soloArrowRightValign: "center",
soloArrowRightHOffset: 20,
soloArrowRightVOffset: 0,
touchenabled: "on", // Enable Swipe Function : on/off
stopAtSlide: -1, // Stop Timer if Slide "x" has been Reached. If stopAfterLoops set to 0, then it stops already in the
first Loop at slide X which defined. -1 means do not stop at any slide. stopAfterLoops has no sinn in this case.
stopAfterLoops: -1, // Stop Timer if All slides has been played "x" times. IT will stop at THe slide which is defined
via stopAtSlide:x, if set to -1 slide never stop automatic
hideCaptionAtLimit: 0, // It Defines if a caption should be shown under a Screen Resolution ( Basod on The Width of
Browser)
hideAllCaptionAtLilmit: 0, // Hide all The Captions if Width of Browser is less then this value
hideSliderAtLimit: 0, // Hide the whole slider, and stop also functions if Width of Browser is less than this value
fullWidth: "on",
shadow: 0 //0 = no Shadow, 1,2,3 = 3 Different Art of Shadows - (No Shadow in Fullwidth Version !)
});
});
//]]
</script>
<!-- Revolution slider scripts ends -->
<script src="js/bootstrap.js" type="text/javascript" ></script>
<script src="js/ddsmoothmenu.js" type="text/javascript"></script>
<script src="js/jquery.flexslider-min.js" type="text/javascript" ></script>
<script src="js/custom.js" type="text/javascript"></script>
</body>
</html>
The background isnât blue, because youâve set it to white.
Change
body {
background: #fff;
}
to
body {
background: #349ADC;
}
and remove the obsolete bgcolor=â#000000â from
<body bgcolor="#000000">
It isnât 600px wide because youâve set it to 840px:
#outer, .container {
width:872px;
margin:0 auto;
top:40px auto;
bottom:40px auto;
}
Those last two lines should also be removed. I presume theyâre intended to set top and bottom margins, but theyâre incorrect and ronpatâs code, which you have included, sets the margins correctly.
However, iâm not seeing a horizontal scrollbar in either Firefox or Chromium.
The horizontal scrollbar is still showing in all browsers. How do I get rid of this?
Thanks
Using the code youâve given, I have no scroll bar in any browser Iâve tried. However, your page links to a whole wheen of external style sheets, to which we have no access. If youâre seeing a scrollbar, then presumably itâs something in these additional stylesheets causing the problem.
Can you post a live demo for us to look at?
You could set overflow-x: hidden on the body:
body {
background: #349ADC;
overflow-x: hidden;
}
You could set overflow-x: hidden on the body:
No. {overflow-x:hidden} on the body would mask one problem and create another because the user would not trigger a scrollbar when needed.
That is indeed true
Itâs never wise to do that overflow:hidden on body unless your site is purposefully designed to never trigger browser scrollbars.
Either way, we would really like to have an online example to go off of.
Hey,
To do this just set the main width in the body tag as 600px and then any new section/div that you create gets a width class. This would be the easiest. So an example of this:
body { width: 600px; }
.fullwidth { width: 100%; }
Then to add this to a section/div use:
<div class="fullwidth yourclass"></div>
Donât forget you can add another css class after my fullwidth one to give the section/div custom styling.
Did you read the full topic before replying, and look at the code that HostingSites is using? Your example doesnât take account of his code, nor the fact that the content needs to be centred.
The issue of the width has now been covered, but HostingSites is reporting a horizontal scrollbar which we are unable to reproduce. If you are able to help with that issue, then please do.
1 Like