Announcement

**jont** · 25-Nov-2014, 04:46 PM

It must be you Sam .... the SellerDeck website under the tab "Pixel Perfect Design" clearly states .. "Responsive themes that look great on any device" .... not just work on any device but look great AND are pixel perfect

**jont** · 25-Nov-2014, 04:53 PM

Most responsive sites use <img> with 100% width and use either a srcset to introduce different filenames at various window sizes or an oversized image that is as large as the largest viewport (often the smallest viewport needs the biggest image if collapsing to a single column) ... as the viewport expands the image with scale to fit the width of the containing element.

The marketing list in the SellerDeck responsive themes continue declaring a fixed width in the CSS for the images. Declaring fixed widths is again at odds with the whole concept of responsive designs.

I am starting to wonder if the responsive themes have not been built from the ground and that a lot of code has been recycled and the responsive features bolted on the top.

**UKCCSam** · 27-Nov-2014, 11:28 AM

It's not too much of a problem, because it can be fixed for these list built tables, but I felt it was something worth bringing up.

For something being advertised as responsive, for some core features like marketing lists and grid product layouts, it's not really responsive at all.

I went in and messed around with the list for the products view (and marketing/new products stuff) and changed the list layout to use div features rather than table rows and columns. So at least now it will push products below when the window is made smaller, rather than cutting them off entirely.

**brucet** · 02-Dec-2014, 05:31 PM

I suggest taking that up with support, because the marketing lists certainly should be responsive. They may need to take a look at your snapshot to make sure you're using the correct layouts.

**graphicz** · 09-Dec-2014, 09:06 AM

I have been leaving the width and height attributes off images and using css to width or max-width them to 100% or 95% of the containing div as appropriate. So far so good.
However, a client has pointed out that both Google and W3C like images to have width attributes which helps the browser to lay out the page and speeds page load.

Reading round this we should be using three images for every one and specifying a srcset and sizes thus

Code:

<img srcset="large.jpg  1024w,
      medium.jpg 640w,
      small.jpg  320w"
   sizes="(min-width: 36em) 33.3vw,
      100vw"
   src="small.jpg"
   alt="image description" />

w is image width
vw is viewport width

This means creating a myriad of different mages. One could try and build it in using Simple Image resizer (http://www.white-hat-web-design.co.u...ages-with-php/) to generate images but that would too have an effect on page load time.

So, what are we to do? My client has been busily putting fixed widths on his images thus breaking my nice responsive layout. I have no solution just now, I am embarking on the learing curve. What are we to do?

Thank you

**graphicz** · 09-Dec-2014, 01:28 PM

Panic Over!

The css style max-width takes priority over the image width attribute so you can specify a width for your images and still have them responsive as a percentage of the containing div.

Try it here: http://jsfiddle.net/graphicz/rcLsoLpq/

Code:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  
  <style type='text/css'>
    .blimey img {
    max-width:50%;
    height:auto;
}

  </style>
  
</head>
<body>
  <div class="blimey">
    <img src="http://www.graphicz.eu.com/tulips980.jpg" width="980" alt="tulips" />    
</div>
  
</body>


</html>

The width of the containing div can be dictated by whatever responsive wireframe you are using.

There is already a variable <actinic:variable name="ProductImageWidth" />, you could add a section image width knowing that if wrapped in a div as above the browser would ignore it, but page load should be OK because the browser knows how much space to allocate for the image.

Thanks

**UKCCSam** · 09-Dec-2014, 04:29 PM

The problem is that it's a site taken over from v11, so it's fair to assume that the marketing layouts haven't changed because of this.

It does seem strange though. Marketing layouts are quite fixed down and only require work at the higher level (a user adding products to the list). I would have thought that this feature would have been updated to responsive even coming from an older version of SellerDeck. All I can see that would be shifted over is the products and sections the user has selected to shown on the recently viewed/newly listed/popular listings.

I'm only assuming that though. I probably don't know nearly enough about SellerDeck to say such things.

**malbro** · 11-Dec-2014, 05:13 PM

Originally posted by UKCCSam View Post

Some of the features built in aren't responsive by nature. The marketing features (Best sellers, New Products, Recently Viewed products) don't reposition when you squash the window, resulting in some of them getting cut off of the edge of the screen.

I've had the same situation for the product sections, although I think I may be wrong here. The options for columns in product sections are still there, but again no repositioning is done, so if you had a 4 wide grid of products, resizing the window will just cut the end columns off.

Has anybody else been getting these problems or is it just me?

If you upgrade from an earlier version to V14 and then apply one of the responsive themes you may find that some layout settings remain from the earlier version so that you are not using the responsive code. I had this problem with fragments on the brochure pages because they continued to use a customised layout from a previous version.

Upgrading to responsive can involve a lot of checking of the settings to make sure none of the old layouts are in use.

**brucet** · 17-Dec-2014, 12:56 PM

Upgrading from an earlier version and applying a responsive theme should not leave any layouts in use that are not responsive. I would suggest raising that with support so that we can look into it and find out why it's happening

**malbro** · 24-Dec-2014, 09:23 AM

Originally posted by brucet View Post

Upgrading from an earlier version and applying a responsive theme should not leave any layouts in use that are not responsive. I would suggest raising that with support so that we can look into it and find out why it's happening

Details of problems passed to Sellerdeck

Announcement

Some features aren't responsive

Some features aren't responsive

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment