Archived topic
H2 title style
7 replies · Started by Enrico on December 30, 2020
Hi there.
I'm trying to style H2 title, like the tile "Thank You For Coming To My Website." in this page.
I try with the following code, but I'm a beginner and it doesn't work :-(
.capstone-title.capstone-light h2 {
background: #7E828D;
}
.capstone-title.capstone-light h2 {
text-align: center;
font-size: 2.5em!important;
margin-top: -101px;
margin-bottom: 50px !important;
background: #343D5C;
width: auto;
margin-right: auto;
margin-left: auto;
padding: 20px;
font-weight: bold;
text-transform: capitalize!important;
position: Relative;
transform: rotate(-3deg)!important;
color: white;
}I would like to use it only on a few pages, using Simple CSS plugin.
Anybody can help me, please?
Thank you.
Hi,
Simple CSS is pretty dated.
You can uninstall this plugin and use Appearance > Customize > Additional CSS for general CSS if you'd like.
As for CSS for specific images, you can use the Hook Element.
https://docs.generatepress.com/article/hooks-element-overview/
You can wrap your CSS with a <style> </style> tag and place it within the Hook Element's code area.
You then set the hook to wp_head and set the Display rule location to the pages you want the CSS to apply.
Thank you very much Elvin!
I did, but if you can I need a bit more help...
I changed a little the code, and I added it:
<style> h2 {
text-align: center;
font-size: 2.5em!important;
margin-top: -140px;
margin-bottom: 50px !important;
background: #0f4c81;
width: auto;
margin-right: 30%;
margin-left: auto;
padding: 20px;
font-weight: bold;
position: Relative;
transform: rotate(-3deg)!important;
color: whitesmoke;
} </style>And this is my homepage.
My question is: is it possible to display the title in the center of the page?
Thanks
Hi there,
try this CSS:
h2#titolo-home {
text-align: center;
font-size: 2.5em!important;
margin-top: -140px;
margin-bottom: 50px !important;
background: #0f4c81;
margin-right: auto;
margin-left: auto;
max-width: 800px; /* set max width */
padding: 20px;
font-weight: bold;
position: Relative;
transform: rotate(-3deg)!important;
color: whitesmoke;
}David, thanks a lot!
Just to learn, is it any max-width: xxxpx; that works better in both desktop and mobile?
Thank you again, have a good day!
Enrico
No - it just stops the container from going beyond that width, on smaller screen sizes the container will just shrink to fit.
Thank you David.
You helped me a lot!
Glad to be of help