Woocommerce Product Image Size/NavigationAdjustment/Footer Widget Space

[Pahn Cabrera]

Hello Tom,

I have been working on this site adjustment for weeks, but it seems I cannot find the codes. I tried checking all settings, CSS all the div id/class I can find, but I can’t seem to adjust what I need to adjust.

First: product image on http://nworldonline.com/shop/ are too big. even from each item page. It looks good on mobile, but not very much on monitors.

Second: The Primary Navigation Menu. I was hoping to put them on the center it between two logo’s by increasing the margins or padding, but I cannot apply it on the CSS class I found.

Third: The Footer Widget seems to limit the Width of the image I place in there.. I was hoping to have the image with minimal spacing if you look at the desktop view..

I have a feeling all these should be fixed by CSS, but I cannot seem to find the right CSS id/class for these elements I need to adjust in desktop view…

Thanks in advance ^.^.

[bdbrown]

Hi Phan. Give this css a try. The navigation setting may need some adjustment for mobile devices:

/* reduce image size on shop page */
.woocommerce ul.products li.product a img {
    width: 50%;
}

/* reduce image size on product page */
.woocommerce div.product div.images img {
    width: 50%;
}

/* center navigation between images */
#site-navigation {
    padding: 10px 150px 0 0 ;
}

/* increase image size in footer widgets */
.footer-widgets .grid-33 .widget {
    padding: 0 10px;
}

[Author]

Posts