Resizing browser too far causes featured page to wrap to new line (Safari only)

[Justin]

I’m experiencing an issue in Modern Portfolio Pro, which only seems to occur in Safari. Chrome and Firefox did not reveal the same issue for me.

The issue is in the Portfolio section of the front page, which I’ve customized to display featured pages rather than the default featured posts.

When you resize the browser past a certain horizontal resolution, the third featured page in the portfolio section wraps and appears by itself on a new line, giving it a very asymmetrical appearance.

Oddities I noticed during troubleshooting:

• Once the issue has occurred, hovering the mouse over each featured image in the portfolio section causes each block of content to change size ever so slightly, whereupon the third featured page is then displayed correctly. This does not occur when I disable the css opacity effect for mouse hover.
• Changing various css settings while the issue is occurring, often causes the issue to go away, until you resize the web browser boundaries out to any greater width.
• The breakpoint at which the issue occurs, appears to be once the featured page images reach their native size. Prior to reaching this breakpoint when resizing the browser window, the images appear reduced (squished) in size, and the issue does not occur.
• The issue still occurred when I disabled the vast majority of my custom CSS settings.

I setup a test user account so anyone can take a look at a copy of my site:

http://staging6.justinwampler.com

username: test_user
password: testuser123

http://staging6.justinwampler.com

[Victor Font]

I've always taken exception with testing mobile responsiveness by resizing a desktop browser. This is not the way mobile devices work and testing this way always exposes outlier conditions that will never occur in real life use. A better approach is to use a mobile test site.

Responsive changes are based on media queries that invoke different CSS directives based on breakpoints. A breakpoint is a screen width, generally measured in pixels. When resizing the browser, you can resize to screen widths that just don't exist in the mobile world. In fact, I had a client test the responsiveness of a site by resizing his browser just a day or two before we were schedule to go live. He complained about elements crashing into each other as he changed the screen size on his desktop. I ended up having to add more than a half-dozen media query breakpoints to satisfy his eye, some just a few pixels apart.

The Modern Portfolio Pro theme uses media queries that use the max-width dimension as the breakpoint trigger. This means the theme was designed from the desktop down. A different approach to style design is mobile-first development. The media queries use min-width as the break point triggers. In a mobile first design, you start with the smallest screen size possible and adjust the CSS as you move up the spectrum, finishing at the desktop. Mobile first provides a much more fluid experience for the end user and eliminates the need for all the outlier condition break points you'll encounter when resizing a desktop browser.

You have a choice to make. You can either add breakpoints for all of the various widths you'll encounter when resizing the desktop, or you may want to consider converting your theme to a mobile first design. You won't have any more of the problems you've been experiencing. To determine new breakpoint widths in the current design, you can use jQuery(window).width() in the browser console. When your screen display gets messed up, measure the screen width and add a new breakpoint for that width.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Author]

Posts