No announcement yet.

Removing extra space

  • Filter
  • Time
  • Show
Clear All
new posts

  • Removing extra space


    This week I updated my store to a new responsive template. I've got the basic tweaks finished. However, I have extra space in a couple of places that I want to remove and can't figure out how or where to do it. In the photo I've included the top portion is a partial screenshot from my web site. The bottom is a partial screenshot from the barber template preview as shown here:

    The top yellow highlighted area is where the extra space needs to be removed on my site. The lower yellow highlight shows what the end results should be.

    On my own site I have turned off the left bar where the Top Sellers and New Releases are shown in the barber-preview. Thinking that may have caused an issue I enabled them again and the white space still remained.

    I am not a developer, nor do I have any training in writing code. I've learned how to read and tweak basic code, but beyond that html5 and the new responsive templates go over my head and I can't seem to fix and change basic things like I used to.

    I would greatly appreciate help on this tiny little issue.
    Thank you!
    You do not have permission to view this gallery.
    This gallery has 1 photos.

  • #2
    Please include a link to the actual page where the problem exists.


    • #3
      It was late and I was tired and frustrated so I forgot to include the link.

      Here's the page in the example above, but this extra white space occurs on all category/product pages.


      • #4
        Using Chrome developer tools (push F12, then click the little box with arrow on top left, then select the part in your page that you want to inspect), you can see that the class that controls this section is Class="category-header
        You can see that it has margin:15px 0; The 15 controls top and bottom margins. next to it you can see it is in Layout.css

        You don't want to edit Layout.css directly. However, anything you put in default_modefied.css will override what is in Layout.css

        So in default_modefied.css add at the bottom. Then go your Admin, and click the View Store button at the top to clear the Cache.

        I hope this works as I am also learning this as I go.

        /* Added 1/16/15 to control category header height */
        .category-header {
        margin: 0;

        Category Header.jpg