[Resolved] Feature image with page title displayed inside

[chris]

I must be doing this horribly wrong, because im playing with padding in mobile vs desktop to try achieve what i want – its a mess! so deleted all the mobile related CSS but i really would love to know if there is a way to apply a blanket feature image across the whole website and have every h1 title appear cantered in it with the css style i have applied for text style?

Currently targeting .entry-title .product_title.entry-title .woocommerce div.product woocommerce-products-header__title
with

.woocommerce-products-header__title{
text-align: center;
font-weight: 900;
color: white;
font-size: 40px;
margin-top: -63px;
padding-bottom: 30px;
color: #444444;
}

it was all ok on desktop but mobile looked awful, there must be a simple way of achieving this im missing, could i make element for whole site apart from home, and write a command in <-> to make the page title / product tile / product arcive name appear in it?

[Leo]

Hi Chris,

i really would love to know if there is a way to apply a blanket feature image across the whole website

I’m not sure what you are referring to here – can you explain a bit more?

have every h1 title appear cantered in it with the css style i have applied for text style?

Something like this should work:

h1 {
    text-align: center !important;
}

If this doesn’t help, please link me to the specific page in question.

[chris]

I i think i have managed to do nearly what i want, i used header element with image applied accross whole site but not homepage, and i have made the page title, product title ect fit inside with CSS but i was wondering if there is something i can write in the ELEMENT <—-> area to make the titles appear there automatically without CSS spacing and margins

[Leo]

Are you using the block editor? If so this should help:
https://docs.generatepress.com/article/dynamic-data/

Examples: https://docs.generatepress.com/article/block-element-page-hero/#examples

[chris]

Not sure we are on the same page or if we are im lost sorry,

I have added <center><h1 class=”entry-title”>{{post_title}}</h1></center>

to element content which works displaying all page title where i want, but i cant centre the text for some reason?

[Leo]

Are you using the block editor with GenerateBlocks by any chance?

It will make this a lot easier.

[chris]

I have generateblocks i dont know what is block editor

[chris]

I just want to centre title pls css wont work

[Leo]

The block editor is the Gutenberg editor.

Can you link me to the specific page that shows the issue?

[chris]

All page, the title is show to the left i want to centre

[chris]

??

[Fernando]

Hi Chris,

Sorry, your response may have slipped through our system.

Have you tried setting the Horizontal alignment to Center if you’re using a Header Element? Reference: https://docs.generatepress.com/article/header-element-overview/#page-hero

If that doesn’t work try adding this through Appearance > Customize > Additional CSS:

.page-hero.inside-header {
    justify-content: center;
}

[chris]

Worked perfect thanks so much!

Something has now knocked my mobile view header not full width though not sure what has done that, maybe some padding?

[chris]

Never mind found and fixed, thanks again for that code!!

[chris]

Resolved

[Author]

Posts