Removing white space from the empty title block

  • DrRenu

    #51322

    Hi,

    I removed the title from a page because I wanted to use a cover image. I found the CSS code to remove the title from displaying on the page, but the white space is still there. I found code (padding) to get rid of it, but it didn’t work. Could someone please advise me on how to fix this? I’d like to do this for some of the other pages, too, but not all. Here is the one I am trying it with:
    https://peace.renualdrich.com/individual-therapy/

    Thank you!

    Admin

    Syahir Hakim

    #51323

    Use the following code in Additional CSS:

    .page-id-19 #content,
    .page-id-19 .entry-content {
    	padding-top: 0;
    }
    

    DrRenu

    #51324

    Thank you! That was perfect, but it only worked on that one page. I am having issues with not being able to customize which pages the right widget shows up on. I got it to go away on the page you helped me with so I’m thinking that is the issue, but now I can’t remember how I did it.

    I love this theme, I’m going to go ahead and buy it to customize my site even more as well as to support you. Will the above issue have an easy solution in the paid version? Thanks again!

    DrRenu

    #51325

    Sorry, now there is a “Return to Services” notice when I made it clear this was a child page. Is it an option in the software or do I need code to get rid of that? Thanks!

    DrRenu

    #51328

    Hi — I figured these out, the second thanks to this forum! For the first, is there an easy way to identify the page number? I now have the paid version.

    Relatedly, can each page have custom CSS? If I add CSS via the Graphene Customize Options, it would be applicable to all pages unless somehow specified to a page. If I use the “Additional CSS Classes” in the edit page mode, it doesn’t seem to actually show up on that page or any other.

    For example, I am trying to add cellpadding around the text on this page (https://peace.renualdrich.com/services/family-therapy/) using this additional code

    div {
    padding-top: 0px;
    padding-right: 30px;
    padding-bottom: 0px;
    padding-left: 80px;
    }

    Please let me know what I’m doing wrong, thanks! if you notice on this page, the main photo is larger than the header image and menu. When I tried to use the regular width, white space shows around it. How can I get the image to conform to the header specs?

    Thank you!

    Admin

    Syahir Hakim

    #51340

    Using the code that I provided as a sample, to limit any additional CSS to a specific page, you’ll have to prefix the CSS code with the page-specific CSS class. This class is highlighted in red below.

    <span style="color:red">.page-id-19</span> #content,
    <span style="color:red">.page-id-19</span> .entry-content {
    	padding-top: 0;
    }
    

    To apply specific CSS codes only on specific pages, follow the example above and replace the ID number (in the case above it’s “19”) with the ID number of specific page in question.

    To easily determine what is the ID number for any pages, you may use the following plugin: https://wordpress.org/plugins/reveal-ids-for-wp-admin-25/

    On the specific page that you mentioned above (family-therapy), the following code will expand the main image through the surrounding white space:

    .page-id-22 .wp-block-cover {
    	margin: 0 -15px 1.5em -15px;
    	width: auto;
    }
    

Viewing 6 posts - 1 through 6 (of 6 total)

  • You must be logged in to reply to this topic.