Styling issue w/ Centric Child Theme

[sethbahookey]

Hello All,

I'm trying to follow the guide for the Centric theme and I'm entering in the 3 featured page section; however, the "Learn More" button is staying centered and not going right. What is causing this issue?

Also, you'll notice in the next section that it actually has half the font going in the center of the page/through the picture :/

This is pretty much dummy data for now but I just wanna get the formatting right before I flesh out the whole thing.

Thanks,
Seth

http://staging.dandycatdesigns.com/

[MoodyRiviera]

In regard to your first question, I looked at your site, and I see in the "Web Design" section, the "Learn More" button is centered...and you seem to be saying that you want that button to go to the right? Is that correct?

I'm wondering, because the text in that section is centered, and so it would seem only right that the "Learn More" button would also be centered...and if you look at the Centric theme demo those buttons are also centered.

Maybe I'm missing your point.

*MoodyRiviera*

[sethbahookey]

Moody,

Thanks for the quick response! You have been on top of my posts lately and I really appreciate that 😀

Yes, I want the button to go to the right. Basically if you look at the demo of the Centric theme I'm trying to mirror that demo site with my own stuff. You'll notice that the text and button are both on the right hand side. I followed the guide that was given with the purchase of this theme. Yet I'm struggling 🙁

Not sure what to do and maybe I'm just messing the feature page widget up? But I really don't think I am.

Regards,
Seth

[sethbahookey]

After some further investigation I think I know what the problem is, but I do not know how to solve it.

If you look at the demo page, you'll notice that the Learn More button is wrapped in a p tag. In my site the text and the learn more button are wrapped in the same p tag. How can I break these up?

Thanks

[MoodyRiviera]

Hi Seth,
I just tried looking at your site again, but seems to be unavailable...maybe you're working on it. I'll check in later to see if I can see it.

*MoodyRiviera*

[Erik D. Slater]

It's down for everyone: http://www.isup.me/http://staging.dandycatdesigns.com/

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[sethbahookey]

Whoops! Sorry guys I changed the domain for it

it's now at dev.dandycatdesigns.com

Thanks

[MoodyRiviera]

Seth,

I don't know if this is going to help...I am in no way any kind of expert at this stuff...but I've looked at your code in the area where you're having problems, and then compared it code in one of my own sites where I used the Centric theme...and one thing I noticed that was different was that I used the "Insert Read More Tag" on my page(s)...the page(s) that were linked to through the "Featured Pages" widget...and it doesn't look to me like you used the "Read More" tags...and maybe this has caused your problem, because when displayed on your home page maybe the widget doesn't know where to quit showing text.

Here's a screen shot showing my page that's linked to my home page through that same widget, and you can where I've used that tag.

http://www.wp4designers.com/more.jpg

*MoodyRiviera*

[sethbahookey]

Moody,

I noticed that the site kinda looks ok if i have it at a width of 1024 or less in resolution anything greater and it gets all messed up. Do you notice that too or is it just my computer?

[MoodyRiviera]

It does seem to look somewhat better at different widths, but I haven't see any width where it looks totally OK...sorry.

*MoodyRiviera*

[Gandt]

Sethbahookey

The answer is simple, for whatever reasons, the css is not telling the button (an <a> tag) to go to the right, so it isn't. To correct this issue per se, just add these lines of code to your css:

.home-widgets .more-link {
display:block;
float:right;
}

This makes the button go to the right. However, it still doesn't look right. You could additionally give it a right margin or what have you but the root of the issue goes deeper.

The general issue with that part of your site is that the whole section is not properly styled. A quick solution off the top of my head, broken down into various steps:

.home-widgets .featuredpage .widget-wrap {
  margin: 0;
  padding: 30px;
  width: 100%;
}

(I changed the padding and margin values, removed margin:0 auto to avoid floating to the center since your content is not really centered per se, and gave some sideways padding to recreate the look - please tweak the padding values as needed. Last but not least I got rid of max-width, since it was messing with the new structure)

Now, you have an unused widget title creating unnecessary spacing, so we have to hide it:

.home-widgets .widget-title {
display:none;
}

Now we need to fix the ugly negative margins on

.home-widgets .featuredpage .entry .alignright
and
.home-widgets .featuredpage .entry .alignleft

just set them to

margin:0;

Last but not least, we now have to add a new class that will help us align images to the left, without all the ugly negative value margins and what not. For the sake of examples let's use this naming:

.align-image-left {
display: block;
float: left;
margin: 0;
}

To fix the 2nd part that has the image on the right, simply make a new css class with the opposite value:

.align-image-right {
display:block;
float:right;
margin:0;
}

Don't forget to add these classes to your <a> elements or the fixes won't come into play.
The finished fix now looks like this:

[Author]

Posts