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

Posted by Pirvan Marian
Pirvan Marian
14,609 Points

No responsive for foundation...

I have this html code :

<div id="container"> <div class="row"> <div class="small-8 columns"> <div class="row">
<div class="small-6 columns"> <div class="title-red"> Title </div> <br>

                        <div class="description">
                            text1

text2 text3 </div> <br> <br> <br> <br> <div class="description2"> title <b>bold words<b> </div> </div> <div class="small-6 columns"> <div id="contact"> <div class="head"> Contact Us </div> <br> <br> <div class="real-form"> <input type="text" required placeholder=" Name"> <div class="clearfix"></div> <input type="text" required placeholder="Number"> <div class="clearfix"></div> <textarea col="50" row="5">Your Message </textarea> <div class="clearfix"></div> <font color="#ffc600"> <button>Send</button> </div> </div> </div> </div> </div> </div> </div>

and this code for css : #container,.content { width: 1130px; position: relative; margin: 0 auto; }

body { width: 100%; outline: none; margin: 0px; padding: 0px; height: 100%; position: relative; background-color: #f5f4fe; /<img src="img/logo.png" alt="Klematis" width="10%" height="auto">/

} body, body * , body * * ,body * * * { font-family: Roboto; color: #767d87;

}

logo {

background: red;
width: 100%;
height: 80px;

} header { /background-color: #fff;/ background-image: url("../../img/doctor.png"); /aici o sa il setezi tu cum crezi ca se potriveste mai bine... cred ca e 12% 75% aprox/ background-position: 100% 0% ;
/background-size: 100%;/ background-repeat: no-repeat;

}

.title-red { font-size: 33px; font-family: Robot; /schimbi culoarea/ color: #f2716a; }

.description1 { font-size: 24px; font-family: Roboto; /schimbi culoarea/ color: #767d87; margin-bottom: 50px; }

.description2 { font-size: 16px; font-family: Roboto; /schimbi culoarea/ color: #f2716a; position: absolute; bottom: 20px;

}

contact {

width: 366px;
height: 472px;
background-color:#f26b63;
/*cred*/
border-radius: 10px;
padding: 0% 10%;
min-height: 300px;

}

input[type="text"], textarea { width: 100%; height: auto; border-radius: 5px;

}

textarea { min-height: 100px; } input[type="text"] { width: 80%; }

button { margin-top: 20px; background: yellow; box-shadow: 2px 2px 2px rgba(0,0,0,0.3); padding: 10px 20px; }

bottom-header {

background: #6a92a6;
width: 100%;

}

bottom-header div {

font-size: 24px;
color: white;
padding: 12px ;

}

.row.full { width: 100% !important; max-width: 100% !important; min-width: 100% !important; } .big { font-size: 200px; font-family: Roboto; font-weight: bolder; color: #f26b63; top: 30px; left: -15px;

}

.orange { color: #f26b63 !important; }

.blue { color: #6a92a6 !important; } .medium { font-size:60px; color: #8aa7b8; margin-top: 45px; font-weight: normal; }

ul { list-style: none; }

ul.motive li .large-2 {

font-size: 40px;
color: #6a92a6;

}

ul.motive li .description { margin-top: 10px; font-weight: normal; }

strong, b { font-family: Roboto; font-weight: bolder; color: inherit; } ul.motive li .description { color: blue; }

pachet {

padding-top: 200px;
margin-top: 30px;
background-image: url('../../img/grafic.png');
background-repeat: no-repeat;

position: relative;

}

.font48 { font-weight: normal; font-size: 48px; }

.pack { min-height: 150px; background-color: #6b93a7; color : white; border-radius: 5px; position: relative; padding: 5%; font-family: Roboto; }

pachetcardio {

color : white;

}

doar {

color :#f26b63;

} .bullet { position: absolute; right: 35px; top: -30px; width: 116px; height: 114px; background-color: red; border-radius: 60px; background-image: url('../../img/sigla.png'); }

.nothing-here { opacity: 0; }

.img { height: 180px; width: 180px;

}

ul li {

color: black;
list-style-type: none;

}

ol:not(.motive) li:before {

content: '\2022 ';

color: red;
padding-right: 0.5em;

}

/Contact/

contact {

margin-top: -40px;
padding-top: 40px;
margin-bottom: 30px;

}

contact .head {

font-size: 28px;
color: white;

} .doctorone { background-image: url('../../img/sigla.png');

width : auto;
height:  :auto;

} .fundal { background-image: url("img/logo.png"); background-repeat: no-repeat; background-position: right left; margin-right: 100px; } .fundalmedici{

background-color:#99c3d9; color: #red; width: 100%; background-image: url('../img/bg-medic.png');

} .cities {

color:red;
margin: 0px auto;
padding:10px;
 top: -30px;
 background-attachment: fixed;
 width: 80%; 
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right; 

}

.p{ color: red;}

culoaremedic{

color : #f3f5f4;

}

Medic

{
    color : #f3f5f4;
font-size: 300%;

}

Numemedic {

color : #f3f5f4;
font-size: 100%;

}

textmedic1

{ color : #f3f5f4; font-size: 95%;

}

textmedic2{

color : #f3f5f4; font-size: 75%; } .trei { font-size: 500px; font-family: Roboto; font-weight: bolder; color: #f16b62; top: 30px; left: -15px;

} .medium2 { font-size:60px; color: #f16b62; margin-top: 45px; font-weight: normal; } .back { background-color: green; } .back2 { background-color: red; } .medic { border-radius: 50%; border: 13px solid white; margin-top: 40px; }

.name { font-size: 34px; color: white; font-weight: bold; letter-spacing: -1.5px; margin-top: 30px; } .pt18 { font-size: 18px; color: white; margin-bottom: 10px; } .descriere { font-size: 12px; line-height: normal; font-weight: normal !important; margin-bottom: 40px; color: white; } .pt500 { font-size: 500px; float: left; margin-top: -130px; min-height: 600px; } .columns-right { float: right; width: 580px; margin-right: 20px; } .pt72{ font-size: 72px; line-height: normal; margin-top: 50px; } .white { color: white; } .pt48{ font-size: 48px; }

.columns-right ol li { color: white !important; list-style: none; font-weight: normal; font-size: 14px !important; line-height: normal; } .default { color: #789fb2 !important; }

If i insert

Pirvan Marian
Pirvan Marian
14,609 Points

If i insert <div class="small-12"> <div id="motive"> <div class="row"> <div class="small-2 columns"> <div class="big">5</div> </div>

                        <div class="small-10">
                            <div class="medium">
                                motive sa alegi pachetul de analiza <b> CardioCheck<b>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="small-9">
                            <div class="row">
                                <div class="small-12">
                                    <ul class="motive">
                                        <li class="large-6 columns">
                                            <div class="large-2 columns orange">1</div>
                                            <div class="description blue">
                                                Afli <b>rapid<b> riscul de deces prin boala cardiovasculara in urmatorii 10 ani
                                            </div>
                                        </li>
                                        <li class="large-6 columns">
                                            <div class="large-2 columns orange">2</div>
                                            <div class="description blue">
                                                Primesti <b> un plan concret de actiuni <b> pentru reducerea riscului cardiovascular.

                                            </div>
                                        </li>
                                        <li class="large-6 columns">
                                            <div class="large-2 columns orange">3</div>
                                            <div class="description blue">
                                                Calcularea riscului se face cu <b> ESC- HeartScore <b>eleborat de <b> European Society of Cardiology <b>
                                            </div>
                                        </li>
                                        <li class="large-6 columns">
                                            <div class="large-2 columns orange">4</div>
                                            <div class="description blue">
                                                Intepretarea va fi facuta de un medic specialist cu <b> peste 15 ani experienta in cardiologie
<b>
                                            </div>
                                        </li>
                                        <li class="large-6 columns" style="float: left;">
                                            <div class="large-2 columns orange">

                                            5</div>
                                            <div class="description blue">
                                                 Beneficiezi de recomandari suplimentare <b> personalizate<b> in functie de istoricul tau medical 

                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> the responsive will work...