CODEWITHSUNDEEP
csshtmltwitter-bootstrapresponsive-design
Tim C
Tim C

Reputation: 5714

Add breakpoint to div on mobile phone

I just discovered / started to learn media queries. Im having a rather hard time at getting used to it. Im looking for an example / some help with the following.

CSS

.col-left{
    height:300px;
    background:red; 
}

.col-right{
    height:300px;
    background:yellow;      
}
.icon-container{
    padding:20px 20px;
    background-color:blue;
    height:300px;
}
.heading-container{
    padding:20px 20px;
    background-color:black;
    height:300px;   
     font-size: 18px;
    letter-spacing: .5px;
    text-shadow: 2px 2px 8px #141415;
    font-weight: 900;
    color:white;
}

This is my HTML with Bootstrap

<div class="container">
    <div class="row">
        <div class="col-md-6 col-xs-6 col-left">
            <div class="row item-container">
                <div class="col-md-4 col-xs-4 icon-container">
                    <i class="fa fa-usd fa-3x"></i>
                </div><!--/icon-container -->
                <div class="col-md-8 col-xs-8 heading-container">
                    <p>Loren Ipsum This is some random text</p>
                </div><!--/heading-container -->
            </div><!--/.row item-container -->
        </div><!--/col6 -->

        <div class="col-md-6 col-xs-6 col-right">
        </div><!--/col6 -->
    </div><!--/row -->    
</div><!--/container -->

OUTPUT DESKTOP

The desktop output is fine and displaying as I want it to display.

enter image description here

Mobile Output

The problem comes in when viewing the above code on a mobile device. When viewed on mobile device I get the following output:

enter image description here

The above output, is WRONG as I want the viewport to break after the black heading div. I would like to get a mobile output like the following image below:

Desired Output

enter image description here

If anyone could point me in the right direction here it would be greatly appreciated. I tried to follow the following tutorial via w3schools, without success.

Any help here would be appreciated.

Upvotes: 2

Views: 973

Answers (2)

Afsar
Afsar

Reputation: 3124

You are using bootstrap: so inbuilt class will help you in that:

Check this out:

<div class="container">
<div class="row">
    <div class="col-md-6 col-xs-12 col-left">
        <div class="row item-container">
            <div class="col-md-4 col-xs-4 icon-container">
                <i class="fa fa-usd fa-3x"></i>
            </div><!--/icon-container -->
            <div class="col-md-8 col-xs-8 heading-container">
                <p>Loren Ipsum This is some random text</p>
            </div><!--/heading-container -->
        </div><!--/.row item-container -->
    </div><!--/col6 -->

    <div class="col-md-6 col-xs-12 col-right">
    </div><!--/col6 -->
</div><!--/row -->

Fiddle

Upvotes: 3

Carl Binalla
Carl Binalla

Reputation: 5401

Try changing the col-xs-* of .col-left and .col-right to col-xs-12

Upvotes: 0

Related Questions