My site does not get responsive is just text

Asked

Viewed 60 times

-1

My site does not get responsive is just text:

<div class="container">
    <div class="row col-sm-6 col-xs-12 col-lg-12">
        <h1 class="text_header">I’m Gustavo Marinho,<br> Creative Designer —<br>Product Designer <br>at Netshow.me</h1>
    </div>
</div>

<div class="container">
    <div class="row col-sm-6 col-xs-12 col-lg-12">
        <h2 class="text_1"> human-centered <strike>design</strike> human<br> I believe we can create change<br> through design.</h2>
    </div>
</div>

<div class="container">
    <div class="row col-sm-6 col-xs-12 col-lg-12">
        <h3 class="text_2"> My dream is to develop innovative solutions that go beyond the boundaries<br> between art, design and technology to solve problems that impact people's lives.</h3>
    </div>
</div>
html css

  • Would you be able to post the code completely? Sometimes what might be missing for the site to get responsive is the meta tag <meta name="viewport" content="width=device-width, initial-scale=1"> ;<div class="container">&#xA; <div class="row">&#xA; <div class="col-sm-6 col-xs-12 col-lg-12"> &#xA; //resto do código

1 answer

1

I believe that what you want to do is this (considering only the excerpt presented):

<div class="container">
    <div class="row">
        <div class="col-sm-12 col-md-6 col-lg-4">
            <h1 class="text_header">I’m Gustavo Marinho,<br> Creative Designer —<br>Product Designer <br>at Netshow.me</h1>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-4">
            <h2 class="text_1"> human-centered <strike>design</strike> human<br> I believe we can create change<br> through design.</h2>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-4">
            <h3 class="text_2"> My dream is to develop innovative solutions that go beyond the boundaries<br> between art, design and technology to solve problems that impact people's lives.</h3>
        </div>
    </div>
</div>

So it will have a dynamic layout occupying the 12 spaces of the grid in small resolutions (one per line), 6 spaces in medium resolutions (two per line), and 4 spaces in high resolutions (three per line).

If in doubt, take a look at the documentation on the grid system Bootstrap, examples are quite useful.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.