Community Forums › Forums › Archived Forums › Design Tips and Tricks › creating inline elements in a widget area
Tagged: css, parallax-pro, unordered lists
- This topic has 11 replies, 2 voices, and was last updated 9 years, 7 months ago by
Christoph.
-
AuthorPosts
-
July 1, 2015 at 8:56 pm #158104
codebot5000
MemberHi, 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:
- <i class="fa fa-line-chart fa-4x fa-spin-hover"></i>
<p>SEO Friendly</p>
- <i class="fa fa-mobile fa-4x fa-spin-hover"></i>
<p>Fully Responsive Designs</p>
- <i class="fa fa-code fa-4x fa-spin-hover"></i>
<p>customized to meet your needs</p>
I have tried to use this rule to get the the icons li elements in line but it does not work.
http://localhost
#text-4 .textwidget ul li {
position: relative;
display: inline-block;
}July 1, 2015 at 9:34 pm #158111Christoph
MemberHi,
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.
July 1, 2015 at 9:43 pm #158112codebot5000
MemberSorry 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.
July 1, 2015 at 10:47 pm #158117Christoph
MemberNo 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/7ZUEAPUlUPF1or all the
- elements on one "line" with font-awesome on top of the <p> tags,
http://screencast.com/t/VjD4g8aPMw
July 1, 2015 at 11:13 pm #158120codebot5000
MemberI'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.
July 1, 2015 at 11:55 pm #158123Christoph
Member<span> tags are working to put everything on one line:
http://parallax.excellentwpsites.com/
July 2, 2015 at 7:50 am #158147codebot5000
MemberCould 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.
July 2, 2015 at 7:56 am #158149codebot5000
MemberI tried this but it doesn't seem to do anything
#text-2 .textwidget li span { display: inline-block; }
July 2, 2015 at 9:04 am #158157Christoph
MemberI 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; }
July 2, 2015 at 9:05 am #158158codebot5000
MemberI 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; }
July 2, 2015 at 9:08 am #158159codebot5000
MemberOh that works too thanks for your help!
July 2, 2015 at 9:15 am #158162Christoph
MemberYou are welcome. 🙂
I´m glad you found a solution.Could you please set the topic as resolved so it can be closed?
-
AuthorPosts
- The topic ‘creating inline elements in a widget area’ is closed to new replies.