2 replies [Last post]
kev
kev's picture
Offline
newbie
Last seen: 2 years 16 weeks ago
Timezone: GMT-4
Joined: 2017-07-24
Posts: 2
Points: 3

I am building my website and doing my about page (I taught myself CSS, so I'm not advanced). I am having a hard time coding it so that it works flawlessly. I am facing the following difficulties (especially when testing with a smaller screen size):

  • I don't want text to appear under the image. When adding padding/margin, and when the broswer window is smaller, there is a big white box under the image and the text goes under the white box. I don't want to add too much padding to avoid having a scroll bar.
  • The line height of the items in the table is too high, but when the browser window is smaller, the items turn into 2 lines of text and the the second line almost touches the first line.
  • For some reason, the borders disappear in Chrome.

Here is the page:
http://www.envisionretouching.com/about/

Could someone please direct me to resources about the areas of CSS I need to know to make this works flawlessly/with all screen sizes? Maybe just the terms so I can look them up, or some pointers for some direction.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 23 hours 39 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

Typical WP rubbish pile

Way too much code for such a simple page. 29 scripts and 21 stylesheets totaling ~1.6 megaBytes is ridiculous. You're just asking for problems.

Your whole set of IE conditional comments is just silly. I have no idea why Paul Irish suggests all that BS, he's actually pretty bright.

See below, a simplified markup and css that do as you ask (Maybe Smile, not thoroughly tested).

You asked for references for study. Read and study carefully the articles of Jason Knight. He's rude, crude and uncouth, but really knows his stuff (except for the few areas he disagrees with me). See Progressive Enhancement - Development from the inside-out. If you're thin skinned, toughen up. You'll need it.

A simple example:

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta content=
    "width=device-width, height=device-height, initial-scale=1"
          name="viewport">
 
    <title>
      Test document
    </title>
 
    <style type="text/css">
    /*<![CDATA[*/
 
    body {
	background-color: white;
	color: black;
	font: 100%/1.5 sans-serif;
	margin: 0;
	padding: 1em;
    }
 
    p {
	font-size: 1em;
    }
 
    #wrapper {
	display: table;
	max-width: 761px;
    }
 
    #aboutpic {
	float: left;
	padding: 0 2em;
    }
 
    #aboutpic img {
	vertical-align: top;
	width: 260px;
    }
 
    #abouttext {
	display: table;
	padding: 0 1.5em;
    }
 
    #abouttext p {
	text-align: justify;
	margin: 0 0 1.5em;
    }
 
    /*]]>*/
    </style>
  </head>
 
  <body>
    <div id="wrapper">
      <p id="aboutpic">
        <img alt="Picture of Keven"
		src=
		"http://www.envisionretouching.com/wp-content/uploads/2017/07/erkeven.jpg">
      </p>
 
      <div id="abouttext">
        <p>
          My name is Keven—I’m a high-end photo retoucher from Montreal,
          Canada. I started out studying photography and retouching at an
          international photography school. From there, I opted for
          retouching and set off to further my education and develop my
          skills with extensive study of quality and paid training. I also
          sought out mentoring from highly skilled retouchers in the
          industry.
        </p>
 
        <p>
          I am someone who by nature values quality work. Having studied
          from credible sources, I know and am well-accustomed to best
          practices and industry standards, from workflows and methods,
          lighting, photographic notions, file and colour management, to
          printing. Along with quality, I also value efficiency and good
          work relations.
        </p>
      </div>
    </div>
    <!-- end wrapper -->
  </body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

kev
kev's picture
Offline
newbie
Last seen: 2 years 16 weeks ago
Timezone: GMT-4
Joined: 2017-07-24
Posts: 2
Points: 3

Thanks.

Hi, Gary.

Thanks for the response.

Yeah, I turned off a bunch of plugins that came with the theme. Would that be the reason why there are so many scripts and stylesheets?

I redid all of my CSS based on the CSS you gave me. I also found a HTML error in my table. So far, everything works flawlesslessly, even if you reduce the browser window to half a 13-inch monitor.

What do you think?

http://www.envisionretouching.com/about/

This is the CSS for the about page:

#aboutwrap {
    display: table;
    max-width: 790px;
    margin: auto;
    padding-top: 25px;
}
#aboutimage {
    float: left;
    margin: 4px 30px 0 0;
}
#abouttext p {
    display: table;
    text-align: justify;
    margin: 0 0 14px 0;
}
#tableabout { 
    padding: 10px 0 18px 0;
}
#tableabout table {
    border-collapse: separate;
    margin: auto;
    font-size: 12px;
    border-top: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
    padding-top: 5px;
    padding-bottom: 11px;
    width: 450px;
}
#tableabout table th {
    border: none;
    text-align: left;
    line-height: 17px;
    padding: 11px 6px 5px;
}
#tableabout table td {
    border: none;
    line-height: 17px;
    padding: 3px 6px;
}
#aboutcontact a {
    color: #c8c8c8;
}
#aboutcontact a:hover {
    color: #323232;
}