Archived topic
Woocommerce Product Image Size/NavigationAdjustment/Footer Widget Space
1 reply · Started by Pahn Cabrera on October 5, 2015
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 ^.^.
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;
}