MANY Questions regarding changing / formatting images for Allure template

Hello!  Thank you in advance to anyone who can assist me with these issues:

1.  How do I change the "outlined" white circles around my product images on my home page?  I can't seem to get the images to fill the circles - and I don't want a white border around them.  Can I chance that background color from white to something else?

2.  Or if I can't change the background border, then how can I get my photos to fill the entire circle?

3.  I also have the same problem with image size with my sub-categories and with all my product images - the images don't fill the circle.  I want them big like the template shows them.

4.  How can we omit the nivo banner at the top of the home page from ONLY the phone sized application? (media querie for phone).

Hello,

The sizes of the images of your website are determined by the Media settings in the Configuration / Settings menu in the administration. To mach our demo website it should be with these values:

Avatar image size:                           90
Product thumbnail image size (catalog):     345
Product detail image size:                 600
Product thumbnail image size (product page):   95
Associated product image size:        125
Category thumbnail image size:        370
Manufacturer thumbnail image size:      345
Cart/Wishlist thumbnail image size:      80
Mini-shopping cart thumbnail image size:    78
Maximum image size:                  1920

Also your category images should be square (for example 500px / 500px) if they don't have white background in order to fill the entire circle.

If you still want to remove the white border of the image you can do that by going to Plugins / Nop Allure Theme / Settings where you will find a Custom Head Styles textbox in which you have to paste this code:

.home-page-category-grid .item-box, 
.sub-category-grid .item-box{
  border: none;
}

To remove your home page slider from all mobile devices you have to paste this code also in Plugins / Nop Allure Theme / Settings:

@media screen and (max-width: 1000px){
  .slider-wrapper{
    display: none;  
  }
}

Hope this helps