Take the 2-minute tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.

I've recently tried my hand at coding a website for the first time in quite a while. It took me some doing, but I got everything working the way I want. The site is live, it works well (to my satisfaction, at least) on mobile devices and desktops alike.

However, I can't help but feel that the code is a bit on the bloated side, particularly the CSS. This jsfiddle is a stripped down version of the main page of the site, which has a responsive layout, as you can see. But the means I used to achieve it seem rather hacky, and certainly not as typographically attractive as I'd like. Below is the pared down HTML. Nav and header have been excluded owing to low relevance to the issue:

<body>
    <main>
        <section>
                <h2>Editing</h2>
    <span>that amplifies. Your voice matters; good editing is its megaphone, helping your message ring loud and clear. From quick and efficient proofreadings to comprehensive revision, from novels to theses, I've got you covered. </span>

            </br>
            </br>   <a href="services.html#editing"><span>Learn More</span></a>

        </section>
        <section>
                <h2>Writing</h2>
    <span>with character. Why not put my years slaving over a hot keyboard to work, so you can focus on what you do best? Whether it's to spec or an open-ended commission, you can expect short turn-arounds and a product of the highest quality.</span>

            </br>
            </br>   <a href="services.html#writing"><span>Learn More</span></a>

        </section>
        <section>
                <h2>Mentoring</h2>
    <span>tailored to your needs. I teach writing through a modular curriculum that evolves with my clients. Whether your goals lay in novels, scripts, nonfiction, scientific research or even internal memoranda, I can help you reach the next level.</span>

            </br>
            </br>   <a href="services.html#mentoring"><span>Learn More</span></a>

        </section>
        <section>
                <h2>Consulting</h2>
    <span>rooted in experience. Inspiration has struck, and now comes the hard part: fleshing out details. No need to worry about where to begin; with one-on-one creative consultation, I'll help you build a natural, productive brainstorming style.</span>

            </br>
            </br>   <a href="services.html#consulting"><span>Learn More</span></a>

        </section>
        </br>
    </main>
    <div></div>
    <header>    <a name="about"></a>

            <h1 class="cntr">About Me</h1>

            <h2>I'm guessing you're not here to find out what my favorite food is. No, you came here to find out if I'm qualified. Good call, by the way.</h2>

    </header>
    <p>I've been writing for as long as I can remember. In 2008, while working on my degree at Harvard University, I began offering my services as a freelance editor and writing instructor. I served as curriculum director for Bermuda's Building Blocks Academy shortly thereafter, and went on to amass experience with a wide range of clients in the years that followed. I served as the founding poetry editor of Peripheral Surveys in 2011, the same year in which I completed my Bachelor's of Creative Writing and Literature.</p>
    </br>
    <p>I've worked with a diverse clientele: from middle-schoolers to professional researchers, from five continents; and in fields as diverse as medicine, robotics, artificial intelligence, marketing, screenwriting, municipal government, law, and fitness. My main ambition is to write and make music for a living. I have too many hobbies, but I can safely say that cricket is <strong>not</strong> one of them. I mean, come on. Seriously?</p>
    </br>
    <p>If you think I'm a good fit for your needs, feel free to <a href="mailto:[email protected]">e-mail me</a>!</p>
    </br>
    <footer>    <a href="index.html">Home</a>
    <a href="services.html">Services</a>
    <a name="about">About</a>
    <a href="mailto:[email protected]">Contact</a>

        </br>   <span>All material &copy; Lander M. Kerbey, 2014</span>

    </footer>
</body>

And the CSS, which I'm including in its entirety because I suspect the bloat is widespread.

@import url(http://fonts.googleapis.com/css?family=Signika:600);
@import url(http://fonts.googleapis.com/css?family=Quattrocento+Sans);
 . {
    font-size:16px;
    margin:0;
}
body {
    color:#35525c;
    background-image:url(bckgrnd.png);
    font-family:'Quattrocento Sans';
    margin:0;
}
a {
    text-decoration:none;
    color:#35525c;
}

nav > a {
    vertical-align:-3rem;
    margin-right:.5rem;
}
h1, h2 {
    font-family:'Signika';
}
h1 {
    font-size:1.5rem;
}
h2 {
    font-size:1.25rem;
}
h3 {
    font-size:1.125rem;
}
header, section, p {
    max-width:24rem;
    margin:0 auto 0 auto;
}

section > h2, h3 {
    display:inline-block;
    margin-bottom:0;
}
section > a {
    display:inline-block;
    width:100%;
    text-align:center;
    font-family:'Signika';
    font-size:1.125rem;
    color:#b5dba8;
}
a > span {
    display:inline-block;
    height:1.5rem;
    width:8rem;
    background:#35525c;
    border:solid 1px;
    border-radius:.5rem;
}
em {
    display:inline-block;
    width:100%;
    font-size:1.125rem;
    text-align:center;
}
footer {
    padding-top:1rem;
    text-align:center;
    background-image:url(trgtpttrnweb.png);
    height:4.5rem;
}
footer > a {
    font-family:'Signika';
    margin:.5rem;
    line-height:2rem;
}
.cntr {
    width:100%;
    text-align:center;
}
div {
    height:12rem;
    background-image:url(trgtpttrnweb.png);
    box-shadow:0px 2px 2px 0px;
}
section > p {
    margin:0 0 1rem 0;
}
.type {
    font-size:1.5rem;
}
@media screen and (min-width:600px) and (max-width:960px) {
    main {
        width:90%;
        margin:0 0 2rem 7.5%;
    }
    section {
        display:inline-block;
        width:45%;
        margin:0 1.5rem 1rem 0;
        vertical-align:top;
    }
}
@media screen and (min-width:600px) {
    header {
        max-width:34rem;
    }
    header > h1 {
        font-size:2rem;
    }
    header > h2 {
        font-size:1.5rem;
    }
    h3 {
        display:inline;
    }
}
@media screen and (min-width:768px) {
    .logo {
        width:16.66%;
        left:1.5rem;
    }
}
@media screen and (min-width:880px) {
    nav, main, footer, p {
        font-size:18px;
    }
    @media screen and (min-width:961px) {
        main {
            width:90%;
            margin:0 0 2rem 7.5%;
        }
        section {
            display:inline-block;
            width:21.5%;
            margin:0 1.5rem 1rem 0;
            vertical-align:top;
        }
    }

Any help would be most appreciated.

share|improve this question

closed as off-topic by Joseph the Dreamer, Malachi, syb0rg, palacsint, cimmanon May 10 at 13:31

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions containing broken code or asking for advice about code not yet written are off-topic, as the code is not ready for review. Such questions may be suitable for Stack Overflow or Programmers. After the question has been edited to contain working code, we will consider reopening it." – Joseph the Dreamer, Malachi, syb0rg, palacsint, cimmanon
If this question can be reworded to fit the rules in the help center, please edit the question.

1  
So does the code work or not? The title suggests no. CodeReview is for working code only. –  cimmanon May 9 at 1:39
    
The HTML and baseline CSS are functional. However, it seems to interfere with alternate layout functionality via media queries. I'm hoping someone can shed some light on what in my core CSS would conflict, but I'd also like to know what I can do to clean up the CSS generally. –  user242007 May 9 at 1:41
    
You'll have to go to StackOverflow to get help with non-functioning code. –  cimmanon May 9 at 12:18
    
Welcome to Code Review! Please include your code in the question itself. We don't like being dependent on third-party sites as links tend to go away sooner or later. For more information see this meta question. It's good that you edit the post to make it fit our site, we just need you to do one more edit before it can be re-opened! –  Simon André Forsberg May 12 at 22:24
1  
This question is currently in the reopen-queue (because it was edited after being closed). Unfortunately, while the code may now be working, it is no longer part of the question. The code you want reviewed (the significant code) must be included with the question. –  rolfl May 12 at 23:29

Browse other questions tagged or ask your own question.