Using percentages and float drop

[ctecha]

Hey everybody,

Starting my first responsive design and Im using all percentages and ems for the sizing of stuff. However Im still getting float drop when shrinking the browser window width wise. I’ll set the percentages to where I want them to be and then when I shrink the browser window, instead of the elements just getting skinnier and skinner, they hit and then the far right one float drops. I have 3 divs floated left next to eachother. I have no idea on why this is happening. Can anybody help?

Thanks

[Paulie_D]

It depends on your code.

Could you replicate it in Codepen?

[ctecha]

didn’t try it in codepen. here is the site im working on:

http://2getsavvy.com/response

If you look at the top 3 boxes, the far right one drops. Also below that the signup form drops as well when it hits the “master” graphic on the left even though I have that set to max-width: 100%;. Thats the part Im most confused with right now is when Im getting float drop even though everything is in percentages.

[Paulie_D]

I would check the ‘margin-right’ in one of your media queries, I suspect there is fight between your custom.css and resposive.css

I think it just might be that ‘custom’ is linked before ‘responsive’.

Yeah, you set module 3 to margin-right:0 in your custom.css (line 91) but this is overridden in line 78 in your responsive.css.

If that’s not it, let us know.

[ctecha]

thanks paulie that worked. changed some margins and its seems to be fixed now. one other question i had is with images. if you shrink the browser width so it gets to the media query with the red background, and then keep shrinking, the images in the top 3 boxes get smaller and smaller. do you know of a replacement technique i can use to switch these images out to something that is more readable? right now they are too small to read

[Paulie_D]

OK, right now the ‘red background’ isn’t working but I know what you mean.

It’s easy to get obsessive with this kind of stuff but you have to remember that you are targeting devices rather than specific widths. Sure, the labels are hard to read at a width of 500px – 600 px but, in real life, no-one is going to be looking at it at that resolution.

However, to answer your query even more specifically, I wouldn’t use images there that include the text. I would use the image of the ‘banners’ as the background of the heading and size the actual text in a media query.

My opinion of course.

Oh, you might want to look at the min-heights of the modules as they sometimes aren’t always the same.

[ctecha]

thanks paulie. yeah im trying not to get obsessive about it you made a good point at some of those pixel widths people aren’t even going to be seeing it so it doesn’t matter. i’ll have to check out those min heights i just noticed that too. is there an image replacement technique though for regular tags or do I have to use background images to do a replacement depending on what device im targeting?

[Paulie_D]

You could have different images for different device widths…it’s just another css option.

I think you could also look into using one image all the time and see what the background-size css property can do for you.

[ctecha]

thanks i’ll look into that solution

[Author]

Posts