- This topic has 7 replies, 3 voices, and was last updated 3 years, 4 months ago by David.
-
AuthorPosts
-
December 30, 2020 at 12:25 am #1599085Enrico
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.December 30, 2020 at 12:34 am #1599091ElvinStaffCustomer SupportHi,
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.December 30, 2020 at 1:56 am #1599149EnricoThank 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?
ThanksDecember 30, 2020 at 3:18 am #1599213DavidStaffCustomer SupportHi 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; }
December 30, 2020 at 3:41 am #1599232EnricoDavid, thanks a lot!
Just to learn, is it anymax-width: xxxpx;
that works better in both desktop and mobile?
Thank you again, have a good day!
EnricoDecember 30, 2020 at 4:50 am #1599296DavidStaffCustomer SupportNo – it just stops the container from going beyond that width, on smaller screen sizes the container will just shrink to fit.
December 30, 2020 at 5:00 am #1599303EnricoThank you David.
You helped me a lot!December 30, 2020 at 5:16 am #1599314DavidStaffCustomer SupportGlad to be of help
-
AuthorPosts
- You must be logged in to reply to this topic.