Reducing White space

  • Resolved xentonic

    (@xentonic)


    7 years, 5 months ago

    So, my boss wanted me to renovate our website. I was using joomla before and decided to try something new. I am trying to reduce the white space here so that the back ground will show more once I put it in. Currently it shows only a border of the background which is frustrating.

    Thanks for the help.

Viewing 6 replies - 1 through 6 (of 6 total)

  • Click on “Customize” on the top menu when logged into the site, then click on “Additional CSS,” then add the following code:

    #masthead {
padding-top: 0px !important;
padding-bottom: 12px !important;
}

    That should reduce a lot of the gaps.

    Thread Starter xentonic

    (@xentonic)

    Hmm… I don’t see a difference. What could be wrong? Unless the text/media is just expanding it like that. I’ve tried the CSS like this 

    /*
#masthead {
 padding-top: 0px !important;
 padding-bottom: 12px !important;
 }
*/

    and like this

    /*

*/
#masthead {
 padding-top: 0px !important;
 padding-bottom: 12px !important;

    Neither makes any noticeable changes. The site currently has the first portion of code.

    EDIT: Tried the code on our other site. Nothing changed. Site has same theme but less content. How curious.

    • This reply was modified 7 years, 5 months ago by xentonic.
    • This reply was modified 7 years, 5 months ago by xentonic.
    • This reply was modified 7 years, 5 months ago by xentonic.
    • This reply was modified 7 years, 5 months ago by xentonic.

    I saw Joomla and I was like, HEY! Cool!
    Anyway, Not quite sure what you are wanting to do, so correct me if I am wrong…you want more of the background to show (when you add a background image)? Sounds like you want more of a boxed style page.

    If so, this is what controls the amount of surrounding space to show the background:

    @media screen and (min-width: 44.375em) {
.site {
    margin: 21px;
}
}

    You can change the margin from 21px to whatever works best for you. Also, when adding custom code, make sure this is removed:

    /*

    */

    That is used for commenting your CSS code, so anything you put inside that will not work. An example using this commenting would be like:

    /* This is my comment
 * for my custom coding
 */
@media screen and (min-width: 44.375em){
style.css?ver=4.8.1:2754
.site {
    margin: 21px;
}
}
    Thread Starter xentonic

    (@xentonic)

    Ok so using that, I set it as 5 pixels to see what it did, and… no change.
    Tried it on our other site. Same thing. Hmm… I don’t know anything about CSS code which is an issue. Otherwise I might be able to give better questions. But, yes my goal is to have more of the background showing. I just added the picture which is a simple steel blue gradient.

    EDIT: Here is our other site. As you can see it is a lot less content. The code is added to the additional CSS area. But there seems to be no change.

    I just realized looking at my last snippet of code I pasted had a line in there that shouldn’t be there….I copied that from the browser…my bad. It should have been:

    @media screen and (min-width: 44.375em){
.site {
    margin: 21px;
}
}
    Thread Starter xentonic

    (@xentonic)

    That did the trick! Thanks!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Reducing White space’ is closed to new replies.