How-to: Two Website Project fixes

I have provided assistance via screenshare to several KINE 320 students during the past few days. Two issues have been consistently raised, so I thought I’d post the fixes here, in case you, too, want to address them on your website.

Issue 1: Education Details on One Line

The first problem (shown in the image below) is that all of the Definition Terms (<dt>) and Definition Data (<dd>) elements (Major, Concentration, etc.) within one Definition List (<dl>) appear on one line.

Screenshot of dl problem before fix

Before: all definition list elements appear on one line

This issue may also affect the content in your aside section. If you want to fix this, you can paste the following code into the bottom of your updated.css file:

dd:after {
  content: '\000A';
  white-space: pre;
}

and now your definition lists should look like this:

Screenshot of dl problem after

After: each definition list term and data appears on its own line

Issue 2: Adding Padding to the Main Content

The second issue is that some people don’t like the way the left side of the content bumps right against the edge of the header and footer, especially when the content touches the end of a smaller computer screen. Here is a screenshot example, where the ‘A’ in ‘About’ is flush against the green header and brown footer:

screenshot of padding issue before fix

Before: the ‘A’ in ‘About’ is flush against the left side of the header

If you want to fix this, add the following line to your updated.cssfile and be sure to check every page for any unexpected alignment changes:

main {
  padding: 0 2%;
}
screenshot of padding issue, after fix

After: the ‘A’ in ‘About’ is has some padding, for aesthetics

Reach out if you have any other pressing issues that you think other students would benefit from knowing about!

, ,

Leave a Reply