Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Refactoring?

HI,

If you look at this site here, and you look specifically at the margin of the page, and header, and you go on the page of articles, resources and contact, you see that there is an aligment problem with the aligment with the header and footer.

Because class col has margin left and right 15px but header doesn't, then I put header a new class with left right 15px and it seems it's ok.

Now lets go on the resources or contact page. I need to have a sidebar, that means i need to have a column with padding as that's the style I want, so what I did is i start the resource page like this 

    <div class="l-container">
    <section class="section-page">

        <div class="row">
        <div class="col all-1">
                Welcome to my resources page! Here I provide you with useful resources, tools, applications, and websites to help make your life easier. Whether it’s for web hosting, buying a domain name, setting up a WordPress blog, learning to code a website, starting an online business—it’s all here! I recommend adding this page to your bookmarks for convenient future reference.

                Transparency disclosure: Please keep in mind that some of the following resources are my affiliate links, and I’ll earn a small commission should you decide to make a purchase — at absolutely no cost to you! Keep in mind that I have thorough experience with each and every one of the following tools & websites, and I am only recommending them because they have helped me succeed in my business, and are incredibly useful. Don’t spend your money on any products or resources unless you think they will make your life a bit easier:)
        </div><!-- /col -->
        </div><!-- /row -->

        <div class="row">

            <article class="resource__post">
            <div class="row">

and

I do the contact page like 

 <div class="l-container">

        <div class="row">

            <section class="col xs-1 small-1 medium-1 large-7-10">
            <div class="section-page">

                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <h3>FAQ</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo


            <form>
            <div class="row">

You see, contact page has a sidebar so i need to wriap the section-page white bg on that column, and on the sidebar another section-page so there is a gap.

But all of that messes up my aligment with my header aligment.

And I'm not sure how I sould work against that with a grid ssytem.

WHat can I do?

1 Answer

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Never mind. I solved it. BUT, I'm sure there are more ways than one, so if anyone is going to tell their way, I'd appriciate it :)

Github code will be updated once i finish the good version, so in few hours : d