Removing indent from unordered list

donyapress · Member · Jan 21, 2016 at 5:57 pm
Copy link

Add topic to favorites
Hi,

I have added icons to a contact widget located at the bottom of my home page. I have used the following to align the information with the icons:
```
<ul id="services-list">
<li>
  <a class="image">
    <img src="https://akrosstranslations.files.wordpress.com/2015/12/phone391-1-copy.png" alt="Mobile Icon" />
  </a>+44 (0) 77 7514 XXXX
</li>
<li>
  <a class="image">
    <img src="https://akrosstranslations.files.wordpress.com/2015/12/mail-icon2.png" alt="Mail Icon" />
  </a>(email visible only to moderators and staff)
</li>
<li>
  <a class="image">
    <img src="https://akrosstranslations.files.wordpress.com/2015/12/map35.png" alt="Map Icon" />
  </a>London, United Kingdom
</li>
</ul>
```
Now, due to the addition of those icons, the email address does not fit in in line with its corresponding icon. Other than removing the icons, I thought perhaps the automatic indent could be removed to make more room for it. Would anyone know how to do that?

Thank you

The blog I need help with is: (visible only to logged in users)
staff-jeanpierreac · Staff · Jan 22, 2016 at 1:52 pm
Copy link
Hi there…

donyapress.wordpress.com is not the blog you would like help with, isn’t it? :) If it is, please, could you give us the exact page where you can find this list?

Have a great day!
donyapress · Member · Jan 22, 2016 at 2:31 pm
Copy link
No, my apologies, it’s not the one indexed by wp in my post. It’s akrosstranslations.com
thesacredpath · Member · Jan 23, 2016 at 8:20 am
Copy link
We can target that specific text widget by its unique CSS id and remove the left margin on the ul element with this.
```
#text-2 ul {
    margin-left: 0;
}
```
Note that all browsers render things slightly differently, so while this may appear all on one line in one browser, it may not in all. In addition, users can make changes to the preferences (default font size) or can zoom in or zoom out, so there is no guarantee everyone is going to see the email address on one line.
donyapress · Member · Jan 23, 2016 at 8:47 am
Copy link
Thank you thesacredpath, sadly that does not do the trick. Every targeted bit I have tried inserting before was visible on the site. Perhaps have I extended the template’s code to its limits in this case.
thesacredpath · Member · Jan 25, 2016 at 4:30 am
Copy link
Hi, I just went to Customize > CSS and added the code I gave and it took away the indent on your contact text widget. Where were you inserting the code?
donyapress · Member · Jan 25, 2016 at 10:47 am
Copy link
I got it, I did not know I should add it there, i’m still pretty new to this but thank you so much for your help and for your time. It’s very much appreciated.
thesacredpath · Member · Jan 25, 2016 at 8:53 pm
Copy link
Hooray and you are welcome! Sorry for not being more clear on where that went.

No items found.