Are these styles optimal for my table?

[etidd]

Hello everybody,

Yes, it’s me again! This time, I have done it all on my own to set up another set of tables on a new page that will host a few dozen document templates for viewers to download that arrive from my YouTube channel. I don’t really have any issues with it, and I did go through and validate the code as I was setting it up.

Can these styles and/or markup be optimized in any way?

-I noticed that the “Download It!” links get a bit squished as the viewport size becomes a bit narrow.

That’s about all I can think of, but please, please let me know if you see some improvements that can be made.

My Templates Page

Thanks, everyone! SitePoint is da bomb!

-ty

/***************************/
/*   templatesection.css   */
/*  2017.4.10  22:00 hours */
/***************************/

/* PRESETS */
html {
    box-sizing:border-box;
}
*, *:before, *:after {
    box-sizing:inherit;
}
.cf:before,
.cf:after {
    content:"";
    display:table;
}
.cf:after {
    clear:both;
}
/* end PRESETS */

/* ************ page structure ************ */
body {
    background:url(bgrecords.gif);
    background-attachment:fixed;
    font-family:'Times New Roman',Times,serif;
}
.content {
    width:95%;
    max-width:1040px;
	min-width:350px;
    border:0.5em solid transparent;
    border-image:url("publicrecordsborder.png")8;
    background-image:url("bgdarker.jpg");
    background-clip:padding-box;
    padding:1em;
    margin:0 auto;
	text-align:center;
}
/*** header ***/
h1 {
    font-size:3em;
    line-height:1;
	margin:0;
	color:#FFF;
}

p {
	font-size:1.3125em;
	line-height:1.375; 
}

/*** inner structure ***/
.body { 
	margin:12px 8px;
	padding:10px 6px 26px; /* padding for the links */
	background-image:url("bglight.jpg");
	border:4px inset #797979;
}

/** tables **/
table {
    width:80%;
    border:0.15em solid #000;
    border-collapse:collapse;
    margin:2em auto;
}
thead  tr:first-of-type { 
	font-size:1.8em;
	font-family:'Arial',serif;
	border-bottom:0.05em dashed #000;
}
thead tr:last-of-type { border-bottom:0.05em solid #000; }
thead th { padding:6px 0; }
thead tr:last-of-type  th { border-left:1px dotted #000; }
tbody { font-size:1.3125em; }
tbody tr { border-bottom:1px dotted #000; }
tbody tr td { 
	border-right:1px dotted #000;
	padding:5px 0;
}

/* links */
a {
    display:inline-block;
}
a:hover,
a:focus {
    text-decoration:none;
    color: #4d4dff;
}
a:visited {
    color: #603;
}
a:visited:hover,
a:visited:focus {
    text-decoration:none;
}

/* links at bottom */
.back a { font-size:1.5em; }
.back a:hover, .back a:focus {
	color:#4d4dff;
	text-decoration:none;
}
div.back {
	margin-bottom:15px;
}
div.back:last-of-type { margin-bottom:0; }


/* general styles */
.content p {
    margin:.75em 4%;
}
 
.content #copyright {
    margin:0;
    font-size:1em;
    font-weight:bold;
	color:#FFF;
}

.italic { font-style:italic; }
 
@media screen and (max-width:37em) {
    .content {
        width:auto;
        padding:0.25em;
    }
    h1 {font-size:2.25em;}
    p {font-size:1.325em;}
}

[SamA74]

@etidd

Can these styles and/or markup be optimized in any way?

One thing that stands out is you are getting scrollers at about 356px. You need to get down as far as 320px for mobiles.
That’s caused by the min-width:350px; on .content, which I don’t see the point of.

@etidd

-I noticed that the “Download It!” links get a bit squished as the viewport size becomes a bit narrow.

Without that min-width things will get tighter. I would release the table from its width: 80% on smaller screens and let it fill the container and create more space inside.

This point is really just preference about naming. I don’t like that you have a class on a div named .body as it could cause confusion with the element body. I would call it something else, or use the main element there (Though some old browsers get confused about main, if you are still supporting them).

[etidd]

Hi Sam,

Great feedback. I have seen your posts before.

I went ahead and renamed that inner container to “.mainbody”. I reset the width of the tables to 100% at narrow widths, and the min-width on .container has been set to 320px.

I can’t see any reason why it’s not ready to roll now.

-ty