CODEWITHSUNDEEP
javascriptjqueryhtmlcsswordpress
Patrick
Patrick

Reputation: 820

Website content jumping up and down when resizing window?

I noticed on some screens and initial load my website content jumps up to meet up with the bottom of the banner. When you resize the window the banner seamlessly resizes to fit. However while resizing the window you will notice the content jumping up and down. I feel like it has something to do with the header height but not sure why it would be delayed in meeting up with the bottom of the banner.

I have posted code question on here without asking this question direclty trying to solve the issue. (For example making a script that changes the header height when the banner size changes.) But was unsuccessful in getting it to work the way i needed and think it was the wrong route anyways.

You can see the site HERE - Resize your browser window to see the content jump and and down.

Any help in the right direction where I could solve this issue would be great! Thanks!

Upvotes: 0

Views: 3840

Answers (2)

Angelo Michel
Angelo Michel

Reputation: 265

You are using a CSS layout which tries to 'fit' everything perfectly. This is known as a reponsive design (on each 'breakpoint' defined in your css it even tries to use a different height). While this is nice for a website to have (it means that on any device it looks good, to fit) it does put some stress onto the css.

Unfortunately, it is very hard in a comment to help you out. Since it requires some basic refactoring to get a much better performance. If you are interested in fixing it however, a good place to start learning what to take on is: https://developers.google.com/web/fundamentals/performance/rendering/

Also, and this might help allot if you are interested, you can actually 'see' how hard your computer (or device) is working for the drawing performance. When in Chrome (OS X or Windows, doesn't matter) you can open the inspect view (ctrl+shift+j) and go to the timelime tab in the upper bar. When you have opened your website, press the leftmost 'record button', then resize the browser and press stop recording. You will end up with a screen similar to this: https://i.sstatic.net/6lS3I.png (this is just an example, not your site).

In the timeline view you can keep track of your performance, you want to avoid purple (layout) bars since that 'costs' a lot performance wise (also the link mentioned earlier explains this very well). As developers we tend to aim for 60fps drawing performance, however this takes quite some effort to reach (especially on full responsive websites). Currently the layout trashing alone takes about 15ms and 10ms paint on your website (on my game pc!). As I 'strip down' the site (leaving only the header) the resizing is fast enough to render smoothly. Clearly the solution to your problem can be found in optimizing your CSS.

On a side note, other than the resizing, you don't seem to have many issues regarding performance it seems. No heavy scripts run around scrolling or anything. Which is a GOOD thing already. And I am quite sure most of your visitors won't be resizing all the time ;-) Hope this helped!

Upvotes: 2

Sebastian
Sebastian

Reputation: 11

I'm not sure but i think it's because of your responsive design has no min-width and max-width defined.

It's used to limit an element that has responsive design to not get too big or too small.

sample:

.header {
  opacity: 0.7;
  font-size: 8pt;
  color: grey;
  width: 100%;
  min-width: 150px;
  vertical-align: top;
}

you could try reading bit bout it here, good luck trying to fix that page :) http://www.w3schools.com/cssref/pr_dim_min-width.asp

Upvotes: 1

Related Questions