WordPress.org

Ready to get started?Download WordPress

Forums

Clean Retina
[resolved] Removing gaps in between header title (6 posts)

  1. dustyhawk
    Member
    Posted 1 year ago #

    Hey guys,

    need some help as I do not know where in the file i am suppose to edit.

    the problem : http://img.photobucket.com/albums/v331/dustyhawk/newsite1_zpsc05a8322.jpg

    as per the black boxes, i am trying to reduce the gap in between them.

    I just cant find the CSS that is handling this part .

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Try using a browser developer tool for this kind of exploratory CSS work.
    I use Google Chrome's built-in Developer Tool and it's really easy to expose the webpage's underlying HTML and CSS.

    Now that you know the style, from being exposed by the Developer Tool, you can add a new style to override it.

    You ought to add new styles externally, not within the theme's files. Changes to the theme's files will compromise the theme and be compromised when the theme updates.

    External changes can be made using a Child Theme or through a plugin that provides Custom CSS functionality.

    I recommend using the Jetpack plugin and its Custom CSS functionality to hold your CSS modifications.

  3. dustyhawk
    Member
    Posted 1 year ago #

    many thanks

  4. Sanjiv
    Member
    Posted 1 year ago #

    Hi dustyhawk,

    You can go to Appearance->Theme Options ->Design Options->Custom CSS Add your own CSS to override the theme's CSS and save the changes.

    This theme has built in cusotm CSS option to override the theme's CSS.

    Regards,
    Team Horse

  5. Cantello
    Member
    Posted 1 year ago #

    Did you manage to reduce the gaps? Your custom CSS would be very welcome... ^_^

  6. Vy0m
    Member
    Posted 1 year ago #

    I managed to reduce the spaces from CSS by analyzing which tags needs to be edited using Chromium's Developers tools.

    For the record, I found out two changes that needed to be done to reduce gaps above the header image and between the header and post area.

    Bold parts represents changes:

    #site-logo {
    float: left;
    margin-top: 1px; /* I changed it from 39 px */
    margin-bottom: 1px; /* I changed it from 13 px */
    }

    .hgroup-wrap {
    padding-top: 25px;
    padding-bottom: 20px; /* I changed it from 45px */
    }

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic