creating inline elements in a widget area

[codebot5000]

Hi, I created an unordered list in the widget area of the Parallax Pro theme. I want to put it inline but keep the P elements directly beneath the li elements. Here is my code:

[Christoph]

Hi,
just a friendly suggestion; The next time you paste code, please use code tags (found just above the editor, second from the right)

I don't see any ul or li elements in the code you pasted.

Make sure that "Automatically create paragraphs" is not selected at the bottom of the text widget.

---

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

[codebot5000]

Sorry about that I guess it took out my tags. This is what I meant to put in there

<ul>
<li><i class="fa fa-line-chart fa-4x fa-spin-hover"></i><p>SEO Friendly</p></li>
<li><i class="fa fa-mobile fa-4x fa-spin-hover"></i><p>Fully Responsive</p></li>
<li><i class="fa fa-code fa-4x fa-spin-hover"></i><p>Customized For your Needs</p></li>
</ul>

and the css:

#text-4 .textwidget ul li {
position: relative;
display: inline-block;
}

Automatically create paragraphs is not selected. I have tried to a million thins to get these to go horizontal but nothing seems to work.

[Christoph]

No problem.
What exactly do you want to have on one line?
The individual font-awesome and <p> tags on one line,
http://screencast.com/t/7ZUEAPUlUPF1

or all the

elements on one "line" with font-awesome on top of the <p> tags,
http://screencast.com/t/VjD4g8aPMw

---

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

[codebot5000]

I'm trying to do all the elements on one line like your second example. Right now they are stack up on top of each other. The thing is, I don't want to have the text spinning with the icons. That's why I made separate p tags instead of putting them in the i's. I know how to do this with basic CSS, but it doesn't seem to work within the widget area. Working with CSS in WordPress Seems to be a pain.

[Christoph]

<span> tags are working to put everything on one line:
http://parallax.excellentwpsites.com/

---

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

[codebot5000]

Could you copy and paste your css for this? I cannot find it in your style sheet. Are you able to get the writing underneath the icons?

Thanks a lot I appreciate your help.

[codebot5000]

I tried this but it doesn't seem to do anything

#text-2 .textwidget li span {
    display: inline-block;
}

[Christoph]

I believe you are too specific with your selectors.

#text-2 li {
display: inline-block;
}

I changed the <span> back to <p> to get font awesome icons and text on separate lines and added some padding to the sides.

<ul>
<li><i class="fa fa-line-chart fa-4x fa-spin"></i><p>SEO Friendly</p> </li>
<li><i class="fa fa-mobile fa-4x fa-spin"></i><p>Fully Responsive</p></li>
<li><i class="fa fa-code fa-4x fa-spin"></i><p>Customized For your Needs</p></li>
</ul>

#text-2 li {
display: inline-block;
padding: 0 20px;
}

---

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

[codebot5000]

I got it! Thanks for all your help. I ended up doing this:

<ul>
<li><i class="fa fa-line-chart fa-4x fa-spin-hover"></i><p>SEO Friendly</p></li>
<li><i class="fa fa-mobile fa-4x fa-spin-hover"></i><p>Fully Responsive</p></li>
<li><i class="fa fa-code fa-4x fa-spin-hover"></i><p>Customized For your Needs</p></li>
</ul>

CSS:

#text-11 .textwidget ul li {
	position: relative;
	display: inline-block;
}

[codebot5000]

Oh that works too thanks for your help!

[Christoph]

You are welcome. 🙂
I´m glad you found a solution.

Could you please set the topic as resolved so it can be closed?

---

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

[Author]

Posts