It's Twitter Bootstrap, it's telling it to span 6 of the 12 columns, and then for the small view media query css it tells it that .span6 { width:100%; }
The scrollbar is showing up because you have a div with a class of 'container' which has a fixed width. This probably needs to be changed to a class of 'container-fluid'.
Also, span6 isn't clearing it's contents, hence the gap above each second image. The gap under the first (left) images is because the image on the right is being pushed down.
Have you looked at just putting these 2 images in the same container and float: left; them?
yeah I tried that, and then everything stacks 1 column instead of 2 for some reason :/ I don't know if it's a bootstrap thing or something I'm doing wrong..
Ok, so it's doing something weird because I need span6's to be 100% width in mobile view, but on desktop I need them to be ~50%, but the images within those span6's are in rows and also span 6 bc there's 2 of them - which is causing the problem.. Cause I need the containing span6 to be 100% but the span6 within that container to only by ~50% so the images are 2 side by side. So my hack way of addressing that was to just tell the span6 img in mobile view to override the 100% and be 50%.. but it's container is still at 100% and I think that's what's causing the space??
This is the only way I could get mobile view to show the 2 images side by side, anything else I did always resulted in all the images stacking on top of each other in 1 column..
Maybe instead of using span6 as the images container change it to your own class. Then you can have a bespoke container for the images that is cleared properly then has different widths for both desktop/mobile layouts.
yeah I know, that's what I did - I gave span6 img a different width, but the container is still the same width. the problem is that I can't give it a different class cause then it will change the desktop view.
Wait, okay.. so I should remove all the span classes in the html and give them all their own names.. but then how do I tell something to span the 6 columns? just go find the span6 percentage and but that width on each class? Sorry, like I said I'm a n00b.
Ahhh!! got it! Thanks to you guys! Rmoved those span6's and floated the images and added the width to the new override class they have instead of span6. Sorry, I'm an idiot I guess - couldn't get that to work before.. many thanks, many thanks..
Ok so I'm totally not a developer - but I'm learning.. so I'm working on making my husband's site responsive using Twitter Bootstrap..
Can anyone help me figure out why when it goes to small version (2 column) there's that weird space above and below the images in the row?
Also why is the horizontal scroll bar showing up???
here's the page - http://zachbush.com/test/index.html
Thanks!!
What is
for around the images? It's the reason the secondary image is getting a gap above - these divs are not clearing their contents either.
That didnt go well;
What is
for around the images? It's the reason the secondary image is getting a gap above - these divs are not clearing their contents either.
Okay, what is the span6 div class for. Something weird happening when using code for some reason.
It's Twitter Bootstrap, it's telling it to span 6 of the 12 columns, and then for the small view media query css it tells it that .span6 { width:100%; }
The scrollbar is showing up because you have a div with a class of 'container' which has a fixed width. This probably needs to be changed to a class of 'container-fluid'.
Also, span6 isn't clearing it's contents, hence the gap above each second image. The gap under the first (left) images is because the image on the right is being pushed down.
Have you looked at just putting these 2 images in the same container and float: left; them?
yeah I tried that, and then everything stacks 1 column instead of 2 for some reason :/ I don't know if it's a bootstrap thing or something I'm doing wrong..
Also - thanks Paulie D!
Ok, so it's doing something weird because I need span6's to be 100% width in mobile view, but on desktop I need them to be ~50%, but the images within those span6's are in rows and also span 6 bc there's 2 of them - which is causing the problem.. Cause I need the containing span6 to be 100% but the span6 within that container to only by ~50% so the images are 2 side by side. So my hack way of addressing that was to just tell the span6 img in mobile view to override the 100% and be 50%.. but it's container is still at 100% and I think that's what's causing the space??
This is the only way I could get mobile view to show the 2 images side by side, anything else I did always resulted in all the images stacking on top of each other in 1 column..
There has to be a better way..
Maybe instead of using span6 as the images container change it to your own class. Then you can have a bespoke container for the images that is cleared properly then has different widths for both desktop/mobile layouts.
but I need it to be span6 in desktop view. In mobile view I need those 2 span6 containers to be different widths, but the same width in desktop..
You can't expect two identical columns (span6) to have different widths. That's the whole point of giving them the same class.
You could override one of the widths by adding a separate class to that div in your media query
yeah I know, that's what I did - I gave span6 img a different width, but the container is still the same width. the problem is that I can't give it a different class cause then it will change the desktop view.
Wait, okay.. so I should remove all the span classes in the html and give them all their own names.. but then how do I tell something to span the 6 columns? just go find the span6 percentage and but that width on each class? Sorry, like I said I'm a n00b.
No. you can add a class in your media query, perhaps called .override to the individual span and use that to change the width.
so your CSS will be something like
I think that will work
Ahhh!! got it! Thanks to you guys! Rmoved those span6's and floated the images and added the width to the new override class they have instead of span6. Sorry, I'm an idiot I guess - couldn't get that to work before.. many thanks, many thanks..