Archived topic
Feature image with page title displayed inside
15 replies · Started by chris on February 21, 2023
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?
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.
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
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
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?
Are you using the block editor with GenerateBlocks by any chance?
It will make this a lot easier.
I have generateblocks i dont know what is block editor
I just want to centre title pls css wont work
The block editor is the Gutenberg editor.
Can you link me to the specific page that shows the issue?
All page, the title is show to the left i want to centre
??
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;
}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?
Never mind found and fixed, thanks again for that code!!
Resolved