Increase Tagline Font Size and Weight in Atmosphere Pro

[unmaskedcomm]

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 {
display: block;
height: 0;
margin-bottom: 0;
text-indent: -9999px;

http://jacquelineljones.com

[Christoph]

Hi,

just add text-size and font-weight to that selector.
(and remove text-indent: -9999px)

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[unmaskedcomm]

That 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?

[Christoph]

Hi,

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
6rem

50px
5rem

.front-page-1 p should be enough.
No need to use .front-page-1 p .widget-content

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[unmaskedcomm]

Is 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.

[Christoph]

No, 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.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[unmaskedcomm]

I 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?

[Christoph]

It looks like this if I change .front-page-1 p in the Inspector
http://prntscr.com/bjpbnq

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[unmaskedcomm]

I 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.

[Christoph]

If 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.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[unmaskedcomm]

I 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?

[Christoph]

Ok. 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;
}

http://prntscr.com/bjpnsx

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[unmaskedcomm]

That worked. Thanks.

[Author]

Posts