Adjusting Pique homepage height

  • jaspercollective · Member ·

    Hi,

    Site address: https://sincereoptics.com/
    Theme: Pique (https://wordpress.com/theme/pique)

    My client has the above website using the Pique theme. I took over from their previous webmaster. I’d link to shrink the homepage height, so that the first panel starts directly below the menu. I’ve been trying to inspect the CSS, but there doesn’t seem to be a CSS class which controls that.

    Custom CSS by the previous dude:

    /*
    Welcome to Custom CSS!

    To learn how this works, see http://wp.me/PEmnE-Bt
    */
    #pique-hero {
    background: rgba(255,255,255,0.8);
    min-height: 40vh;
    }

    .site-branding .site-title {
    margin-bottom: 5px;
    padding: 0;
    text-align: center;
    text-transform: capitalize;
    }

    .site-branding h1.site-title {
    font-size: 200%;
    font-weight: 900;
    text-shadow: 1px 1px 2px rgba(0,0,0,30);
    }

    .site-branding p.site-description {
    font-size: 110%;
    }

    #site-navigation-wrapper {
    background: #790d24;
    }

    /* For width smaller than 400px: */
    .overlay {
    max-width: 700px;
    font-size: large;
    padding-top: 10px;
    }

    /* For width 400px and larger: */

    @media     only screen and (min-width: 700px) {
    .overlay {
    width: 50%;
    font-size: large;
    padding-top: 10px;
    }
    }

    #post-5 h3.entry-title {
    color: #ffffff;
    font-size: xx-large;
    font-weight: 900;
    text-transform: capitalize;
    }

    #post-5 .entry-content {
    color: #ffffff;
    font-size: large;
    }

    #post-5 .entry-title a {
    color: #ffffff;
    }

    The blog I need help with is: (visible only to logged in users)

  • kokkieh · Staff ·

    Hi there,

    Please note that the owner of this site can get help with this directly via live chat at https://wordpress.com/help/contact

    Replace the first CSS declaration that’s already there:

    #pique-hero {
background: rgba(255,255,255,0.8);
min-height: 40vh;
}

    With this:

    #pique-hero {
	background: rgba(255,255,255,0.8);
	min-height: 0;
	height: 300px;
}

@media screen and (max-width: 782px) {
	#pique-hero {
		height: 180px;
	}
}
  • jaspercollective · Member ·

    Hi Kokkeh,

    Thank you so much! That worked!

  • The topic ‘Adjusting Pique homepage height’ is closed to new replies.