Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › [Solved] Remove space before & after area content

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 18 total)
1 2
  • Author
    Posts
  • July 7, 2015 at 1:17 pm #204707
    losrack
    Participant

    Hi,

    I would love to be able to reduce unwanted space on my site. Right now is on a local server and I am using woo storefront WP theme.

    Basically, I don’t want so much extra space on top and bottom of main content area.

    I have my child theme files, and I am done some mods succesfully, but not this “unwanted space” thing.

    I will be happy to post css or php code from my theme files, but I do not know which part to publish … so any hint would be easier for me

    Please help. Is the last tweak I need before uploading to live server.

    Thanks.

    July 7, 2015 at 1:19 pm #204708
    chrisburton
    Participant

    @losrack It could be either. But we would need to see a reduced test case to be sure.

    July 7, 2015 at 1:21 pm #204709
    losrack
    Participant

    deleted miss try …

    July 7, 2015 at 1:26 pm #204710
    chrisburton
    Participant

    Make a Reduced Test Case.

    tl;dr

    Right click, view the page’s source,<body>copy everything between these tags</body>, create a Pen, paste the HTML inside the HTML box, go back to your local site, copy the css and put it inside the CSS box. Save the pen and paste the link.

    Edit: Please don’t just dump your code, put it inside a PEN.

    July 7, 2015 at 1:36 pm #204713
    losrack
    Participant

    ok here it is… hope this time is right

    http://codepen.io/losrack/pen/GJxYjx

    July 7, 2015 at 1:42 pm #204714
    chrisburton
    Participant

    @losrack Keep working at it until the Pen matches your local version. Upload images to something like imgur.com and replace the local html link.

    Also, I doubt that’s all your CSS. How long have you been coding?

    July 7, 2015 at 1:46 pm #204716
    losrack
    Participant

    http://codepen.io/losrack/pen/GJxYjx

    July 7, 2015 at 1:50 pm #204717
    chrisburton
    Participant

    @losrack Ok. Better. Is there a link to where you got this theme?

    July 7, 2015 at 1:59 pm #204718
    losrack
    Participant

    sadly I am on localhost right now, for programming ease … but it is woo themes’ storefront.

    http://www.woothemes.com/storefront/

    July 7, 2015 at 2:04 pm #204719
    chrisburton
    Participant

    @losrack This is the demo: http://demo2.woothemes.com/storefront/

    What exactly do you want to remove?

    July 7, 2015 at 2:14 pm #204720
    losrack
    Participant

    Well, the thing that I don`t like is that there is so much space wasted on top and bottom of main content area.

    I did some customization on my custom css and I already reduced some paddings … for header mostly and getting rid of sidebars and all that.

    I put the original theme’s css, and not my child style css … since I think all the main stuff is coded.

    Would I probably be better posting my custom css also?

    July 7, 2015 at 3:08 pm #204728
    chrisburton
    Participant

    Because the way the theme is setup, it’s not just a simple ‘remove margin/padding’ on a particular element kind of thing. It will take some configuring. There are negative margins involved for the large image and such. Basically you’ll need to do a bit of tweaking in several areas.

    If you’re familiar with developer tools, this will help you immensely.

    July 7, 2015 at 5:34 pm #204736
    losrack
    Participant

    Hi Chris,

    First I wanna say thanks you took the time to help.

    I am doing some changes with the developer tools. I see the things changing … I got excited since now I see what I am doing …

    But …

    But since I do not want to change the original css, in case of an update might erase my changes, I tried to copy the changes code to my child theme style.css, but it looks like it is not overriding the original code.

    What do I do to override it with the new coding?

    Again thanks.

    July 7, 2015 at 5:43 pm #204737
    chrisburton
    Participant

    @losrack What you could do is make sure your child theme css is below the theme css in your head section.

    e.g.

    <!doctype html>
<html lang="en">
<head>
....
<!-- This is your MAIN theme CSS file -->
<link rel="stylesheet" href="http://yoursite.com/path/to/main.css">

<!-- This is your CHILD theme CSS file -->
<link rel="stylesheet" href="http://yoursite.com/path/to/child.css">
....
    July 8, 2015 at 7:09 am #204774
    losrack
    Participant

    One last question …

    Where is the head section located in a wordpress data?

    Thanks…

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 18 total)
1 2
  • The forum ‘CSS’ is closed to new topics and replies.