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

Posted August 7, 2016 8:54pm by

Two Questions -- Flexing Elements, and Aligning Buttons

When my webpage hits a certain media breakpoint, I'd like for a sort of "flex/shrink" effect to happen. Basically, the element in the media query should move along with the page and also shrink at a given rate. I would like to do this with just css in my responsive file. Secondly, I also have 3 buttons aligned in an inline-block formation. I'm not having any success at adding code that aligns these in a block formation. Again, the block alignment will take place in a media query. Thanks for the help!

August 7, 2016 9:08pm

It would help to see your code, formatted according to the instructions in the Markdown Cheatsheet below.

Or better yet, use the snapshot function in the workspace and provide the link to that.

August 7, 2016 9:11pm

Well, I'm not using workspaces, so should I just post the code?

Also what files should I post? I have 3 and they're all pretty large.

August 7, 2016 9:25pm

I'll just go ahead and post it.

<!DOCTYPE html>
<html lang="en"> <!-- boostrap -->
    <head>
        <meta charset="utf-8">
        <title>Bulletproof Editing - Legal Proofreading, Court Reporter Proofreading</title>
        <link rel="shortcut icon" type="image/x-icon" href="img/GES.png">
        <link rel="stylesheet" href="css/normalize.css">
        <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/responsive.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- bootstrap -->
    </head>
    <body id="background">
            <header>
                <a href="index.html" id="logo">
                    <h1>BulletProof Editing Services</h1>   
                </a>
                <nav>
                    <a href="#" id="menu-icon"></a>
                    <ul>
                        <li><a href="index.html" class="selected">Home</a></li>
                        <li><a href="#TheDifference">The Difference</a></li>    
                        <li><a href="#TwoGuarantees">Two Guarantees</a></li>
                        <div class="dropdown">
                            <li><a class="dropbtn">Samples</a></li>
                          <div class="dropdown-content">
                            <a href="#ProofedWithout">Proofed Without Audio</a>
                            <a href="#ProofedAgainst">Proofed Against Audio</a>
                          </div>
                        </div>  
                        <li><a href="#Testimonials">Testimonials</a></li> 
                        <li><a href="#Rates">Rates</a></li> 
                        <li><a href="#AboutTheOwner">About the Owner</a></li>
                        <li><a href="#Contact">Contact</a></li>
                    </ul>
                </nav>
            </header>
        <div id="wrapping">
            <section id="headline">
                <h2>Legal Proofreading -- <br> with a difference.</h2>
            </section>
        </div>
            <section id="buttons">
                <button id="difference"><a id="blink" href="#TheDifference">The Difference</a></button>
                <button id="guarantees"><a id="blink" href="#TwoGuarantees">Two Guarantees</a></button>                <button id="samples"><a id="blink" href="#Samples">View Samples</a></button>      
            </section>
            <footer>
                <p>example.com</p>
                <p>&copy; 2016 Bulletproof Editing Services, LLC.</p>
            </footer>    
    </body>
</html>

/************
GENERAL
************/

body {
    font-family: "Raleway", sans-serif;
}

a {
    text-decoration: none;
}

h1 {
   font-family: "Merriweather", sans-serif;
   font-size: 2.25em;
   font-weight: bold;
   line-height: 18px;
   margin-left: 19px;
   transition: 0.2s;
}

#headline { 
    font-family: "Merriweather", sans-serif;
    font-weight: normal;
    font-size: 45px;
    margin-left: 220px;
    margin-top: 90px;
}

img {
    width: 100%;
}


/************
BUTTONS
************/

#buttons {
    text-align: center;
    font-size: 16px;
    margin-top: 150px;
}

#difference {
    float: left;
    margin-left: 90px;
    padding: 15px 50px 15px 50px;
    background-color: #330202;
    border: solid 3px #fff;
    color: #fff;
}

#guarantees {
    margin-right: 5px;
    padding: 15px 50px 15px 50px;
    background-color: #000016;
    border: solid 3px #fff;
    color: #fff;
}

#samples {
    clear: right;
    float: right;
    margin-right: 100px;
    padding: 15px 45px 15px 45px;
    background-color: #001e00;
    border: solid 3px #fff;
    color: #fff;
}

#blink {
    color: #fff;
}

/************
HEADING
************/

header {
   margin-top: 30px;
   margin-left: 50px;
}

#logo {
    margin: 0;
}

/************
NAVIGATION
************/

nav ul {
    list-style: none;
    margin: 0 10px;
    padding: 0;
}

nav li {
    display: inline-block;
}

nav a {
    font-size: 17px;
    padding: 15px 10px;
    transition: .2s;
}

#menu-icon {
    margin: -55px 0 0 0;
    clear: right;
    display: none;
    width: 20px;
    height: 15px;
    background: dimgray url(../img/menu-icon.png) no-repeat center;

}

a:hover#menu-icon {
    background-color: #444;
    border-radius: 4px 4px 4px 4px;
}


/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 20px rgba(0,0,0,0.2);
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    background-color: dimgray;  
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}


/************
FOOTER
************/

footer {
    text-align: center;
    clear: both;
    padding-top: 100px;
}



/******************
COLORS & EFFECTS
******************/

body {
    background-image: url(../img/courtroom.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    color: #999;
}

h1, #headline, h3 {
    color: #fff;
}

h1:hover {
    color: #b3b3b3;
}

nav a, nav a:visited {
    color: #b3b3b3;
}

nav a.selected, nav a:hover {
   color: white;    
}

button:hover {
    text-decoration: underline;
}

```responsive css @media screen and (max-width: 1060px) {

#background {
    background-image: none;
    background-color: #fff;
}

h1 {
   color: dimgray; 
}

#headline {
    color: dimgray;
    font-size: 2.75em;
    margin-left: 145px;
}

nav a.selected, nav a:hover {
    color: dimgray;    
}


/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    background-color: white;  
}


#buttons {
    text-align: center;
    font-size: 16px;
    margin-top: 150px;
}

#difference {
    float: left;
    margin-left: 90px;
    padding: 15px 50px 15px 50px;
    background-color: #330202;
    border: solid 3px dimgray;
}

#guarantees {
    margin-right: 5px;
    padding: 15px 50px 15px 50px;
    background-color: #000016;
    border: solid 3px dimgray;
}

#samples {
    clear: right;
    float: right;
    margin-right: 100px;
    padding: 15px 45px 15px 45px;
    background-color: #001e00;
    border: solid 3px dimgray;
}

}

@media screen and (max-width: 980px) {

header {
    border-bottom: 4px solid lightgray;
    margin: 0 0 30px 0;
}

#menu-icon {
    float: inherit;
    border-radius: 4px;
    float: right;
    margin-right: 30px;
    display:inline-block;

}

/* the big beautiful box that displays the collapsible nav */    

nav ul, nav:active ul { 
    display: none;
    position: absolute;
    padding: 10px;
    background: #fff;
    border: 2px solid #444;
    right: 18px;
    top: 57px;
    width: 25%;
    border-radius: 4px 4px 4px 4px;
    opacity: .9;
}

nav li, .dropdown {
    text-align: center;
    width: 100%;
    padding: 10px 0;
    margin: 0;

}

nav:hover ul {
    display: block;

}

}

@media screen and (max-width: 920px) {

#headline {
    margin-left: 15%;    
}

}

2 Answers

August 8, 2016 2:43pm

I'm not quite sure what you mean by a flex/shrink effect, it may just mean you are looking for an transition animation when media queries hit?

As far as the buttons at the bottom, you have a few issues.

For semantics, you should not have an anchor wrapped in a button. Buttons do something, like submit a form, open a modal, and anchors go somewhere, like a page link.

With that said, your hard margins on your first and last buttons are forcing one button down when the section#buttons wrapper isn't wide enough to contain all 3 buttons and their margins. You'll just need to decide how to deal with this, using something like a percentage margin, or extra media queries rules to shrink the margins on smaller pages.

August 8, 2016 3:29pm

Ok, well I kind of had it in mind to use the buttons in the section #buttons for links to other pages. Would this not be a good choice? And yes, I'm looking for sort of a simple animation, I guess, like you mentioned above when media queries hit.

August 8, 2016 3:38pm

No reason to wrap anchors in buttons. Anchors and buttons can be styled exactly alike, but they serve two different purposes in html.

For media query animations, check out : https://css-tricks.com/animated-media-queries/

But also realize, almost nobody is going to see these animations, as the average user doesn't resize their browser window. Only developers every really resize browsers windows after a website is loaded.

August 12, 2016 3:57am

Ok thanks! I didn't expect users to resize their windows. I just want a decent way to get the media queries to react responsively on mobile devices.

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

Gabriel E

Gabriel E

Two Questions -- Flexing Elements, and Aligning Buttons

Steven Parker

Steven Parker

Gabriel E

Gabriel E

Well, I'm not using workspaces, so should I just post the code?

Gabriel E

Gabriel E

2 Answers

Kevin Korte

Kevin Korte

Gabriel E

Gabriel E

Kevin Korte

Kevin Korte

Gabriel E

Gabriel E