Design for Home Page Widget 3 (Atmosphere) doesn't look right

[Doug]

I'm working with Atmosphere Pro, and have added a Front Page 3 widget Genesis Featured Page.

However, the formatting looks messed up. Here's a screen grab:

It's featuring a title and featured image, and I'm sure the backgrounds should be the same for both. And, not sure why it's putting white text on a light gray background.

I was expecting something more like what's featured on the Atmosphere demo:
https://my.studiopress.com/themes/atmosphere/#demo-full

This is the page on my site that I'm trying to feature.
http://arrovox.com/voicemarketing/

I've looked at the front page 3 code with Inspect, but am unable to tell anything about if there's a problem with it.

I'm curious if anyone can tell me if there's something wrong with my Front Page 3 code, or with how it's handling the featured page widget?

Thanks
Doug

http://arrovox.com/voicemarketing/

[Brad Dalton]

Should work fine if you following these setup instructions https://my.studiopress.com/documentation/atmosphere-pro-theme/front-page-setup/front-page-3-widget-area/

---

Tutorials for StudioPress Themes.

[Doug]

Thanks, Brad. I didn't quite realize how that works, but it's pretty slick.

I did run into some formatting issues, though. There's an odd indent in the text paragraph, and the button was aligned right, as was the Continue text inside the button.

Arrovox

I selected the first word in the text paragraph and using Inspect, found the following section.

==========
.featured-content .entry-content p {
font-size: 18px;
font-size: 1.8rem;
}

p {
text-align: left;
font-size: 16px;
text-indent: 80px;
}
=========

So I changed the 'text-indent' to 0, and that fixed the indentation issue in Inspect.

Here's a screen grab of that in Inspect:

However, when i went into Style.css to change the code permanently, I couldn't find the 'text-indent' element. Here's what was in the Featured Content code section:

=================
.featured-content .entry {
padding-bottom: 60px;
}

.featured-content .entry-content p {
font-size: 18px;
font-size: 1.8rem;
}

.featuredpost .entry-title {
font-size: 24px;
font-size: 2.4rem;
letter-spacing: 0.5px;
text-transform: uppercase;
}
==================

I don't understand how the code on the Style.css page is different than the code in Inspect. There's only one Featured Content section on style.css, correct?

Thanks for any additional input.
doug

[Author]

Posts