Design was made to look perfect at full and fixed width, how to deal with it on wider screens?

by CodeVirtuoso   Last Updated April 21, 2018 07:16 AM

A website design has been provided to me which I should turn into a HTML page.

But here is the catch:

  • It was made to only look good when taking full width (it has a slideshow, and also a horizontal product slider where products appear to come from outside the screen).

  • It was made at width of 900px. If I was to make it fluid, it could still look good to let's say 1200px, but any wider and:

A) The slideshow images would get too stretched out to show what they need to and in good quality.

B) The text that goes over the slideshow becomes unreadable, as it assumes certain image size at which it can work pasted like that over the image.

QUESTION: How do I make this design work on wider screens?

WHAT I HAVE TRIED SO FAR:

  1. Fixing the page width at 1200px and centering it on screen. I see this working well on many websites. However, all these websites have something on top (like menu) which goes full width. This design doesn't have that, and just that detail makes in noticeably not look good. And the products in the horizontal slider then appear to come out of "nowhere" instead from outside of the screen.

  2. Adding background color/gradient to the margins that appear with solution 1. It seems to only emphasize how out of place is this design when not full width.

  3. I may have the option to suggest changes in design, but what to suggest?

Any advice much appreciated.



Related Questions


Page-specific responsive breakpoints

Updated March 26, 2015 14:05 PM


Suggest good max-width for fluid width design

Updated June 16, 2015 14:07 PM



Cache file /home/queryxchang/questarter.com/apps/frontend/config/../cache/-q-design-was-made-to-look-perfect-at-full-and-fixed-width-how-to-deal-with-it-on-wider-screens-17-117523-html could not be written