[Support request] Page title bar same width as content container.

Home Forums Support Page title bar same width as content container.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1301917
    Adam

    Hi there,

    The site I am working on is set as a contained width of 1100px and has the header, menu, featured image, then content below.

    I want to have a bar that is the same width as the header / menu / featured image etc, and the same background colour as the menu so that I can type the page title in. The majority of the site pages are made with standard wordpress blocks. If I change to use ‘Sections’ I can achieve making a section that is contained but full width so it is the full 1100px. But I ideally don’t want to use “sections” as I have all other content built using standard wordpress blocks.

    I noticed you have a GenerateBlocks plugin so I installed that, but if I create a container block using the plugin, I cant get the full 1100px width, it still does it with gaps to the side of the block within the content area.

    Is there a workaround or some CSS I can use to just get a simple bar underneath the featured image before the content begins?!

    I may be missing something – it seems like it should be simple but I can’t seem to make it work!

    Regards,

    Adam

    #1301999
    David
    Staff
    Customer Support

    Hi there,

    can you share a link to your site so we can advise.
    You can edit your original topic and use the Site URL field to share the link privately

    #1302018
    Adam

    Hi David,

    I’ve updated the topic to include url.

    Basically I just want the title of the page in a bar the same width and colour as the menu bar, below the featured image.

    Regards,

    Adam

    #1302213
    David
    Staff
    Customer Support

    Try adding this CSS:

    .entry-header {
        margin: -40px -55px 40px;
        padding: 20px 55px;
        background-color: #c7fdec;
    }
    
    @media (max-width: 768px) {
        .entry-header {
            margin: -30px -30px 30px;
            padding: 20px 30px;
        }
    }
    #1302248
    Adam

    That’s perfect thank you.

    Could you let me know what the CSS is doing to help me understand what will effect it?

    Is it dependant on the size of the feature image? Or will it just work for each new page without any tweaking?

    Thanks again,

    Adam

    #1302331
    David
    Staff
    Customer Support

    The margin property is offsetting the Top, Right and Left Content Padding you set in Customizer > Layout > Container. There is CSS for Desktop and Mobile to match.

    This: margin: -40px -55px 40px; = -40px TOP, -55px LEFT & RIGHT, +40px Bottom.

    Then the padding value is putting the padding inside the container.

    So if you change the Content Padding you will need to update those values to match.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.