Allignment issues after creating custom.css.

cmalley143

I created a custom.css file based on another issues with the template and this has let to some alignment issues on my site.

Bulleted lists are not aligning properly now - see attached. https://www.nhcpr.com/training-programs/ems-training/gems-geriatric-education-for-ems
Images are not aligned correctly. In the example the imagae is supposed to be on the left and the text to the right of it. https://www.nhcpr.com/training-programs/ems-training/phtls-prehospital-trauma-life-support/998-acls-full-course-43/individual-registration
Highlighed box is now indented and should not be. https://www.nhcpr.com/emsexams/emt-emr-psychomotor-exam
*

aman204

cmalley143 Hi

Having reviewed, The custom.css file located at /templates/ja_university_t3/css/custom.css shouldnt have any adverse effect from the CSS added in specific file for specific elements as shown in screenshot as there isnt any CSS seen targeting them

In regards to your specific queries:

a) Try add this to custom.css file and adjust margin value accordingly :

#t3-content .eb-container .eb-category-description table ul li{margin-left:10px !important;}

b) Change span here - <div class="right span11"> to <div class="right span10">

Code in reference -

<div class="right span11">
<h3>These are the required course books. &nbsp;</h3>
<p>If you do not have access to these books for class, you will need to purchase one below. <a href="/files/books/amls_reg_book.jpg" target="_blank" rel="noopener noreferrer"><br></a></p>
<p>ISBN 9781284180343,&nbsp; 2020 9th&nbsp;Edition, 736 pages</p>
</div>

c) Try add this also to custom.css file :

#t3-content .eb-container .messagetop{margin-left:0 !important;}

Kindly ensure to clear your browser cache if changes dont reflect.

cmalley143

Thank you.

Is there code to .css that will fix the bulleted list?

aman204

cmalley143 Is there code to .css that will fix the bulleted list?

Upon reviewing again, Can see the bullet list positioning now as envisaged. Ref: Screenshot

If wishing to refer to some other section, You may kindly let us know by way of screenshot showing the specific section along with direct site link [if specific section is not on homepage]

cmalley143

Can you confirm that this is correct?

.eb-container .eb-category-description table ul li{margin-left:10px !important;}

You screenshot showed me something different.

aman204

cmalley143 Hi

You may review again as I had suggested to add this CSS in the trailing forum post -

#t3-content .eb-container .eb-category-description table ul li{margin-left:10px !important;}

which is seen in the specific CSS file and appending as well

cmalley143

Yes. That line is there but it is not changing the bulleted list.

teitbite

cmalley143 Hi. I can see it worked. Please try to clear cache of joomla and browser. Maybe change were not released for You yet.

cmalley143

It seems to work fine on that page but not on
https://www.nhcpr.com/training-programs/american-heart-association/acls-advanced-cardiac-life-support
or
https://www.nhcpr.com/training-programs/american-heart-association/basic-life-support-bls

Ninja

cmalley143
Hi
On these pages there are only 1 row of list items and alignment is same with content.
take a look here http://prntscr.com/nsmk1r
Kindly give us screenshot of issue you are facing, it help to understand what exact issue you are facing on the site.

Regards

cmalley143

In the screenshot the bulleted list should be lined up with the text.

Ninja

cmalley143
Hi
Bullets were not the starting of text, it always the text character, you can see similar on other pages you shared.
If a text has bullets it will push them in. Bullets are not part of text http://prntscr.com/nt42aj

cmalley143

How can I get the bullets to align with the text. It was working correctly prior to creating the custom.css file.

teitbite

cmalley143 Hi. Please try add this to css:

.eb-container ul {
    margin-left: 12px;
    margin-bottom: 12px;
}

cmalley143

Hi,

Thank you for that but unfortunately that did not work.

Ninja

cmalley143
Hi
Increase the margin-left value to 16px and it work fine http://prntscr.com/nv6szp
Regards