When customers have the screen zoomed in

[lyndsiesal]

I'm having an issue with customers who have their browser view set to 125%, 150%, or higher. It's doesn't only enlarge the screen text but the whole screen so the basket icon on the top right is not visible. 

Anything I can do on my end other than reply to their messages with instructions on how to view the site at 100%?

Ive had a lot of abandoned carts lately and I'm wondering if this is a factor. 

[Dirty Butter]

What skin are you using? What is your store url?

When I use 300% on my screen zoom for the CC Demo homepage the screen changes to a giant version of the Small view - in other words the menu bars, search icon, and cart icon move to under the logo.

[lyndsiesal]

Oops, OK, I misunderstood what my customers were saying.  When they are zoomed, they can see the basket but the bottom of the popup is cut off so they can't figure out how to proceed to checkout.  I'm using a modified Foundation Skin on www.lynniepinnie.com 

[Dirty Butter]

I tried a long list of items in the basket on our plushcatalog store. Even with 300% it jumps to the bottom where the View Basket and Secure Checkout buttons are in the "Small" view. I can scroll up and down and see everything in the basket.

Not sure if mine behaves because of edits I've made, though. I'll check out the Demo store.

You could get around some of this issue by checking Jump to Basket on Add in Store Settings. That's what I have on our store. But people can still click on the basket icon from any page other than the basket page itself.

OK - the basket does NOT scroll in the CC Demo store, but behaves just as you show in the screenshot.

I have so many edits to my skin that I don't know where to start to tell you how to fix this. Hopefully someone will be along shortly who has the skills to pinpoint the issue.

One thought, though. Maybe you need to increase the default size of print so people don't need to zoom?

I just realized that the Demo store does NOT jump to the cart in the right off canvas area, nor does yours. That's one of the edits I have, and that's what makes mine work correctly.

[bsmither]

We can certainly try to make the basket popup be wider. That would collapse the height of the list quite a bit.

In your skin's style file cubecart.css, line 77, make these edits:

.basket-detail-container {
    margin-left: -350px;
    position: fixed;
    top: 27px;
    width: 450px;
    z-index: 100;
}

This makes it about twice as wide.

[bsmither]

Maybe:

margin-left: -9rem;
width: 15rem;

This scales the width of the shopping basket popup to match the size of the displayed font. As the font gets wider, so does the basket popup.

[bsmither]

Still doesn't solve an overly long list, however.

On the other hand, I think the solution that was developed several versions back was to list only the last nine or ten items added to the shopping basket with a ...and more... final line.

[lyndsiesal]

Thank you!  I made the change to skin file but it doesn't look any different to me.  Maybe because I have a huge monitor.  Hopefully it will look different for the customers who were getting cut off.  

Speaking of the skin, is there a guide to the CSS file anywhere that tells me what to edit for which areas?  I'm getting dizzy trying to figure what's what.

[Dirty Butter]

Other Browsers have something comparable, but I'm used to FireFox.

Using FireFox there is a menu item with a wrench icon. Clicking on that provides a menu of tools. Try the Responsive Design tool to see what your skin pages look like on different device widths.

Also, install the FF extension FireBug. Then you can right click on an element you want to change color, etc., and use Inspect Element with Firebug to find where the style changes can be made. That's an overly simplified description, but it will get you started, anyway, at making changes to suit yourself.

The main issue is that all these changes you make will be lost with the next upgrade. So you really need to copy the stock skin, rename it, change the config.xml file in your re-named skin folder to match. Here's My Blue.

<type>skin</type>
	<name><![CDATA[blue]]></name>
	<display><![CDATA[MY Blue]]></display>

Your modified renamed skin will show in the choices for skins in Admin>Store Settings>Layout, so you can set it as the default.

The next time there is an upgrade that effects the skin you only need to make changes to a few lines of new or changed code. Luckily skin changes don't happen nearly as often as core code changes do. I make that easier on myself by putting comments before and after each change, noting what its purpose is.

[bsmither]

Please do not try to mess with the foundation.css file. It is incredibly inscrutable.

There is the file cubecart.default.css that offers a way to apply custom CSS rules. Because this file is last to load, it will overrule any other CSS rule with the same or less specific selector.

The trick, of course, is to find the way to identify what exact HTML thing you want to apply new or different styles to. The browser's Developer Tools is a good thing to learn.