Responsive Blog Issues

[Scott]

Hey Guys!

I am running into some problems with full width responsive measures for my blog snippet please try and lend a hand! The Issues:

1) I need to get rid of the white-space that is left behind from the clearfix property.
2) I would like it so when the browser is shrunk the text stays aligned perfectly with the image (how it scales) Obviously some media queries will be needed but is there a rule of thumb when designing for full width?
3) Theoretically I could throw this in bootstrap and make a 100% width div and throw 2 col-md6 floated will this solve most of my problems?

http://marshall-design.com/fullscreen-grid/

Thanks,

[shaneisme]

1) I’m not sure, but you might want to change the method in which you clear floats. I use this one: http://www.adamkaplan.me/css-clearfix/ – if that doesn’t work, it might be time for a reduced case CodePen.

2) The rule of thumb is to start at mobile sizes, as you scale up and the content looks funky, create a media query to compensate for the extra space. Continue until you’ve reached your max-width, etc.

3) That would just give you a single break point, it probably won’t solve most of your problems at all sizes, but it’s a start.

[Author]

Posts