javascript - How can I adjust my bootstrap based css code so it is more responsive to the page width? - Stack Overflow

admin管理员组

文章数量:1201792

I created this fiddle as you can see there I have a webpage with two texts, one below another. It works great on wide screens, but when I shrink the webpage - or run the webpage on mobile - it is messed up, like on this screenshot:

I thought about doing it more responsive by adding CSS mobile queries, but then in the code I have:

@media (max-width: 545px) {


.outer{
  width:100%;
  height:330px;
  top:0;
  position:relative;
}

.inner1{
  width:100%;
  height:320px;
  margin-bottom:0px;

}
.inner2{
  width:100%;
  height:330px;
  margin-bottom:0px;

}
}

@media (max-width: 435px) {

.outer{
  width:100%;
  height:380px;
  top:0;
  position:relative;
}

.inner1{
  width:100%;
  height:370px;
  margin-bottom:0px;

}
.inner2{
  width:100%;
  height:380px;
  margin-bottom:0px;

}

}

@media (max-width: 378px) {

 .outer{
  width:100%;
  height:460px;
  top:0;
  position:relative;
}

.inner1{
  width:100%;
  height:450px;
  margin-bottom:0px;

}
.inner2{
  width:100%;
  height:460px;
  margin-bottom:0px;

}

} 

etc., so lot's of values for different screen widths. I suspect there's some other way of doing that, the most responsive way in which I don't need to cover each screen width separately in mobile CSS... Can you give me any hint how could I change my code so it works independently on any device/screen width? Thanks!

I created this fiddle as you can see there I have a webpage with two texts, one below another. It works great on wide screens, but when I shrink the webpage - or run the webpage on mobile - it is messed up, like on this screenshot:

I thought about doing it more responsive by adding CSS mobile queries, but then in the code I have:

@media (max-width: 545px) {


.outer{
  width:100%;
  height:330px;
  top:0;
  position:relative;
}

.inner1{
  width:100%;
  height:320px;
  margin-bottom:0px;

}
.inner2{
  width:100%;
  height:330px;
  margin-bottom:0px;

}
}

@media (max-width: 435px) {

.outer{
  width:100%;
  height:380px;
  top:0;
  position:relative;
}

.inner1{
  width:100%;
  height:370px;
  margin-bottom:0px;

}
.inner2{
  width:100%;
  height:380px;
  margin-bottom:0px;

}

}

@media (max-width: 378px) {

 .outer{
  width:100%;
  height:460px;
  top:0;
  position:relative;
}

.inner1{
  width:100%;
  height:450px;
  margin-bottom:0px;

}
.inner2{
  width:100%;
  height:460px;
  margin-bottom:0px;

}

} 

etc., so lot's of values for different screen widths. I suspect there's some other way of doing that, the most responsive way in which I don't need to cover each screen width separately in mobile CSS... Can you give me any hint how could I change my code so it works independently on any device/screen width? Thanks!

• javascript
• jquery
• html
• css
• twitter-bootstrap

Share Improve this question Follow edited Jul 14, 2016 at 8:59 neer 4,08266 gold badges2121 silver badges3434 bronze badges asked Jul 1, 2016 at 15:31 user3766930user3766930 5,8291111 gold badges5353 silver badges110110 bronze badges 1

• This doesn't answer your question, but if you are using bootstrap, have you considered using the 'collapse' feature (getbootstrap.com/javascript/#collapse)? It's very easy to set up and accomplishes nearly the same thing with way less markup/css, and it works well on mobile too. The only thing is transition is not quite the same, although there may be a way to modify it. I added a collapse example to the bottom of your jsfidde: jsfiddle.net/2nexo75j/19 – ns1234 Commented Jul 15, 2016 at 14:39

Add a comment  | 

8 Answers 8

Sorted by: Reset to default 5

Set minimum width and height for each class so that the page stops adjusting the text with screen resolutions that are too small. Add min-height:123px; and min width:456px; (adjust px as needed) so that they do not overlap on small screens.

Note: This isn't very good for mobile.

In your fiddle you are setting the height of each div (inner1 and inner2), and when you compress the page width to about 150px (you picture) the divs are overflowing. Setting the height of an elements is not done often, at least from my experience. On mobile platforms width is usually more of a concern.

Setting the overflow attribute inside your css for each div fixed the issue for me.

.inner1{
  width:100%;
  height:270px;
  margin-bottom:0px;
overflow: auto;
}
.inner2{
  width:100%;
  height:280px;
  margin-bottom:0px;
  overflow: auto;
}

Here is a reference for the overflow property. Using auto at least allows for scrolling and wont cut off the text. https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

Bootstrap actually has a grid system made for the exact purpose of making the width values responsive to screen size. http://v4-alpha.getbootstrap.com/layout/grid/

Also, setting the viewport width for mobile phones will load the css to run at the actual screen width of the phone, rather than the pixel density width of the screen: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

The problem you run into is caused by the content of .inner1 becoming too high and showing up in your .inner2. The .inner1 is able to become too high because of their overflow. It shows your text even past the height you specified. To stop this behavior apply

.inner1{
overflow:hidden;  
}

That said, I cannot recommend using the method you have been using to make the content appear/disappear (with a fixed height). I would personally use display:none and remove display:none by code (and possible animation) in this scenario. But that is beyond the question asked, so I won't go into that.

JSFiddle

HTML (with bootstrap)

<div class= "container">
                <div class="row">
                    <div class="col-sm-7 company">
                        <h2>this is my title</h2>
                        <div class="companyDescription" >
                            <div class="outer">
                                <div class="inner1" id="inner1">
                                <h5>"The quick brown fox jumps over the lazy dog" is an English-language pangram—a phrase that contains all of the letters of the alphabet. It is commonly used for touch-typing practice. It is also used to test typewriters and computer keyboards, show fonts, and other applications involving all of the letters in the English alphabet
                                    </h5><h5>Some kind of subtitle</h5>
                                    <h5><a id="readMore" style="cursor: pointer; cursor: hand;">read more...</a></h5>
                                </div>
                                <div class="inner2">
                                    <h5><a id="readLess" style="cursor: pointer; cursor: hand;">...read less</a></h5>
                                    <h5>As the use of typewriters grew in the late 19th century, the phrase began appearing in typing and stenography lesson books as a practice sentence. Early examples of publications which used the phrase include Illustrative Shorthand by Linda Bronson (1888), How to Become Expert in Typewriting: A Complete Instructor Designed Especially for the Remington Typewriter (1890)
                                    </h5>
                                    <h5>the last subtitle.</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                    </div>
                    </div>

CSS

  .company {
  padding-top: 160px;
  color: #000;
}

.companyDescription {
  margin: 20px 0 10px 0;
  overflow:hidden;
}

.outer{
  width:100%;
  height:280px;
  top:0;
  position:relative;
}

.inner1{
  width:100%;
  height:270px;
  margin-bottom:0px;
  overflow:hidden;/*ONLY ONE NEW CSS LINE!*/
}
.inner2{
  width:100%;
  height:280px;
  margin-bottom:0px;
}

Javascript (with jQuery)

$('#readMore').click(function(){
    $('.companyDescription').animate({
        scrollTop:$('#inner1').outerHeight()+30
    }, 1000);
})
$('#readLess').click(function(){
    $('.companyDescription').animate({
        scrollTop:0
    }, 1000);
})

Here is my code you can also go through below link -

JSFiddle

HTML Code -

<div class="col-md-12">
  <div class="row">
    <div class="col-md-12 company">
      <h2>this is my title</h2>
      <div class="companyDescription">
        <div class="outer">
          <div class="inner1" id="inner1">
            <h5>"The quick brown fox jumps over the lazy dog" is an English-language pangram—a phrase that contains all of the letters of the alphabet. It is commonly used for touch-typing practice. It is also used to test typewriters and computer keyboards, show fonts, and other applications involving all of the letters in the English alphabet
                                        </h5>
            <h5>Some kind of subtitle</h5>
            <h5><a id="readMore" style="cursor: pointer; cursor: hand;">read more...</a></h5>
          </div>
          <div class="inner2">
            <h5 style="display:none;"><a id="readLess" style="cursor: pointer; cursor: hand;">...read less</a></h5>
            <h5 style="display:none;">As the use of typewriters grew in the late 19th century, the phrase began appearing in typing and stenography lesson books as a practice sentence. Early examples of publications which used the phrase include Illustrative Shorthand by Linda Bronson (1888), How to Become Expert in Typewriting: A Complete Instructor Designed Especially for the Remington Typewriter (1890)
                                        </h5>
            <h5 style="display:none;">the last subtitle.</h5>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

JAVASCRIPT Code -

$('#readMore').click(function() {
    $('#readMore').css('display','none');
  $('.inner2').find('h5').css('display','block');
})
$('#readLess').click(function() {
$('#readMore').css('display','block');
  $('.inner2').find('h5').css('display','none');
})

Bootstrap already provide the best responsive design. But still if you want to add more responsiveness you can add your own classes with the html tags and then use media queries for specific width.

<div class="container class1">
    content here
</div>

<ul class="list-item class2">
  <li> list item </li>
</ul>

now you have to apply your css on your given classes which in this case are class1 and class2

Thanks

We got 2 choices,

1. Set a large static height...

Change the statically set width to a large number like say 250px which will work well for low res... but will have too much of (ugly) white space on desktop.

.inner1{
  width:100%;
  height:250px;
  margin-bottom:0px;
  overflow: auto;
}
.inner2{
  width:100%;
  height:250px;
  margin-bottom:0px;
  overflow: auto;
}

2. Calculate height dynamically on resize...

This work work for all resolutions with just as much whitespace as desired on all resolutions ;) For this

First wrap the contents in .inner1 and .inner2 in a container, we used article here... this will help us determine the height of content.

Now Set height to 100% for .inner1 and .inner2...

.inner1 {
  width: 100%;
  height: 100%; /* Set height as 100% */
  margin-bottom: 0px;
}
.inner2 {
  width: 100%;
  height: 100%; /* Set height as 100% */
  margin-bottom: 0px;
}

Then give .outer a default height, like maybe 160px

.outer {
  width: 100%;
  height: 160px;
  top: 0;
  position: relative;
}

Finally some JS to make it work ;)

Update
We use a function assigned to a var instead of using an anonymous function.

On resizing window, we check the heights of content in inner1 and inner2, use the one with more content using Math.max then add 25px gutter to it and set it as .outer height...

  var fixWidths = function() {
    var
      $cDesc = $('.companyDescription');
    $cDesc.find('.outer').css(
      'height',
      Math.max(
        $cDesc.find('.inner1').children('article').outerHeight(),
        $cDesc.find('.inner2').children('article').outerHeight()
      ) + 25 // Maximum of the two
    )
  }

  $(window).resize(fixWidths);
  fixWidths();

Update
Make sure your JS code is wrapped in...

$(function() {
  ...
});

This will wait until doc is loaded...

At the end we trigger resize programmatically, to set the correct initial state.

A working example

$(function() {
  $('#readMore').click(function() {
    $('.companyDescription').animate({
      scrollTop: $('#inner1').outerHeight() + 30
    }, 1000);
  })
  $('#readLess').click(function() {
    $('.companyDescription').animate({
      scrollTop: 0
    }, 1000);
  })

  var fixWidths = function() {
    var
      $cDesc = $('.companyDescription');
    $cDesc.find('.outer').css(
      'height',
      Math.max(
        $cDesc.find('.inner1').children('article').outerHeight(),
        $cDesc.find('.inner2').children('article').outerHeight()
      ) + 25 // Maximum of the two
    )
  }

  $(window).resize(fixWidths);
  fixWidths();
});

.company {
  padding-top: 160px;
  color: #000;
}
.companyDescription {
  margin: 20px 0 10px 0;
  overflow: hidden;
}
.outer {
  width: 100%;
  height: 160px;
  top: 0;
  position: relative;
}
.inner1 {
  width: 100%;
  height: 100%;
  /* Set height as 100% */
  margin-bottom: 0px;
}
.inner2 {
  width: 100%;
  height: 100%;
  /* Set height as 100% */
  margin-bottom: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-sm-7 company">
      <h2>this is my title</h2>
      <div class="companyDescription">
        <div class="outer">
          <div class="inner1" id="inner1">
            <article>
              <h5>"The quick brown fox jumps over the lazy dog" is an English-language pangram—a phrase that contains all of the letters of the alphabet. It is commonly used for touch-typing practice. It is also used to test typewriters and computer keyboards, show fonts, and other applications involving all of the letters in the English alphabet
                                        </h5>
              <h5>Some kind of subtitle</h5>
              <h5><a id="readMore" style="cursor: pointer; cursor: hand;">read more...</a></h5>
            </article>
          </div>
          <div class="inner2">
            <article>
              <h5><a id="readLess" style="cursor: pointer; cursor: hand;">...read less</a></h5>
              <h5>As the use of typewriters grew in the late 19th century, the phrase began appearing in typing and stenography lesson books as a practice sentence. Early examples of publications which used the phrase include Illustrative Shorthand by Linda Bronson (1888), How to Become Expert in Typewriting: A Complete Instructor Designed Especially for the Remington Typewriter (1890)
                                        </h5>
              <h5>the last subtitle.</h5>
            </article>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Here's the updated fiddle...
https://jsfiddle.net/2nexo75j/16/

You can use clearfix class

<div class="clearfix"></div> 

Did you included "jquery-ui-1.10.4.min.js" file? and is order of all css js files are correct? Because same code of yours with the same styling and scripting working for me.Try this bellow code.

<!DOCTYPE html>
<html>
<head>
    <title>Scroll</title>
    <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>        
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css">
    <script>
        $(document).ready(function () {
            $('#readMore').click(function () {
                $('.companyDescription').animate({
                    scrollTop: $('#inner1').outerHeight() + 30
                }, 1000);
            });
            $('#readLess').click(function () {
                $('.companyDescription').animate({
                    scrollTop: 0
                }, 1000);
            });
        });
    </script>
    <style>
        .company {
            padding-top: 160px;
            color: #000;
        }

        .companyDescription {
            margin: 20px 0 10px 0;
            overflow:hidden;
        }

        .outer{
            width:100%;
            height:280px;
            top:0;
            position:relative;
        }

        .inner1{
            width:100%;
            height:270px;
            margin-bottom:0px;

        }
        .inner2{
            width:100%;
            height:280px;
            margin-bottom:0px;

        }
    </style>
</head>
<body>
    <div class= "container">
        <div class="row">
            <div class="col-sm-7 company">
                <h2>this is my title</h2>
                <div class="companyDescription" >
                    <div class="outer">
                        <div class="inner1" id="inner1">
                            <h5>"The quick brown fox jumps over the lazy dog" is an English-language pangram—a phrase that contains all of the letters of the alphabet. It is commonly used for touch-typing practice. It is also used to test typewriters and computer keyboards, show fonts, and other applications involving all of the letters in the English alphabet
                            </h5><h5>Some kind of subtitle</h5>
                            <h5><a id="readMore" style="cursor: pointer; cursor: hand;">read more...</a></h5>
                        </div>
                        <div class="inner2">
                            <h5><a id="readLess" style="cursor: pointer; cursor: hand;">...read less</a></h5>
                            <h5>As the use of typewriters grew in the late 19th century, the phrase began appearing in typing and stenography lesson books as a practice sentence. Early examples of publications which used the phrase include Illustrative Shorthand by Linda Bronson (1888), How to Become Expert in Typewriting: A Complete Instructor Designed Especially for the Remington Typewriter (1890)
                            </h5>
                            <h5>the last subtitle.</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

本文标签：