Adjusting Pique homepage height

  • Author
    Posts
  • #3404440

    skinnyhobbit
    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 wordsthoughtsdreams.wordpress.com.

    #3404524

    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;
    	}
    }
    #3404693

    skinnyhobbit
    Member

    Hi Kokkeh,

    Thank you so much! That worked!

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