Suggestions – reduce vertical white space

  • Resolved bwooster47

    (@bwooster47)


    10 years ago

    I’m trying out this theme, and looks good overall.

    Just ran into a few issues, in case they can get into some future release.

    Primarily, the site uses too much padding-top and padding-bottom for header and .site-info which is a big issue on smartphones and tablets.
    And it is not easy to use custom CSS to resolve this for all versions of a responsive web site.

    Specifically:
    1) Menu drop-down should not use whole width of a smartphone display.
    Most apps and themes on a smartphone only show the menu icon.
    This theme can show this icon on the right side of the screen on the line with the site logo or the site description for example. If the heading right sidebar has two widgets such as social and menu, show one on the left and other on the right (drop-down menu) in a single row.

    2) Menu drop-down has a bug? On home page select a page from the menu. Then hit the back button. The home page shows the menu with the old page name – which is wrong. It should reset back to menu title. (Or better, don’t show text here at all, follow point #1 above and only show menu icon.)

    3) Site title should be optionsl. I was surprised to see changing site title in theme changes the wordpress site title too – these should be separate. My logo contains the site title, so I don’t want the theme to display a site title or use up that space.

    4) Too much padding-top/padding-bottom around site header logo and description.

    5) Too much padding-top/padding-bottom around .site-info. This can be made much tighter and also reduce <p> padding-top/bottom for items within .site-info.

Viewing 8 replies - 1 through 8 (of 8 total)
  • Theme Author Catch Themes

    (@catchthemes)

    10 years ago

    @bwooster47:
    1 and 2) About the menu, it’s the theme design choices and yes we are coming up with new theme with small menu with Icon only.
    3) Yes, site title is optional, you can go to “Appearance => Readings” and then uncheck “Show header text with your image.” in Header Text.
    4) Again this is design specific, we have theme which have less space. If you see this theme description, we have mentioned about the large spaces. Also these things can be customize with the help of css in “Custom CSS” box at Theme Options panel.
    5) It’s same. We have this them design spacious.

    Thread Starter bwooster47

    (@bwooster47)

    10 years ago

    On the menu issue – I noticed you are using tinynav. The developer of tinynav has a new package which is much nicer, and it uses just an small icon on smartphones: http://responsive-nav.com/

    As for Header text, I do want the subtitle, just not the title.
    I can fix this in CSS though, have set site-title to be display: none.

    And also used CSS to reduce white space padding and line-height in site-generator.

    Theme Author Catch Themes

    (@catchthemes)

    10 years ago

    @bwooster47: Thanks for the feedback. Yes we use the mix of tinynav and Selectbox for menu. Nice that you fixed it through custom css. Thanks for all your feedback. We are really happy to receive it. I hope we will make this theme and new theme better.

    kimkellymom

    (@kimkellymom)

    9 years, 11 months ago

    bwooster47,

    How did you reduce the padding/white space on the home page in CSS?

    Thread Starter bwooster47

    (@bwooster47)

    9 years, 11 months ago

    Here’s a part of what I use:

    /* site-info copyright has too much padding, reduce it */
/* reduce padding - this css must come after responsive.css,
 * use functions.php to load this CSS after all theme files
 */
#site-generator .site-info, #site-generator .powered {
  padding: 2px 0px;
  line-height: 1.3;
}

#site-generator {
  border: 2px;
}

/* reduce header padding - this css must come after responsive.css */
#hgroup { padding-top: 1rem; }
#hgroup-wrap { padding-top: 1rem; padding-bottom: 1rem; }
#site-logo { padding-top: 1rem; }
.header-sidebar { padding-top: 0.0rem; } /* long main menu gets pushed down */
/* site-description should have 0 padding on smaller widths, and large otherwise */
@media screen and (min-width: 961px) {
   #site-description { padding-top: 2rem; } /* increase padding-top for this */
   #header-right .widget  { margin-top: 0rem; } /* only smaller widths need  top space for menu */
}

#header-right { margin-top: 0.0rem; } /* long main menu gets pushed down */

/* top header needs some demarcation from the content, add a border */
#masthead { border-bottom: 1px solid #6a6; }

/* Recent Posts, Contact etc at bottom of page needs tighter spacing
 * on small width pages, links are broken into lines with too much space
 */
#colophon li { line-height: 0.9; padding: 0.6rem 0; }

    kimkellymom

    (@kimkellymom)

    9 years, 11 months ago

    Oh boy, that looks so much better! Thank you!!!

    ross@plydea.com

    (@rossplydeacom)

    9 years, 1 month ago

    Any ideas how I might remove the vertical space that appears between the bottom of the Woocommerce gallery images and the top of “Descriptions”? http://plydea.com/product/blue-7/
    It is sliding space that can be lessened by reducing the height of the page as shown by the browser… but I’d like it gone.

    thanks
    Ross

    Theme Author Catch Themes

    (@catchthemes)

    9 years, 1 month ago

    Hi Ross,

    This is Catch Kathmandu Theme support forum and you are using different theme. So, please post in the appropriate forum.

    Thanks.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Suggestions – reduce vertical white space’ is closed to new replies.