Community Forums › Forums › Archived Forums › Design Tips and Tricks › Increase Tagline Font Size and Weight in Atmosphere Pro
- This topic has 12 replies, 2 voices, and was last updated 7 years, 10 months ago by unmaskedcomm.
-
AuthorPosts
-
June 10, 2016 at 1:16 pm #187340unmaskedcommMember
I need to increase the font size and weight in Atmosphere Pro on my site jacquelineljones.com (titled Healthy Economic Solutions). Instructions for other themes have left me totally confused. Here is the only section I found in the style.css that's labeled site descriptions:
.site-description {
http://jacquelineljones.com
display: block;
height: 0;
margin-bottom: 0;
text-indent: -9999px;June 18, 2016 at 5:42 pm #187817ChristophMemberHi,
just add text-size and font-weight to that selector.
(and remove text-indent: -9999px)
June 22, 2016 at 12:48 pm #188034unmaskedcommMemberThat creates a tagline at the top. I want one in the page 1 widget. Here are the changes I made for the title:
.front-page-1 .widget-title {
font-size: 42px;
font-size: 6rem;
font-weight: 700;
letter-spacing: 0;
margin-bottom: 10px;
text-transform: none;
}I tried to do the same thing with the next set of codes, but it didn't work. The first set is approximately what the original codes looked like (I didn't save them):
.front-page-1 p {
font-size: 24px;
font-size: 2.4rem;Here are my changes:
.front-page-1 p .widget-content {
font-size: 24px;
font-size: 5rem;
font-weight: 500;
letter-spacing: 0;}
Am I on the right track? What else can I do?
June 22, 2016 at 1:01 pm #188041ChristophMemberHi,
yes, using the site-description selector will change the site description / tagline.
Make sure that the px and rem values keep the 10:1 ratio.
60px
6rem50px
5rem.front-page-1 p should be enough.
No need to use .front-page-1 p .widget-content
June 22, 2016 at 1:11 pm #188043unmaskedcommMemberIs this how it's supposed to look:
.front-page-1 p .site-description {
font-size: 40px;
font-size: 4rem;
font-weight: 700;
letter-spacing: 0;So far nothing has changed.
June 22, 2016 at 1:25 pm #188046ChristophMemberNo, site-description is only for the, well, site description.
.front-page-1 p
should be all you need.Make sure to clear the browser cache.
June 22, 2016 at 1:34 pm #188050unmaskedcommMemberI don't think it's a problem with the cache. I can see changes to the title by refreshing my browser. What else could be wrong?
June 22, 2016 at 1:37 pm #188052ChristophMemberIt looks like this if I change .front-page-1 p in the Inspector
http://prntscr.com/bjpbnq
June 22, 2016 at 1:44 pm #188054unmaskedcommMemberI think it needs changes to the code. The tagline increased to the same size font with a thinner font weight when I checked paragraphs in the customizer.
June 22, 2016 at 1:49 pm #188055ChristophMemberIf you are using customizer styles, they will override your changes to the style.css
Because your website is behind a coming soon page, I cannot see what is actually happening with the code.
June 22, 2016 at 1:52 pm #188056unmaskedcommMemberI just disabled Maintenance Mode.
It does the same thing when I type it directly into the widget area. Is there another place to input the text, or a way to get the widget to pull text from the settings?
June 22, 2016 at 2:00 pm #188058ChristophMemberOk. You did not wrap the text in p tags, so all variations of .front-page-1 p cannot work.
Either wrap the text : <p> your text </p>
or you could try
.front-page-1 .textwidget {
font-size: 36px;
font-size: 3.6rem;
font-weight:500;
}
June 22, 2016 at 2:04 pm #188059unmaskedcommMemberThat worked. Thanks.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.