Specifying fixed web page width breaks layouts

[graphicz]

In Smart, Classic and Responsive layouts if a fixed web page width is selected in Site Options the layout breaks. Left side bar and main content occupy full width and right sidebar is pushed down the bottom.
The reason appears to be that in the style sheets the property for left-area of width:80%; (which holds the left sidebar and main content and allows room for the right sidebar) is removed by a BlockIf if web page width is specified.

http://www.graphicz.eu.com/smart/
http://www.graphicz.eu.com/classic/
http://www.graphicz.eu.com/wireframe/

[jont]

I am surprised the option to have a fixed width is there as there are only responsive themes available now and adding a fixed width is completely counter-intuitive ... I am guessing this is an oversight with the developers as it should not really be there.

[peblaco]

I read about that problem, there was a topic posted about the fix, for some reason it has been deleted. A search shows the topic was here and can be seen in the cache.

It would have been easier if old variables were left for upgraded sites and new variables were defined for responsive themes, or only had the widths defined within the CSS.

[jont]

or only had the widths defined within the CSS.

Indeed - there is no benefit at all by having a fixed overall width in a responsive theme ... even if the outer width is fixed when the viewport is reduced all the other elements will recognise the change and collapse as they should do leaving a fixed element with hideously formed sub-content.

Editing the CSS is going to be a real challenge for casual tweakers .... some classes will possibly have 4 or more entries depending on the @media query .... which I have just thought...

.... how does SellerDeck behave when you right click a class in design tab and try and look it up in the stylesheet ... which version will it take you to? Not had a play with that yet .. better go an have a look and see how it handles ....

[graphicz]

It is just the width we are talking about fixing. If all the other dimensions are done as percentages that shouldn't be a problem. I personally don't like 100% width websites and the responsive design I have been using for SellerDeck which is based on the Skeleton wireframe is simple and elegant and works with a web page width in desktop of the pretty standard 960px.

[jont]

Ah - I see what you mean with it starting off at 100% wide (which went out with <table> layouts)

As different viewports will introduce different media queries the solution for the SellerDeck design team (or whoever they paid to design the themes) would be to use a block if to test if the ACTSTDWIDTH variable it being used and introducing a fixed-width.css stylesheet to over ride all the % widths after the rest of the styles have been loaded .... this would then allow all the layouts to sit correctly only if the ACTSTDWIDTH option has been ticked.

[tristam]

This example you have provided of Smart theme doesn't seem to work on my phone. Is this because you have messed about with it a bit? The Classic looks ok though.

Just waiting for my product key so I can crack on with it!!!

[graphicz]

No it doesn't does it?
I haven't messed around with it. It is straight out of the box but with the web page width in site options specified as 980px. It seems you are only meant to have the site 100% wide?

[graphicz]

Thanks Louise - the deleted post says this:

To Change to a Responsive Theme upon upgrading to SellerDeck 2014

Open SellerDeck 2014
Once you have imported your snapshot to your new site do the following:
Go to 'Design | Themes'
You will see a list of Themes:
Select Smart or Classic responsive if you want a readymade theme. If you would like to design it yourself but would like the responsive framework select ‘Responsive Wireframe’. Picking between Smart and Classic is a matter of how you would like it to look.
Below these Themes there are a list of Colour Schemes, pick these to match with your Theme then press ‘OK’

If the website looks wrong in 'Page Preview' please try the following: -

Go to 'Settings | Site Options | Layout'
Ensure Embedded Preview Compatibility is set to IE=10 or higher.

Go to 'Settings | Site Options | General'
Ensure these fields are empty: ‘Width for Main Area’, ‘Width of sidebar(s) in pixels’ and ‘Width of web pages in pixels

However this reinforces my point that I don't think it is a great idea to force people to use 100% wide websites (however fashionable) if they don't want to. There are a number of responsive boilerplates that allow a 960px or similar web page in desktop.

[Mike Hughes]

The reason appears to be that in the style sheets the property for left-area of width:80%; (which holds the left sidebar and main content and allows room for the right sidebar) is removed by a BlockIf if web page width is specified

So, approaching this from the viewpoint of how to fix this, what happens if you remove the blockif? Does this solve the problem? (I'm somewhat doubtful as solutions to sellerdeck issues are rarely that simple.)

Mike

[graphicz]

It does seem to Mike. If all other dimensions are % then fixing tje web outer layout for desktop should give a correctly working site (although it doesnt for Smart).

Have a play with http://www.graphicz.eu.com/wireframe980/ Ì have akso pkayed with the mobile menu, header and top contact buttons.

[Mike Hughes]

That right hand column seems to cause a problem for all the themes anyway.

If I resize the browser window then the design collapses seamlessly apart from when you infringe on the RH column. Then you get a horizontal scroll bar until you infringe upon the central column at which point it starts working properly again.

Surely the point is to avoid horizontal scroll bars?

Mike

[jont]

The navigation count on the headline feature product carousel is also borked ... not a good start for an out of the box template

[graphicz]

Mike - I can reproduce what you say by gradually reducing browser window size but if you chose actual device dimensions in FF or Chrome responsive viewers or on actual devices it does seem to behave.

JonT, yes, and site options doesn't give you an optionto turn off the navigation count.

Support have just closed my ticket on this so development don't seem very interested!

[jont]

Support have just closed my ticket on this so development don't seem very interested!

You sound surprised!