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!

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

Mayur Pande
PLUS
Mayur Pande
Courses Plus Student 11,711 Points
Posted by Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points

Using flexbox for layout

I am building a simple site that I have decided to use flexbox for the layout. Generally everything seems to be working fine. However when using flexbox I have to explicitly tell the flexbox items (my divs in this case) a given width. When looking through Guil Hernandez course's he simply uses flex-grow property to make the items spread evenly over the container div.

In my example I have shown below. I have a map and an address that when in horizontal mobile view (bigger than or equal to 480px) it should display the map and address divs next to each other. Which it does but only if I give them both width sizes and not flex grow properties. Is this fine?

Also another issue is when I turn into vertical mobile view when checking on google developer tools, on some devices (namely iphone 4) the address div does not match up with the header, is there a way around this, as I keep trying padding-right margin-right and seem to be getting the same result.

Here is my responsive css

@media screen and (min-width: 480px){
  /************************
  TWO COLUMN LAYOUT
  ************************/
    #flex-container{
        flex-direction: row;
        flex-wrap:wrap;
        justify-content: space-between;
    }
    .news-image{
        width:40%;
        margin: 2.5%;
    }
    .para{
        width:50%;
        margin-right:2.5%;
        margin-top:-10px;

    }
    .innerbox #toby-image{
        width:50%;
        margin:2.5%;
    }


    #map-container{
        width:40%;
        margin-left:3.0%;
    }

    .contact{
        width:40%;
        margin-left:30px;
        margin-right:30px;
        margin-top: -18px;
        padding-left: 0;
    }

}

Here is the html for it (twig file) the flex-container div wraps the {% block content %} in the main.twig file

{% extends 'main.twig' %}
{% set active_page = 'contact' %}

{% block title %}Contact Us{% endblock %}

{% block heading %}Contact Us{% endblock %}

{% block content %}
            <div id="map-container">
                <div id="map"></div>
            </div>
            <div class="contact">
                <h3>Contact Info</h3>

                <ul class="contact-info">
                    <li class="phone"><a href="tel:07340334933">07340334933</a></li>
                    <li class="email"><a href="mailto:toby@decorum.net">toby@decorum.net</a></li>
                    <li class="address">
                        <a href="/contact-us">
                            <p>Masionette Hurlingham</p>
                            <p>360 Wandsworth Bridge Road</p>
                            <p>Fulham</p>
                            <p>London</p>
                            <p>SW6 2TZ</p>
                            <p>England</p>
                        </a>
                    </li>

                </ul>
            </div>

<script>
    function initMap(){
        var mapDiv = document.getElementById('map');
        var map = new google.maps.Map(mapDiv, {
            center: {lat :44.540, lng: -78.546},
            zoom: 8

        });


    }

</script>
{% endblock %}

and if you need, this is my main css file

/************************
GENERAL
************************/
*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html{
  position:relative;
  min-height: 100%;
}
body{
    font-family: proxima-nova, sans-serif;

}


a {
   text-decoration: none;
}

img{
  max-width: 100%;
}



/*****************************
 * PAGE BACKGROUND
 ****************************/

/*#page-background{
    background: linear-gradient(#fff,transparent 20%),
        linear-gradient(0deg, #fff,transparent),
        #fff url('../img/main-background.jpg') no-repeat center;
    background-size: cover;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
}*/

#page-background{
    display:none;
}

/*******************************
INNERBOX
*******************************/

.innerbox{
    position:absolute;
    width:100%;
}

.innerbox h1{
    text-align:center;
    padding-right:10px;
}

#flex-container{
    display:flex;
    flex-direction:column;
}

.para p{
    margin: 0 auto;
    display: block;
    padding: 20px 10px;
}

.news-image{
    margin: 0 auto;
}

/*****************************
 * ABOUT US PAGE (INNERBOX)
 ****************************/

.innerbox #toby-image img{
    margin: 0 auto;
    display: block;
}


/*************************
 * CONTACT PAGE (INNERBOX)
 * **********************/

#map{
    position: relative;
    padding-bottom: 75%;
    height: 0;
    overflow:hidden;
}

/* Your styles for the iframe */
#map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

.contact{
    width:90%;
    margin: 0 auto;
    padding-left:100px;
}

.contact-info{
    list-style: none;
    padding:0;
    margin:0;
    font-size: 0.9em;
}

.contact-info a{
    display:block;
    min-height: 20px;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    padding: 0 0 0 30px;
    margin: 0 0 10px;
}

.contact-info li.phone a {
    background-image: url('../img/phone-46-16.png');
}

.contact-info li.email a {
    background-image: url('../img/email-16.png');
}

.contact-info li.address a {
    background-image: url('../img/home-4-16.png');
}

.contact-info li.address p{
    padding: 0;
    margin: 0 !important;
}

/********************************
 * COLOURS
 * *****************************/

a{
    color: #6ab47b;
}

a:hover{

1 Answer

Craig Watson
PLUS
Craig Watson
Courses Plus Student 27,150 Points
Craig Watson
Craig Watson
Courses Plus Student 27,150 Points

Hi,

Do you have this site in a workspace ? or possibly somewhere I can see a working version?

Craig :)

Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points
Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points

No unfortunately not I have been working on it on my linux virtual machine. Maybe I'll copy it over to workspace if I have time.

Craig Watson
Craig Watson
Courses Plus Student 27,150 Points

If you can copy it over to workspace that would be awesome it being PHP there is not really another way for us to get a solid look at what us going on.

I always refer back to an article I found on css tricks a while ago for flex box help always seems to get thing sorted for me :)

Craig

Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points
Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points

I have uploaded it to workspace but each time I try to snapshot it, only then vendor folder appears. Not sure what's going on.

Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points
Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points

got the snapshot now; https://w.trhou.se/hnrp7bokey

If you want to look at the site your gonna have to enter your details in the config/auth.php file.

I think I have mostly sorted it out. The only issue I was having was it seemed that some of the flex-properties aren't having any affect.