HTML,CSS勉強メモ#27 ～コンテンツの幅がでかすぎてはみ出す件～ #JavaScript

メモ２６であげた、ダウンロードしたテンプレートの一部のコンテンツがでかすぎてうちのディスプレイの幅に入りきらずに切れてしまう件です。
なんとかそれっぽくできたので書いておきます。

メモ

元のソースはこんな感じです。
Original
問題の部分はのところです。

原因

1. コンテンツの幅

まずコンテンツ自体の幅ですが、ブラウザを伸縮させてもこれが固定されていて動きませんでした。

colの変更
- col-md-4が4つ並んでいたのでcol-md-3にしました。
max-width
- .container-full{ max-width: none;}になっていて、ブラウザが2560pxでも1440pxの場合でもめいいっぱい広がるようになっていたので、max-width: 120%;と制限をつけました。
740pxで固定されたpadding
- 一番の問題はコンテンツの左右のpaddingが何故か740pxで固定されていたことでした。ブラウザを狭めるとどんどん右に寄って行って最終的に切れてしまうという状況で、その原因を探してみたところ、一番最後にこんなスクリプトが書かれていました。

<script>
    (function($){
        $(document).ready(function(){
            var $gridRow = $('.row-grid');
            if ($gridRow.length) {

                var $mainContainer = $('body > .container:first .row:first');
                var pad = $mainContainer.position().left + 15;

                $gridRow.each(function(){
                    var $container = $(this).find('.container');
                    var $rows = $container.find('.row');
                    var containerWidth = 0;
                    $rows.each(function(){
                        var $cols = $(this).find('.grid');
                        var totalWidth = 0;
                        $cols.each(function(){
                            totalWidth += $(this).outerWidth();
                        });
                        if (totalWidth > containerWidth) {
                            containerWidth = totalWidth;
                        }
                    });
                     containerWidth -= 30;
                     containerWidth += (pad * 2);
                     $container.width(containerWidth).css('padding', '0 '+pad+'px');
                });
            }
        });
    })(jQuery);
</script>

そこで最後3行をなくしてみたところ、740pxの余白がなくなりました。

rowのスタイル
- スクリプトを消したことで左寄せになってしまったのと、コンテンツの内容部分の領域が2236pxと余分な部分ができてしまったので計算して、

.row {
   margin: 0 auto;
   max-width: 1520px;

を付け加えました。
(他のrowを使っているコンテンツは全部この幅より狭かったので出来たことだと思いますが・・・)

こんな感じでなんとかそれっぽくできました。
しかし、やはり伸縮させると微妙なレイアウトの崩れがおきてしまうのでまだまだだなと思います。
今回はこの辺で。