Jump to content

Archived

This topic is now archived and is closed to further replies.

WebDev

Aligning the iBox content

Recommended Posts

WebDev

As you can see in the attachment, the content in the list boxes are not aligned.

 

I usually can solve these things quickly, but I am unsuccessful this time.

 

It is aligning in the center, and I want all of it to the align to the left.

 

It is using a basic <li></li> structure, nothing fancy.

 

I tried p align, putting an align in the li style tags, and that did not work.

 

Any recommendations on how to counteract this?

 

The teal line is where we want the content lined (which is obviously left). The bullet points seem somewhat aligned left, but it is all centered which is not what we want.

Share this post


Link to post
Share on other sites
Danny

Hi,

 

Change the text alignment option from center to left.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
WebDev
I went into the settings of the iBox, and I see it nowhere. I just see custom or inline CSS style boxes, Danny.

Share this post


Link to post
Share on other sites
Danny

Can you provide a link to the site in question please.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
WebDev

For privacy reasons, I sent the site to your PM box.

 

Top Media on Left would accomplish what we needed if it did not align the content above the paragraph including title and icon to the left.

 

Here are the settings I see:

Screen%20Shot%202015-04-06%20at%207.13.2

Share this post


Link to post
Share on other sites
Danny

Okay so firstly your HTML isn't valid, you're using <li>...</li>, but have no <ol> or <ul> wrapping those lists. Therefore, you're going to need to edit your HTML and add the a <ul> </ul> wrapping your list code. Then add the following CSS:

 

.section-ibox ul {
  list-style-type: disc;
  text-align: left;
}

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
WebDev

 

Okay so firstly your HTML isn't valid, you're using <li>...</li>, but have no <ol> or <ul> wrapping those lists. Therefore, you're going to need to edit your HTML and add the a <ul> </ul> wrapping your list code. Then add the following CSS:

 

.section-ibox ul {
  list-style-type: disc;
  text-align: left;
}

 

Danny,

 

I have another question to field if you do not mind.

 

I am using this code in the CUSTOM CSS:

.section-ibox ul {
  list-style-type: disc;
  text-align: left;
}
 
 
ul
{
}
 
 
 
 
It works great, except:
  • The arrows apply to the menu on the mobile website and on the area I need them, too (except on the mobile version - you can barely see them). Please check the link I PM'd you (the website), and you will see what I mean.
  • I would like for the arrows to apply strictly to the box I attached in my first post, instead of everywhere else like it is. I read about applying a custom CSS property and using it for the UL tags. Can you provide the code so that I may do this? Example ul.a is the CSS and then <ul style="a">? Not sure how that would work.

Thank you.

Share this post


Link to post
Share on other sites
Danny

If you want those custom list style to apply only to your boxes, you will need to apply the list style image to the boxes only. At the moment you have applied that list style image to the main ul class and therefore, anything that contains a ul that isn't styled will use your image instead. Therefore, remove the ul code you listed above and apply that list-style image to your boxes class.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
WebDev

If you want those custom list style to apply only to your boxes, you will need to apply the list style image to the boxes only. At the moment you have applied that list style image to the main ul class and therefore, anything that contains a ul that isn't styled will use your image instead. Therefore, remove the ul code you listed above and apply that list-style image to your boxes class.


Right. I was asking if you could provide the code for that as I am unsure?

Share this post


Link to post
Share on other sites
Danny

Yeah, I have told you above what you need to do. Please be aware that our customisation support is very limited. Therefore, I recommend you inspect the element yourself via Google Chromes dev tools.

 

If you're unsure how to use these tools, check out the following tutorial as it is awesome - http://discover-devtools.codeschool.com/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×