Page Width responsive images

I designed a cool new GUI for my antique lighting company. We manufacture a large line of completely hand crafted, antique lighting reproductions from the early 1800’s through the Deco period of the 1940’s. We start with solid Italian/Greek Brass, thus the metal look of the GUI. We’ve done lighting for the US Capitol, Paramount, Warner Bros, etc and offer high end, quality products all proudly made in the USA.

I also own a design and marketing firm for many years and started building it out originally in Dreamweaver. Since I am not a coder persé, more of a designer and quite adept WYSIWYG developer, when things started to go wrong on misaligned this and that, I ended up looking for alternatives to DW. Furthermore, the DW layout was not responsive and at the time, two years ago, it wasn’t as imperative as it is today to have a responsive website, especially now that Google is penalizing non mobile ready websites. I started trying it in Muse then realized I would have to actually make three versions of this quite large website. I looked at Reflow and Macaw, same problems. I am very happy to have found Webflow. I have been teaching myself and have great optimism but I do need some guidance.

Here’s my issue.

I love Webflow. I am learning it quickly and adapting. But I’m having one issue. The GUI design (main middle section) I believe is 1018 px wide, excluding the background “wallpaper”. Each time I place a full width image into a container, the right side is not visible… it gets “cut off” for lack of a better word. I understand I can use this code to alter that:

@media screen and (min-width: 1200px) { .w-container { max-width: 1170px; } }

… however, I am wondering if anyone can give me other direction on perhaps a better way to achieve a solid layout that is responsive.

Secondly, it seems the images I am placing into containers are not resizing down as the browser is resized down. I’ve seen this work on many sites yet I cannot get it to work on mine. Here is a screenshot of the new website. I would really love to use this new interface design. I feel like I’ve captured the “era” that coincides with the antique style lighting we manufacture and that the feel is perfectly matched for what we do.

Our old website is http://www.customlightingfixtures.com which we are redesigning with this interface.

I will also be redesigning my music website at http://www.sethregan.com as well as my other company site for 1 ON 1 Entertainment http://www.1on1ent.com . We will also be speaking with our full client list to offer them redesigns of their websites into responsive WF sites. There are about 150 websites we will hope to redesign with WF.

As much as I don’t want to buy a template and completely forgo the very cool new GUI for the lighting company, I’m not sure it can work within WF’s layout limitation but I’m truly hoping I’m wrong.

Any help is greatly appreciated. Thank you.

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.