harry_ord Posted October 12, 2016 Share Posted October 12, 2016 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: Link to comment Share on other sites More sharing options...
dsonesuk Posted October 13, 2016 Share Posted October 13, 2016 (edited) 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 October 13, 2016 by dsonesuk Link to comment Share on other sites More sharing options...
harry_ord Posted October 13, 2016 Author Share Posted October 13, 2016 Problem fixed, thanks a lot. That was exactly the problem, the closing div missing. Link to comment Share on other sites More sharing options...
harry_ord Posted October 13, 2016 Author Share Posted October 13, 2016 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 13, 2016 Share Posted October 13, 2016 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. Link to comment Share on other sites More sharing options...
harry_ord Posted October 13, 2016 Author Share Posted October 13, 2016 But i'm using "display:none" for the video container, for screens with max 600px i'm displaying another div called "oculto" (hidden in spanish). Link to comment Share on other sites More sharing options...
harry_ord Posted October 17, 2016 Author Share Posted October 17, 2016 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now