Shopping Cart Position on iPad

Hi, I used this code to fix the shopping cart to keep it from sliding up and down:

Code: Select all

#btn-cart {top: 20px!important;}

but what happens now is that on the iPad/iPhone (in the vertical position) the shopping icon moves and covers up part of the main menu selector making it hard to select the main menu. I end up hitting the shopping cart icon by accident. Could any suggest any code that could fix this issue? Thanks

ref: http://drshawnadarou.com/ ...on mobile

You could use media-queries for that. There is an article describing how to do that for Joomla, but for wordpress, You could do the same:
https://www.gavick.com/forums/storebox- ... 28465.html

thats cool. more involved than I wanted. maybe is there a way so that the cart icon always says off to the side of the page, the same as the desktop version with half on the boarder?? With the ipad horizontal it does that fine, it's only in the vertical that the icon moves inside the border to the main page. To me it would seem that fixing the shopping icon to the border on any device would be the way to go. Any code for that??

You could start with this code in override.css:

Code: Select all

@media (max-width: 820px) {
 body[data-cart="true"] {
     padding-right: 36px;
 }
 #btn-cart {
   background: transparent url('../images/cart_shadow.png') !important;
   right: -36px !important;
   top: 20px !important;
   background-position: 36px center!important;
    background-repeat: no-repeat!important;
 }
 
}
@media (max-width: 540px) {
 body[data-cart="true"] {
     padding-right: 36px !important;
 }
 #btn-cart {
   background: transparent url('../images/cart_shadow.png') !important;
   right: -36px !important;
   top: 20px !important;
   background-position: 36px center!important;
    background-repeat: no-repeat!important;
 }
 
}