Header video height

  • Author
    Posts
  • #160847

    excelsiorehs
    Member
    Original poster

    Hi there, i need help with a few things:
    1) header video height- i tried uploading a cropped video (with lesser height) but the header scales it to a fixed height. How can i make the header height smaller?
    2) the video block right below the header does not extend to full width of the browser even if i set it to full width-layout is also set to full width.
    3) how can i remove space between header and block below it (video)
    4) I would like to hide the posts (page)section at the bottom of the page until i am ready to post something!
    5) Can i change the header media text font color or set it to auto so the text is clearly visible self adjusting to background color?

    thank you

    The blog I need help with is: excelsiorehs.com

    #160857

    sakinshrestha
    Theme Author

    Hello @excelsiorehs,

    Thanks for using the Verity theme. Let me try to answer your queires.

    1. To adjust the header video height, you can change the padding-top and padding-bottom which means space at the top and bottom of your video content in the following CSS. Then, add it in Custom CSS.

    @media screen and (min-width: 64em) {
    	.has-header-video .custom-header-media {
    		padding-top: 144px;
    	}
    	.custom-header-content {
    	    padding-bottom: 144px;
    	}
    }

    2. It’s because of padding, if you want to remove that then add the following CSS in Custom CSS:

    .hero-content-wrapper .section-content-wrap {
    	padding-left: 0;
    	padding-right: 0;
    }

    3. For this, you can add the following CSS in Custom CSS:

    .hero-content-wrapper .section-content-wrap {
    	padding-top: 0;
    }
    .hero-content-wrapper .entry-content {
        margin-top: 0;
    }

    4. There is no option do disable that recent post section but you can hide it by adding the following CSS in Custom CSS:

    .home .content-area {
        display: none;
    }

    5. Please change the color code in the following CSS as per your need and then add it in Custom CSS:

    .absolute-header .custom-header-content .section-title, 
    .absolute-header .custom-header-content .section-title a {
        color: #fff;
    }

    Regards,
    Sakin

    #160878

    excelsiorehs
    Member
    Original poster

    Thanks so much Sakin. Your solutions made my life so much easier.
    I had reached out to wordpress support before about custom pictures on the website and how it can be scaled to look identical- see home page and services section. You will see picture alignment and scaling errors between desktop/tablet/mobile versions. Do you think there is a solution via CSS? I just want a symmetric aligned layout.

    #160891

    sakinshrestha
    Theme Author

    Can you let me know which images are you talking about and want is your expected result and issue. Maybe post in your screenshot showing issues.

    #161005

    excelsiorehs
    Member
    Original poster

    thank you. i kind a resolved it by choosing the rounded picture template and integrating services on the home page. it is still far from perfect. The mobile version do not look as good as the desktop version of the site- format, size, alignment etc even after manually adjusting and picking the right options for picture size and alignment

    #161015

    sakinshrestha
    Theme Author

    @excelsiorehs: You can further customize with Custom CSS. Let me know what are you expecting for mobile devices.

    #161699

    excelsiorehs
    Member
    Original poster

    Hi, Sorry i was away for a few weeks.
    These are some issues i am finding between desktop and mobile versions
    -In mobile version, my website tagline besides the company name does not show. the tagline does show on desktop and tablet versions. This is happening in all pages.
    -The mobile version -in addition to not showing tagline, the alignment of company name and menu is off. It does look like there is enough space to display company name and menu in one line.
    -left and right margin are non-existent on desktop and mobile versions- this was done for making the video appear full width which i like. I would like a minimum margin on left and right side on content only.
    -the about page – while in edit mode it looks fine. Words are breaking and hyphenated in the webpage. This is happening even if i opt to justify alignment.

    #161700

    sakinshrestha
    Theme Author

    @excelsiorehs:
    Site tagline is just for tablets and desktops. But if you want to display in mobile too then add CSS. Also, same with menu and all. Just add the following CSS in Custom CSS:

    @media screen and (max-width: 900px) {
    	.site-description {
    	    display: inline;
    	    clear: left;
    	    padding: 0 0 0 15px;
    	}
    	.menu-label {
    	    clear: both;
    	    display: block;
    	    margin-top: 3px;
    	}
    }

    2. For left and right margin in the content of the frontpage, then add the following CSS:

    .hero-content-wrapper .entry-content p {
        margin-left: 40px;
        margin-right: 40px;
    }

    3. If you don’t want hyphens, then add the following CSS:

    .wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column * {
        hyphens: none;
    }
    #161705

    excelsiorehs
    Member
    Original poster

    Thanks so much. I think that solves most of the problems as of now.

    #161706

    sakinshrestha
    Theme Author

    Nice. Thanks.

The topic ‘Header video height’ is closed to new replies.