I tried my best but I couldn't make the following theme full width/screen by editing the CSS. I'd be very much grateful if you could show me or give me a hint regarding this customization.
http://demo.mythemeshop.com/sociallyviral/
You see the footer in the above theme(It's full width), how do I make the whole theme's body/container full width like the footer?
Note: I tried adding/removing margins/paddings etc.
To accomplish something like this http://i.imgur.com/mekVyJg.jpg you will need to do the following changes in your css file:
.main-container {width:100%;max-width:100%}
#page, .container {width:100%}
do the following change in responsive.css file
.main-container {
/** max-width: 96% replace this with bellow */
max-width: 100%;
}
remove these styles from style.css file
.main-container{
width: 1170px;
}
.container{
max-width: 1170px;
}
.primary-navigation {
max-width: 1170px;
}
Then your site will work full-width
Replace the following styles and that will do it
Style.css line 305
.primary-navigation {
display: block;
float: left;
width: 100%;
text-align: left;
}
Style.css line 174
#page, .container {
max-width: 100%;
min-width: 240px;
}
Responsive.css line 63
.main-container {
max-width: 100%;
}
Try to click on Appearance >>
Customize >>
Additional CSS.
.container {
width: 70%;
}