Hidden bullet images

I have page here that contains a custom bulleted list: http://zoomapartmentfinder.com/terms-of-service
I know how to adjust margins, padding and indent to show what I call a hanging indent list, meaning the bullet is the only item hanging out to the left and the multiple line text aligns left to the right of the hanging bullet.

In this case, the bullets disappear when I apply these selectors. I was hoping someone could tell me how to modify the Drupal style sheet or something else to apply inline styles in the right way and show the bullets when they hang left.
weknowjackAsked:
Who is Participating?
 
RobOwner (Aidellio)Commented:
The learning curve for bootstrap isn't steep but you said you're not a coder so I'm really unsure how steep that would be.  Essentially you put all your content inside <div> tags that have special classes (rows and columns of certain size), where the bootstrap css file determines the required width based on the device you're viewing it on.

Back to your question, the issue is the template and how the bullets are inserted.  The way it is done doesn't give you the ability to create a hanging indent.  If you're able to wrap each of the text components of the bullet like this:

<li>
<div>bullet point stuff goes here</div>
</li>

then you can get a workaround like this:

#disclaimer-list li:before {
    float: left;
}
#disclaimer-list li > div {
    float: left;
    width: 95%;
}
0
 
RobOwner (Aidellio)Commented:
As the bullet is inserted :before the text in each li, try floating it as that seemed to work when inspecting your site

li:before {
    float: left;
}
0
 
weknowjackAuthor Commented:
Thanks. It works ok until the 4th bullet which breaks into 3 lines. The 3rd line hangs left. Same with any <li> that has more than 2 lines, I suppose because the bullet itself is what is pushing them right. I tried margin, padding and indent but they all seem to create a different problem.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
weknowjackAuthor Commented:
Oops. I'm not sure I'm placing the code in the right place. I tested it using Firebug and the CSS Editor plugin. Then just now when I place your code into the style.css file it doesn't show the change. Firebug shows that the css for the page is in the page, but it isn't that I can tell.
0
 
weknowjackAuthor Commented:
Now it is showing as I described in my first reply to you. I guess the server took a few seconds to update. As you can see the third line hangs left.
0
 
RobOwner (Aidellio)Commented:
That's a min height issue. I've tried to get around this with css only but i am thinking you'll need some JavaScript to calculate the height of each section or just set the min height
0
 
weknowjackAuthor Commented:
Min-height of what? Hard to believe js is the only real solution for something so common.
0
 
RobOwner (Aidellio)Commented:
min-height of the bullet point.  This would set every bullet point to the maximum possible height e.g. 3 lines of text if that's going to be the maximum

I understand your frustration, I'm only trying to work with what you've got and the template you're using.  I wouldn't do it this way but rather use a templating engine like bootstrap http://getbootstrap.com.   It's also important to note that your site isn't responsive, meaning that it can only be viewed at a certain resolution or higher.  On smaller screens like tablets and phones, the site becomes unusable (hence using bootstrap as it automatically arranges your content based on the width).  I'm not sure how much you've invested in this template but I would strongly suggest changing it to make it responsive.  This would also allow you to add bullet points with corresponding text that have the hanging indents you're after.

Because the template inserts the bullet into the same element as the content (via the :before pseudonym), we are limited to modifying either the <li> element (that includes the :before) or targetting just the :before element.  As the height isn't known at any stage, js would be used to determine that to set the height of the :before element.
0
 
weknowjackAuthor Commented:
I paid to have this site mobile friendly. I run it through the Google Mobile Friendly test and it passes. However, you are correct that it is not nicely responsive. I'm not a coder. I'd have to farm out the js. What is the learning curve for bootstrap? I have several sites that need to be converted to responsive.

And back to my question, are you saying that the issue I'm having with the CSS  and bullets are related to the template itself?
Can the way the template inserts the bullet be changed fairly easily?

Thanks for the help.
0
 
weknowjackAuthor Commented:
Excelent
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.