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

Stoicescu Sebastian
Stoicescu Sebastian
3,728 Points
Posted by Stoicescu Sebastian
Stoicescu Sebastian
3,728 Points

Media Queries Problem

Hello. I got a question related to Media Queries. I've recently built a website using some Bootstrap features like : navbar,cards and grid system. My layout is pefect until it comes to a small device (phone). I want my paragraphs to take the full width in order not to look too cramped. My code here:

@media (min-width:576px) {

    .main-content{
        width:100%;
    }
}

Do I need to add something to my html file in order to work properly or is that code wrong written? Could you help me with a piece of advice?

Joel Bardsley
Joel Bardsley
31,249 Points
Joel Bardsley
Joel Bardsley
31,249 Points

The media query itself is written correctly and should work without modification to your HTML, but bear in mind that .main-content will only be 100% width of its parent element. If the parent is a column in a bootstrap grid, you may need to make sure you have the appropriate column width classes for small devices in your HTML.

It's hard to tell without seeing your HTML code, so I'd encourage you to update your post to include the relevant section.

Stoicescu Sebastian
Stoicescu Sebastian
3,728 Points
Stoicescu Sebastian
Stoicescu Sebastian
3,728 Points

Ok so this is my code in html:

    <!-- main-content-->
        <div class="main-content font-weight-bold">

            <div class="container">
                <div class="row">
                    <div class="col col-sm-12 col-lg-6 pr-5">
                     <p><strong>Villa Stefania </strong>din Râușor se află în Stațiunea Râușor, pe versanții nordici ai Masivului Retezat, în Parcul Național Retezat.Cabana are în componență 4 camere spațioase dotate fiecare cu TV, (matrimonială, triplă, 4 locuri, 6 locuri), la parter beneficiind de un living foarte spațios, în care se poate servi masa , având în dotare TV LCD, Sistem Audio, jocuri interactive, bucătărie și baie .
                        </p>
                  </div>
                    <div class="col col-sm-12 col-lg-6">
                     <strong>Căi de acces:</strong>
                        La Râușor se ajunge pe un drum complet asfaltat, bine întreținut în toate anotimpurile. Accesul cel mai facil se face pe drumul care merge din Hațeg la Caransebeș, spre comuna Râu de Mori. La câteva sute de metri de localitatea Cârnic, turiștii pot vedea indicatoare cu „Complex alpin Râușor”, iar după aproximativ 20 de kilometri se ajunge în stațiune..

                </div>
            </div>
        </div>
    <div><!-- /main-content-->

So I have one div (.main-content) that nests 2 columns . I want those columns to take the full width of the screen in small devices. I also used the ".col" or ".col-sm-12" selectors, but it still doesn't work .

2 Answers

Alex Davis
Alex Davis
35,050 Points
Alex Davis
Alex Davis
35,050 Points

@media (min-width:576px) {

.main-content{
    width: 80%;
}

}

.main-content{
    width: 2em;
}

}

Try using ems for automatic adjusting or a smaller percentage to scale based on the percentage(less than 100). Just mess around with it till you get the desired width for shrinking.

Alex Davis
Alex Davis
35,050 Points
Alex Davis
Alex Davis
35,050 Points

For your columns taking up the entire width I would try using

width: 100%;

on both of them in the CSS. This should make both columns fill the entire space and stack on each other. You could also use margin to add a little space at the bottom with

margin-bottom: numberhere;

Alex Davis
Alex Davis
35,050 Points

Make sure to clarify in a media query that you want the width at 100%. Same with the margin if you use it.

The Media query for small screen size you are going for.