Font size for landing pages
-
Good afternoon,
I have spent days trying to learn about CSS and I’m not getting anywhere. I need to do the following on the Gateway theme:
1. The font size for the page titles on my About and Contact pages are not the same size as on the Home page. I want all the font sizes for the page titles to be the same as on the Home page. (Font size for ‘h2.entry-title’ the same as font size for ‘h2.page-title’.) Can this be done?
2. On my Home page the page title (‘Home’) shows on the page, which I don’t want there. (On the Gateway demo page, you will see that they have “Home” on their menu, but the page title is “Welcome to Gateway”. That is what I want on my home page.)
3. While ‘inspecting’ my site’s CSS, I noticed several places where it says “errors and warnings” in the top right corner. I have no idea what it means – is it a serious issue and should these errors be fixed?
Regards,
KarinThe blog I need help with is: (visible only to logged in users)
-
I am so sorry, I have another issue regarding font size that I can’t solve:
4. The font size for the text widget in the footer area: The font size for the title is fine, but the font size for the body text is too large. I want the body text to appear smaller than the title. How can it be changed?
Regards,
Karin -
Hi Karin,
1. The font size for the page titles on my About and Contact pages are not the same size as on the Home page. I want all the font sizes for the page titles to be the same as on the Home page. (Font size for ‘h2.entry-title’ the same as font size for ‘h2.page-title’.) Can this be done?
Yes, this can be done. Go to Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS.
.page .entry-title { font-size: 4.2rem; }2. On my Home page the page title (‘Home’) shows on the page, which I don’t want there. (On the Gateway demo page, you will see that they have “Home” on their menu, but the page title is “Welcome to Gateway”. That is what I want on my home page.)
Open your home page in the editor and change the title as desired.
-
3. While ‘inspecting’ my site’s CSS, I noticed several places where it says “errors and warnings” in the top right corner. I have no idea what it means – is it a serious issue and should these errors be fixed?
Could you take a screenshot of the errors and upload it to your media library and we can take a look.
4. The font size for the text widget in the footer area: The font size for the title is fine, but the font size for the body text is too large. I want the body text to appear smaller than the title. How can it be changed?
The following targets the body font size in widgets in the footer. Adjust as desired.
.footer-widgets aside { font-size: 1.8rem !important; } -
Hi there,
Thank you so much for your help. Everything you suggested worked perfectly!
4. I have uploaded a screenshot of the CSS elements that have errors and warnings to my media library for you to have a look at. (I only uploaded one example, because there are errors on every page and with every font.)
After I made the changes, there are a few other issues that cropped up:
5. The font size for the post titles below the post images on my home page are now too large. How can I make the font size smaller? (I uploaded a screenshot of my home page as it looks now.)
6. When I go to an actual post, the post title is too small and the headings (h1, h2, h3, etc) are much too large. How do I change that? (The third screenshot is of an actual post showing the post title and h1.)
7. The widget titles in the sidebar are a little too small. How can I change that?
Thank you again for your help so far – I appreciate it very much.
Regards,
Karin -
#5: Whoops, let’s change the CSS selector on .page .entry-title to body:not(.home).page .entry-title to exclude the home page from that font size change.
#6: For search engine optimization purposes, I would suggest not using h1 within the content area. I would suggest h3, which would be the size of the single post titles as they are now. Generally search engines expect h1 to be used for site titles and possibly page titles, but not in the body of the content. See what you think with them set to h3 instead of h1.
For the post titles, those pull from the custom font h3 CSS rule, so what we can do is create a more specific CSS rule so that our font size change will only affect post titles. Add this to your custom CSS and adjust as desired.
.wf-active .post .entry-title { font-size: 2.8rem; }#7: For the widget titles in the sidebar, add the following and adjust.
#secondary .widget-title { font-size: 1.6rem; } -
Good morning,
Thank you and thank you again. It is all perfect – exactly as I’ve been wanting it for weeks!
Have you had a moment to look at the issue relating to my problem number 4? I don’t know whether it really is an issue and worth worrying about, but I would appreciate your feedback on that.
Regards,
Karin -
I left a message for one of our developers and asked them to take a look at the errors showing up in Chrome. I’ll post back as soon as he gets back to me.
-
-
Hi there, our developer has checked out the errors and warning and says not to worry about them. One of them is caused by a Chrome browser extension and the warnings are related to jQuery and are not an issue.
-
-
- The topic ‘Font size for landing pages’ is closed to new replies.
WordPress.com Forums 