Site5

Menu

Support Forums

Reduce margin below header

Home Forums SimpleCorp Reduce margin below header

Tagged: 

This topic contains 21 replies, has 8 voices, and was last updated by  liuchunkai 1 day, 10 hours ago.

Viewing 15 posts - 1 through 15 (of 22 total)
  • Author
  • #13754

    zanchit
    Participant

    OK! So I have added a bit of a margin below the header now that I have disabled the slider.

    #header {
    border-bottom: #d8d5cd solid 1px;
    margin-bottom: 50px;
    }

    how do i reduce the space between the line below the header and the 1st line of text on all the other pages? So that the display is in line with the home page? At the moment the images on the home page are quite a lot higher than the first line of text (breadcrumbs in this case) on all the other pages and I would love to reduce that gap.

    any ideas?

    thanks

    #13755

    zanchit
    Participant

    sorry! http://www.rchittenden.co.uk shows you the home page
    http://www.rchittenden.co.uk/portraits/ is an example of the other pages.

    ideally, rather than reduce the margin at the bottom of the header is it possible to reduce the margin at the top of the page? As need the home page to look balanced too….

    #13757

    Guido
    Participant

    Hi,

    Logo wrapper has height of 200px, you can reduce that:
    #logo-wrapper {height:100px;}

    And check your height/margin/padding of:
    .navigation-wrapper (default is none)
    #main-navigation li a (default is padding: 47px 12px 50px 12px; margin: 0px 0px 10px 0;)

    Guido

    #13760

    zanchit
    Participant

    Hi Guido
    Neither of those work, annoyingly.
    The only way that i can find at the moment is to reduce the header margin from 50px at bottom. But that means the images on the front page come up way too high.

    Is there a way I can change the padding/margin/layout on the homepage only? i.e. have margin 0px at bottom through site but on homepage have a 50pix buffer at the top of the page to distance the images from the header line?

    Rosanna

    #13766

    Guido
    Participant

    Height between header and content is the same at homepage and other pages. If I remember correctly, your homepage is a static page? So both pages have the same structure. I think you can move image few pics upwards by editing Portraits page.

    Guido

    #13773

    zanchit
    Participant

    homepage is ‘latest posts’ not static, as far as I can make out.
    can’t move pictures up on individual pages as the ‘gallery’ is inserted right at the top of the page so don’t see how can move up – unless you have any ideas…

    #13781

    Guido
    Participant

    I thought I created a static homepage for you few months ago? It uses the same page structure as ‘normal’ page.

    I guess the big image on this page is not part of a gallery? So you can move it upwards I think?
    http://www.rchittenden.co.uk/portraits/

    Guido

    ps. maybe it’s time for a custom theme.. 😉

    #13782

    Guido
    Participant

    I thought I created a static homepage for you few months ago? It uses the same page structure as ‘normal’ page.

    I guess the big image on this page is not part of a gallery? So you can move it upwards I think?
    http://www.rchittenden.co.uk/portraits/

    Guido

    ps. maybe it’s time for a custom build theme..

    #13788

    zanchit
    Participant

    You did indeed create a static homepage for me so I could use text under the portfolio images. But there was a problem with the display of the individual portrait boxes. So we ended up finding a way round it by adding extra text boxes on the bottom of the ‘latest post’ front page.

    Guido, in addition to trying to increase space between photos and menu on homepage (not static) so can reduce space on all the other pages, is there any way i can remove some of the other gaps on the homepage? Am trying to show as much ‘above the fold’ as possible and trying to reduce the gaps where I can.
    http://www.rchittenden.co.uk

    The place I would like to reduce gaps are:

    Top side of h2 (at the moment there is a margin, albeit small).

    Directly underneath the portfolio drawings reducing gap between images and ‘visit these galleries’ text; There seem to be a couple of possibilities here. Each photo seems to be in 2 containers, both of which have margins/borders.

    And round the ‘visit galleries’ text

    And above the home page text

    And finally above the footer

    Have tried adding code to custom css but obviously am doing something wrong as having no effect!

    If I know what the code is i can play with the borders/margins but I haven’t quite got my head around the correct terminology.

    thanks so much

    #13791

    Guido
    Participant

    Top side of h2:
    Which h2? The homeboxes are h1, with class that’s not present in original theme:
    <h1 class="homeboxtitle">

    Reducing gap between images and text:
    Change height of description, current height is:
    .description {height: 50px;}

    And finally above the footer:

    #footer .one-fourth {margin-bottom: 5px;}
    #footer {padding: 0;}

    BTW, there is way too much margin on bottom, current margin is:
    #page {margin:0 0 100px 0;}

    Guido

    #13794

    zanchit
    Participant

    Thanks Guido

    h2 is the ‘other work’ heading. Currently there is margin of 23 above which I would like to reduce, and 15px below

    .description height has helped enormously.

    thanks for pointing out the bottom page margin.

    you are a kind and patient man. Thank you

    #13804

    Guido
    Participant

    The h2 on your site is a h3 in original SimpleCorp..
    You can easily change the line-height via Theme Options > Custom CSS BUT all h3’s will change then.
    So you should add a class to it so only this h3 is changed.

    I think you have this in php file home:
    <h2><?php echo of_get_option('sc_portfoliohometitle') ?></h2>

    Change that into:
    <h2 class="otherwork"><?php echo of_get_option('sc_portfoliohometitle') ?></h2>

    Theme Options > Custom CSS:
    .otherwork {line-height:28px;}

    But main reason that causes the margin is the horizontal line: margin: 30px 0;
    Theme Options > Custom CSS:
    .horizontal-line {margin:5px 0;}

    Guido

    #13816

    zanchit
    Participant

    the horizontal line has done it!
    thanks Guido
    that’s fab

    #13820

    Guido
    Participant

    Great 🙂
    I guess you already did this, if not, I appreciate it if you review one of my Themes on WordPress.org: http://profiles.wordpress.org/guido07111975

    Guido

    #13836

    zanchit
    Participant

    Already did, Guido. 🙂

Viewing 15 posts - 1 through 15 (of 22 total)

You must be logged in to reply to this topic.