# Maximize container on the Homepage

**URL:** <https://colorlibsupport.com/t/maximize-container-on-the-homepage/8923>\
**Category:** Sparkling\
**Created:** [January 22, 2016, 10:02pm UTC](https://colorlibsupport.com/t/maximize-container-on-the-homepage/8923 "2016-01-22T22:02:09Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![jiks](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/j/13edae/32.png) [@jiks](https://colorlibsupport.com/u/jiks)\
**Post date:** [January 22, 2016, 10:02pm UTC](https://colorlibsupport.com/t/maximize-container-on-the-homepage/8923/1 "2016-01-22T22:02:09Z")

</div>

Hello,

I’d like to know if is it possible to maximize the container on the homepage (full-width). I don’t want any space at the top between the container and the header (the same at the bottom); Plus, the slider is disabled.  
Basically I’d like to achieve a layout like this:

[https://chatroll.com/](https://chatroll.com/)

Any help would be really appreciated,

Thanks 🙂

---

<div class="post-metadata">

**Author:** ![jiks](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/j/13edae/32.png) [@jiks](https://colorlibsupport.com/u/jiks)\
**Post date:** [January 23, 2016, 7:32am UTC](https://colorlibsupport.com/t/maximize-container-on-the-homepage/8923/2 "2016-01-23T07:32:33Z")

</div>

Here is the link of my site:

[http://www.speakingoftrading.com/](http://www.speakingoftrading.com/)

Basically, I’d like to have the homepage in full-screen.

Thanks again! 🙂

---

<div class="post-metadata">

**Author:** ![movin](https://colorlibsupport.com/user_avatar/colorlibsupport.com/movin/32/10922_2.png) [@movin](https://colorlibsupport.com/u/movin)\
**Post date:** [January 28, 2016, 7:38am UTC](https://colorlibsupport.com/t/maximize-container-on-the-homepage/8923/3 "2016-01-28T07:38:41Z")

</div>

Hi @jiks,

I hope you are well today and thank you for your question.

I tried to visit your shared site but it’s just displaying the message as following.

```auto
Speaking of Trading
Will come soon with new features and improvements :)

```

If you don’t want to display slider on your site then just make sure to uncheck the theme option “Check if you want to enable slider” on the following path.

Admin Area -\> Appearance -\> Customize -\> Sparkling Options -\> Slider options

To make the homepage full width just try adding the following CSS code in the Custom CSS option of the latest version of Sparkling theme on the below path.

Admin Area -\> Appearance -\> Customize -\> Sparkling Options -\> Other -\> Custom CSS

```auto
body.home .container {
    width: 100%;
}
 

```

Best Regards,  
Movin

---

<div class="post-metadata">

**Author:** ![jiks](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/j/13edae/32.png) [@jiks](https://colorlibsupport.com/u/jiks)\
**Post date:** [January 29, 2016, 1:34am UTC](https://colorlibsupport.com/t/maximize-container-on-the-homepage/8923/4 "2016-01-29T01:34:56Z")

</div>

Hi Movin,

Thank you very much for your reply.  
Actually I managed to fix the issue by myself, thus the site is again in “Coming Soon” mode.  
I added the following code and I’d like to know if it didn’t break anything. Combining one plugin to design the pages and the previous code I told you about, I was able to achieve what I desired.

The code is:

body.home { background-color: #ffffff; }

.home .post-inner-content {  
border: none;  
}

.home .post-inner-content {  
padding: 0;  
}

.main-content-area {  
margin-bottom: 0;  
}

.main-content-area {  
margin-top: 0;  
}

body.home .main-content-area {  
margin-top: -22px;  
}

div.top-section, body.home div#content {  
margin-top: 0;  
}

Thanks again! 🙂

---

<div class="post-metadata">

**Author:** ![movin](https://colorlibsupport.com/user_avatar/colorlibsupport.com/movin/32/10922_2.png) [@movin](https://colorlibsupport.com/u/movin)\
**Post date:** [January 29, 2016, 1:24pm UTC](https://colorlibsupport.com/t/maximize-container-on-the-homepage/8923/5 "2016-01-29T13:24:07Z")

</div>

Hi @jiks,

Awesome great to see you managed to fix it and your shared CSS code looks fine.

Please advise if you have more questions.

Have a fantastic day!

Cheers,  
Movin

---

<div class="post-metadata">

**Author:** ![jiks](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/j/13edae/32.png) [@jiks](https://colorlibsupport.com/u/jiks)\
**Post date:** [January 30, 2016, 10:08pm UTC](https://colorlibsupport.com/t/maximize-container-on-the-homepage/8923/6 "2016-01-30T22:08:12Z")

</div>

Hello,

Thanks for the reply. Have a nice day too! 🙂

---

<div class="post-metadata">

**Author:** ![movin](https://colorlibsupport.com/user_avatar/colorlibsupport.com/movin/32/10922_2.png) [@movin](https://colorlibsupport.com/u/movin)\
**Post date:** [January 31, 2016, 7:02am UTC](https://colorlibsupport.com/t/maximize-container-on-the-homepage/8923/7 "2016-01-31T07:02:57Z")

</div>

You are most welcome here 🙂