Jump to content
harry_ord

All divs/rows the same size in Bootstrap

Recommended Posts

This is my page:

http://codelcolab.feriapixel.cl/

When i shrink the browser window or watch it on a mobile device, the first divs (with class row) have least width than the ones that came after them, so i'm having a blank space to the right of the first divs because of the wider ones. How can i do to make all the divs the same width?

Here is how it looks, notice the white space to the right of the orange boxes:

Jzw1dd.png

Share this post


Link to post
Share on other sites

The last class 'row' container element, containing last two orange boxes, as well as many other element (including those with id 'bases' and 'postulacion'), has class 'row' as well, this is causing the problem of the website being to long lengthwise causing scrollbars to appear, remove these inner class 'row' classes, and it should fix itself.

 

NOTE: these are collapsed copy of parent elements, so they are not showing relative closing elements correctly

 

<div class="row">
<div class="col-sm-6" style="text-align: center; background-color: rgb(224,106,45); color: #fff; padding: 50px; height: 350px;">
<div class="col-sm-6" style="text-align: center; background-color: rgb(224,134,88); color: #fff; padding: 50px; height: 350px;">

//place here
<div id="bases" class="row" style="text-align: center; background-image: url(img/IMG-20161007-WA0002.jpg); padding: 60px; height: 550px;">
<div class="row" style="text-align: center; font-size: 16px;">
<div class="container">
</div>
<div id="postulacion" class="row" style="background-color: rgb(64, 64, 64); color: #fff; text-align: center; padding: 50px;">
<div class="row" style="background-image: url('img/IMG-20161007-WA0003.jpg'); height: 600px; position: relative; text-align: center; ">
<div class="row" style="background-image: url('img/ref-12178793.png'); padding-top: 80px; padding-bottom: 80px; color: #fff;">
<div class="row" style="padding: 60px;">
<div class="row" style="background-color: rgb(64, 64, 64); color: #fff; padding: 50px;">
</div>

 

BUT! looking at it Again! I think you have most likely misplaced closing div of row which is supposed to contain only the last two orange background elements.

 

The closing </div> following the LAST closing class 'row' in Lime should be before <div id="bases"... element

Edited by dsonesuk

Share this post


Link to post
Share on other sites

Ok, the problem is not totally solved, now everything has the same width and when i shrink the screen everything looks ok, but when i watch the page in my phone, the browser displays a big white space to the right of the document, i don't know why.

RbSEJL.png

Share this post


Link to post
Share on other sites

What did expect, using position: relative; left 50%, transform: translate(); min-height: 100%; on narrow height landscape video, causing it to extend beyond its boundaries to be proportionately correct, all add up to something going terribly wrong down the road. Fix the video, the problem will not exist.

Share this post


Link to post
Share on other sites

I fixed it!

One of the problems was that Bootstrap created an extra space to the side everytime i put a row inside another row, i don't know why. The other was just untidy code.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...