Responsive site – Problem with resizing the browser

[Paul808]

Hi, I’m making my first full responsive site and I have run into an issue. The site seems to be working as intended in firefox and explorer (surprise). The browsers that are giving me issues are chrome and safari.

On the bio/landing page toward the bottom of the page are two sections one titled “I Got Skills”, the other titled “and they love me for them”. When I load the page (no matter what size the browser width is) it loads correctly however after the browser width is shrunk and then reopened the layout repositions. In the “skills” section the div on the right side is falling below the div on the left. In the setion “they love me” the text is falling below the pictures. It seems for some reason the width on the container div is not being understood. Perhaps its something else. I am really not sure what is going on here and would very much appreciate any advice anyone has. Thank you!!

[Paulie_D]

Not seeing any issues in Chrome.

[Paul808]

Unfortunately, I am seeing the issue in Chrome on both a Mac and PC. Perhaps try loading the page with your browser open to the full width of your screen. Take a look at how the “i got skills” and the “they love me for them” sections are laid out. Now without reloading the page resize your browser to the smallest width and then open it back up to the largest width. When I do this I am experiencing a bug with the layout.

[Senff]

OK yea I was able to reproduce it by resizing the browser really small and then resizing it to full screen again.

Although I can pinpoint the exact issue, I do think it has to do with the fact that you use percentages about everywhere. It should work properly, but it doesn’t. Perhaps there are percentages of percentages that come into play, especially when you use percentages for padding.

[Historical Forums User]

I can no longer see the issue.

[Paul808]

I tried changing the padding from a percentage to pixels but no luck. The issue still exists. On a smaller screen the issue with the “I Got Skills” section sometimes does not occur however the issue with the “And They Love Me For Them” section always occurs (in Safari and Chrome). Load the page with your browser at full screen. You will notice the reference photos are to the left of the quote. Now close your browser to the smallest width you can and reopen it to as wide as you can. You will see the photos are now on top of the quotes.

I have really struggled with this page. Any advice would be greatly appreciated.

[jurotek]

Did exactly as you said and images are left of references not on top

[Senff]

Quick solution: give “quote” a width of 83% instead of 85%.

Long explanation: definitely something to do with percentages. At one point I resized my browser fully and then I noticed that the div max-width had a full width of 1040, but with the padding of 5% on both sides, you would expect there would be 936 available. However, the calculated value was only 914 — with padding on both sides being 63.

No idea why, cause as far as I know, 5% of 1040 is 52.

So then the two elements inside got a width of 15% and 85% (of 936). In pixels that should be 140 and 795.

However, the calculated values were actually 137 and 782. I get the 137 (cause that’s 15% of the actual 914), but the 782??

Riddle me that.

Having said that, I’m not a big fan of placing things next to eachother, and give them a TOTAL percentage of 100. I’d rather go to 99% or 98% even, to avoid situations where rounding errors occur.

Example: one flexible-width parent div with two 50% child divs. If the parent would have an odd number width, things might go wrong sometimes. Let’s say parent is 101 px, then both inner divs would be 50.5 pixels — some browsers round this to 51; and then it won’t fit in the allocated 101 anymore.

Sorry for the long post.

[Paulie_D]

Frankly, this is such an edge case…(I mean who is actually going to resize their browser all the way down that far and then expand it again?)…you are probably putting more work into solving it than is ever going to be required.

Sometimes, good enough is good enough.

[Paul808]

Actually I saw this problem as fatal. I’m not sure everyone saw just how bad the problem was. Anyways, I posted the issue on the stackoverflow forum as well. I got a lot of suggestions but the one that finally worked was by wrapping each pic/quote combination and the bars in the skills section in a wrapper div with a width of 100%. Thank you very much to all of you for your suggestions!

[Author]

Posts