Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Help with Small Screen Columns

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #39737
    ashleybush26
    Participant

    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!!

    #109587
    ashleybush26
    Participant

    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%; }

    #109592
    Paulie_D
    Member

    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’.

    #109608
    ashleybush26
    Participant

    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!

    #109609
    ashleybush26
    Participant

    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..

    #109612
    ashleybush26
    Participant

    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..

    #109618
    Paulie_D
    Member

    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

    #109621
    ashleybush26
    Participant

    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.

    #109623
    ashleybush26
    Participant

    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.

    #109624
    Paulie_D
    Member

    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

    .span6.override {
    width: xxx;
    }

    I think that will work

    #109657
    ashleybush26
    Participant

    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..

Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘CSS’ is closed to new topics and replies.