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

CSS CSS Layout Techniques Positioning Schemes Relative Positioning

Todd Squitieri
Todd Squitieri
8,001 Points
Posted by Todd Squitieri
Todd Squitieri
8,001 Points

Responsive Buttons and Columns

So I am making my first mobile-first, fully-responsive, website with CSS.

Here is a JSFiddle link for the project that I am undertaking: http://jsfiddle.net/toddsqui/cs8xt90q/

It's based on Guil's CSS tutorials.

A bit of context: My hope is to make this a blog about the trials and tribulations of being an EFL teacher in East Asia (where I currently reside).

To cut to the chase, I have two major problems that I need help with:

My first problem is with the buttons: How on Earth did Guil get his buttons to align in one row so perfectly, and how can I do the same? For whatever reason, his techniques just aren't working here. I want the buttons to align in one row with a 769 resolution and then become long horizontal bars that are stacked beneath the "Todd's Dystopian Blog," logo when the resolution becomes smaller (say, around 400 or so pixels).

I also want these stacked columns to align side-by-side, atop the footer around 400 pixels or so.

What is the minimal amount of coding that will solve both of these problems?

Any help would be much appreciated!

Thanks so much in advance,

Todd

6 Answers

Shaker Advertising
Shaker Advertising
5,395 Points
Shaker Advertising
Shaker Advertising
5,395 Points

Problem One - check the comments for clues

/* Remove the padding and margin on the UL that is placed there by the browser as a default style */
.main-nav ul{
    margin:0;
    padding:20px 0;
}

/* Use a display of inline block on the list items to set them next to each other */
.main-nav li{
    display:inline-block;
    border-radius: 5px;
    margin:0 10px 0 0;
    padding:10px 0;
    text-align:center;
}

/* Using a media query at the appropriate size you can set the list items back to a display of inline 
This will put them back ontop of each other
Be sure to adjust the margin to your liking
 */
@media screen and (max-width:400px){
    .main-nav li{
        display:block;
        margin: 10px 0 0 0;
    }
}

Problem Two Here I would consider setting the columns side by side to begin with and when you reach a small viewport you can then stack them. To set two divs side by side you can set a width on each div in percentages as long as the total of those two widths does not exceed 100% and float them.

Check out the below:

/* Again you can use media queries to get this to work */
.col{
    display:block;
    float:left;
    width:50%;
}

@media screen and (max-width:400px){
    .col{
        display:block;
        float:none;
        width:100%;
    }
}
Todd Squitieri
Todd Squitieri
8,001 Points
Todd Squitieri
Todd Squitieri
8,001 Points

Awesome, awesome help, Connor!

Many thanks for spending the time out of your day to help me with this. I really appreciate it!

Sincerely,

Todd

Todd Squitieri
Todd Squitieri
8,001 Points
Todd Squitieri
Todd Squitieri
8,001 Points

I finally did it! I coded my own responsive website, all by myself!!

http://jsfiddle.net/toddsqui/ho52ak2y/

Sure, there's a wide space at the bottom of the page, but everything is pretty much fluid! And I did this all from memory!

Thank you so much, Connor!!

-T

Todd Squitieri
Todd Squitieri
8,001 Points
Todd Squitieri
Todd Squitieri
8,001 Points

Update: I applied most of the corrections, but I think the buttons are sort of skewed when they stack on top of each other: http://jsfiddle.net/toddsqui/n4hchy56/

Is there any way to correct this? Do I need to make the header larger??

-T

Shaker Advertising
Shaker Advertising
5,395 Points
Shaker Advertising
Shaker Advertising
5,395 Points

You need to remove your padding and margin from you UL.

That's what is causing the offset in your example.

Todd Squitieri
Todd Squitieri
8,001 Points
Todd Squitieri
Todd Squitieri
8,001 Points

Hi Connor,

I removed all padding and margins from the ULs (as well as the li's), but the positioning of the buttons is still off-kilter:

http://jsfiddle.net/toddsqui/g2zdda6o/

I tried changing the font on the logo class, and this didn't do anything for the buttons. I've also tried adjusting the header class, but still no luck.

Any ideas?

Sorry for persisting with this!

-T

Shaker Advertising
Shaker Advertising
5,395 Points
Shaker Advertising
Shaker Advertising
5,395 Points

No worries Todd Squitieri.

Check the below, I pulled the code from your fiddle:

/*========= HEADER ===========*/

header {
    /*  I'm commenting this out to show you an easier way to do this by just setting the margin and padding 
    margin: auto;
    margin-top: -21px;
    margin-bottom: -34px;
    padding: 31px;

    */
    margin:0;
    padding:10px 31px;
}

.logo{
    display: inline;
    margin: 0;
}


.main-nav ul{
    /*
    border-radius: 5px;

    This isn't necessary, you want this on each LI element not on the UL itself

    */

    text-decoration: none;
    list-style: none;
    /* display: inline;

    Setting the UL to display inline isn't necessary. 
    It's already set as a block level element

    */

    margin:0;
    padding:0;
}

This will at the least clean up the menu and getting working the way you want.

Todd Squitieri
Todd Squitieri
8,001 Points
Todd Squitieri
Todd Squitieri
8,001 Points

Wow, this was really helpful, Connor! Thank you!

So my problem basically was that I set the UL to inline when it was already at block level, and that the header didn't need nearly as much coding as I put on it.

But is there a way to get the buttons aligned to the right of the title in larger screens? I know that I could probably futz with the margins and padding, but I'd rather use a way that maximizes browser support. Guil doesn't seem to recommend margin-left, margin-right, margin-top, etc. adjustments for getting the buttons aligned next to the logo.

What am I missing here? (http://jsfiddle.net/toddsqui/g2zdda6o/)

Thanks so much again, Connor!

Shaker Advertising
Shaker Advertising
5,395 Points
Shaker Advertising
Shaker Advertising
5,395 Points

You're missing floats.

You can use a media query at whatever breakpoint you feel is right and set both the logo and the navigation to display:block;

set a width on each item using percents and make sure the total doesn't exceed 100% and float them left.

This will stack them next to each other.

Todd Squitieri
Todd Squitieri
8,001 Points
Todd Squitieri
Todd Squitieri
8,001 Points

Above and beyond, Connor! Thank you so much for spending the time to help me out on this message board! I really appreciate it!

Sincerely,

Todd