Help with responsive design

I’m working on this pseudo-portfolio of sorts in CodePen and need help making it responsive. At 800px I want the About section’s text to disappear and the image to be centered by itself. I can get the text to disappear but not the div and I’m not seeing a way to make the changes via CSS. Do I need to use Javascript to delete elements and reassign the classes to the correct column sizes?

Essentially I’m intending to turn the entire site into one column at 800px, stacking the three column sections on top of each other.

Should I just use javascript to do a bunch of document changes or is there something I don’t know about CSS that could make this all much easier?

For changing class names and deleting content you will need JS.

In your case you might want to use media queries.

If you look at the bottom of the CSS I am, but there doesn’t seem to be a way to do what I want through CSS.

For example, col-xs-3 doesn’t magically become col-xs-12 because I display: none; col-xs-9.

Ah, sorry I didn’t look at the Codepen.

But you are using Bootstrap? Is it absolutely necessary to use 800px as turning point?

Not sure if I get what you want to do here. col-xs-12 means that this div should span the whole width of the container on size xs. If you want it to take only a third of the width on md sized, you can add col-md-4 to it.

That’s probably just my ignorance with Bootstrap showing. I don’t know the difference between xs and md or the five other sizes.

I want to change it at 800px because that’s when the site layout starts breaking down across the board.

Have a look here: http://getbootstrap.com/css/#grid and try resizing your browser window to see the effect on the examples.

1 Like

So if I set something like:

<div class="col-xs-12 col-md-3">
</div>
<div class="col-md-9">
</div>

The second column won’t appear on xs screen sizes and the first will be set to full? Or do I have to display:none; the col-md-9 because it’s being pushed below the col-xs-12 at xs sizes?

I sort of figured it out. That page is a massive help. Thanks.

All divs will be shown (if you want to remove a div on certain screen sizes, there are classes for that as well). The first one will indeed be full width. The second one will also be full width on screen size smaller than medium (sm and xs), because it defaults to full width if nothing else is entered.

Boostrap works from small to large. So setting a col-xs-* will set it to *-columns on all screen sizes. If you have class="col-xs-6 col-md-4", it interprets it like this: 6 columns on xs (which is explicitly set), 6 columns on sm (because nothing else is set), 4 columns on md (explicitly set), 4 columns on lg (because md was set and overrides the “lower” xs).

Sorry for this crappy explanation, but you should really go over the Bootstrap documentation.

And I am 2 seconds too late… :slight_smile:

1 Like

Your explanation is helpful, better than a massive technically written document that I’d have to comb through to find something so simplistic.

The main problem is my ignorance with Bootstrap. I had a recruiter call me about an entry web dev job but the employer needs a portfolio of some kind and I don’t have the money for a domain and hosting at the moment. (Yes, I’m THAT broke.) So I’m trying to use CodePen and get this up and running asap for whatever small shot at it I can get.