Amazon changes CSS

I have designed a site for a client who wanted an Amazon section so she can sell products.

www.theamazingwebmall.com/webmall.html

I embedded the Amazon section OK and the layout was 2 cols: a narrow section on the left which had a menu/list of the various categories of products and the main section to the right which contained the actual products. I adjusted the CSS to suit.

Amazon keeps changing it back to a single column. This means that the narrower menu section is now UNDER the main section, the same width, and not visible initially. The footer is also under the main products section and not at the end of the various bits of content. As you can see if you look at the site, there is no need for such wide sections on some sections as they are only lists.

They also removed my bit of space between the site navbar and the content.
I wouldn’t mind so much if the menu came first! But it doesn’t.

My client – who is not computer savvy – said that Amazon told her it was because of Google. Quote: “Amazon made a change to the layout as Google can only have so many pixels.”

I have asked her to let me know exactly what Amazon said.

I have no idea what this really means but find it absolutely ridiculous that a search engine goes by layout and not content. However, I know nothing much about how Amazon operates except what I have picked up doing this site.
My measurements were (for the Amazon page)
#wrap: 748px
#main: 530px
#sidebar: 200px

Not particularly wide compared to most of my other sites so I really don’t know what is going on here except I will probably steer clear of sites like this in the future. :slight_smile:

My client is waiting on them phoning her at the weekend. She said he did it while he was on the phone talking to her and told her it was now “portrait” when before it was “landscape”. I told her to tell him that her web designer wants it back the way it was. It really looks stupid at the moment. I’ve never heard those terms in relation to web design - I had made it fluid so it would look OK in all screen sizes so it was not as if it was a large fixed width.

That’s weird language to be using on the web. :rolleyes:

How are these styles getting into your style sheet (near the bottom)?

#wrap {  width:530px; }

#sidebar {
  float: right;
  overflow: hidden;
  width: 200px;
}

Did you put them there? If so, just remove them.

I am not having a problem with the CSS. One is able to override the Amazon CSS by adding individual styles via the client’s access to her account. Everything works and the site looked nice with its two column layout. Now IMO it looks very crappy with all the content aligned to the left of the screen instead of centred.

The problem I have is that Amazon has changed it to a one column layout. Even though one of their divs is called #sidebar! Obviously meant to go on the side!

I thought someone might know if Amazon does this sort of thing and for what reason.

The layout you are referring to (single column instead of left and right) is being controlled by the styles in the CSS file—which you have full control of, I gather. I’m not sure why you think the page layout has anything to do with Amazon, unless I’m missing something.

EDIT: for example, if I alter the CSS in my own browser, the columns site side-by-side nicely, as you originally intended.

The problem is that it keeps changing! It is not how I left it. All my client is doing is adding product, she hasn’t messed with the CSS or anything. She wouldn’t know how. When she asked Amazon why it kept changing, they told her it was because of Google. Quite ridiculous, I know.

I’ve changed it back twice now. I’m waiting for her to get back to me with a more accurate report on what they are telling her.

Ah, heck, my apologies—I see there’s an iframe in there. That’s why Amazon has control over the styles. Hmmm, that’s a pain.

Yes!!! Even so, I would have thought that my changes were not enough to cause a problem.

If you outline (if you use the Web Developer toolbar) iFrame, you will see there is a huge amount of space available - almost the width of the screen - that will more than accommodate my layout.

So, just to clarify, do you have some way to access the stylesheet that Amazon uses? Via a login of some kind?

Yes, I access it via my client’s account, go to the aStore bit, find the relevant section and add my bits of CSS that will override the current CSS. Just a bit of positioning to centre it and layout the #sidebar and #main so it blends in with the other pages on the site.

All was well until my client emailed me today with the Google story. I haven’t looked at it since the last time I restored it a couple of weeks ago as it is a finished site.

I am waiting to hear what is going on from her. I’ll post back when I do.

Exactly! Makes me think the support person is not very experienced in web design.

Although I haven’t yet seen code from any third party—served via an iframe—that was any thing other than horrifying. Luckily, I’ve never had to use it—though one client pushed me close (but I won!)

I wasn’t keen but the client was referred by my IT guy so I always look after his clients.
They let you override their code but don’t seem to be happy about it. They would no doubt have preferred her to use one of their designs - which are “landscape” ha ha - but she wanted a custom designed site that could be developed into other areas later.

Have a look at this: first one is what is there now - called “Associate provided CSS” but its not!

body { margin: 0; min-width:530px; width:530px; }
#wrap { width:530px; }
#main { width:530px; margin-bottom:19px; overflow:hidden; }
#sidebar { float:right; width:530px; overflow:hidden; }
li.widget { float:left; width:100%; margin-bottom:19px; }
div#footer { width:530px; }

This was mine

body { margin:3em 3em 0 0; min-width:100%; width:100%; }
#wrap { width:780px; }
#main { width:530px; margin-bottom:19px; overflow:hidden; }
#sidebar { float: left; width:200px; overflow:hidden; }
li.widget { float:left; width: 200px; margin-bottom:19px; }
div#footer { width:530px; }

It’s amazing they can’t / won’t just past your code in and be done with it. :rolleyes:

Do you see anything wrong with mine? I’m no expert…

I’m not that good at judging until I see it in place, but it doesn’t seem too bad. A few things I might change, but I’d rather comment when it’s in place. The Amazon code isn’t so good, though, with the footer inside the left column content.

I’ll post back when I hear from my client after the weekend.

Yes, the footer is now totally out of place.