# Woocommerce pages messing with image sizes **URL:** \ **Category:** Beginners\ **Created:** [February 9, 2018, 5:33pm UTC](https://forum.pinegrow.com/t/woocommerce-pages-messing-with-image-sizes/1599 "2018-02-09T17:33:09Z")\ **Posts on this page:** 17\ **Page:** 1
**Author:** ![pgiworldwide](https://avatars.discourse-cdn.com/v4/letter/p/278dde/32.png) [@pgiworldwide](https://forum.pinegrow.com/u/pgiworldwide)\ **Post date:** [February 9, 2018, 5:33pm UTC](https://forum.pinegrow.com/t/woocommerce-pages-messing-with-image-sizes/1599/1 "2018-02-09T17:33:09Z")
I am trying to create a wordpress theme with Pinegrow. It all worked great but for some reason my layout images are ingoring the design css and using the woocommerce css on only woo commerce pages, resulting in enlarging them and breaking the intended layout. Ive tried out the pinegrow sample theme and it doesn’t happen. What am I doing wrong with the page setup that my design css is being ignored on woo commerce pages? Ive attached a screenshot. Thanks ![question](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/1X/613bf85069d52eb6000d387db390bc0b4e12988c.jpg) ---
**Author:** ![Rob](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/rob/32/9_2.png) [@Rob](https://forum.pinegrow.com/u/Rob)\ **Post date:** [February 9, 2018, 5:36pm UTC](https://forum.pinegrow.com/t/woocommerce-pages-messing-with-image-sizes/1599/2 "2018-02-09T17:36:59Z")
@pgiworldwide Have you tried inspecting the logo on woo commerce page and on standard page? What are the differences? ---
**Author:** ![pgiworldwide](https://avatars.discourse-cdn.com/v4/letter/p/278dde/32.png) [@pgiworldwide](https://forum.pinegrow.com/u/pgiworldwide)\ **Post date:** [February 9, 2018, 5:47pm UTC](https://forum.pinegrow.com/t/woocommerce-pages-messing-with-image-sizes/1599/3 "2018-02-09T17:47:17Z")
my css is being overridden on any woocommerce related pages. ![img-logo](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/1X/d5944b535f1470e6bac3903cc0398863f9fcb4bc.png) I can get around it with the !important tag but I would rather not do that as it seems improper. ---
**Author:** ![Rob](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/rob/32/9_2.png) [@Rob](https://forum.pinegrow.com/u/Rob)\ **Post date:** [February 9, 2018, 5:53pm UTC](https://forum.pinegrow.com/t/woocommerce-pages-messing-with-image-sizes/1599/4 "2018-02-09T17:53:19Z")
Do you have a link to the site? Maybe try being more specific with a css rule for the woo commerce pages, e.g. .woocommerce .woocommerce-page .img-logo { max-width: 270px; } or something similar ---
**Author:** ![pgiworldwide](https://avatars.discourse-cdn.com/v4/letter/p/278dde/32.png) [@pgiworldwide](https://forum.pinegrow.com/u/pgiworldwide)\ **Post date:** [February 9, 2018, 5:57pm UTC](https://forum.pinegrow.com/t/woocommerce-pages-messing-with-image-sizes/1599/5 "2018-02-09T17:57:35Z")
let me know if these work. I am just messing around with pinegrow but you will see what I mean. Non Woocommerce landing page with correct size logo [http://4eaa89d4.ngrok.io/](http://4eaa89d4.ngrok.io/) [http://4eaa89d4.ngrok.io/product/woo-single-2/](http://4eaa89d4.ngrok.io/product/woo-single-2/) woocommerce product page showing the enlarged logo due to woocommerce css ---
**Author:** ![Rob](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/rob/32/9_2.png) [@Rob](https://forum.pinegrow.com/u/Rob)\ **Post date:** [February 9, 2018, 6:07pm UTC](https://forum.pinegrow.com/t/woocommerce-pages-messing-with-image-sizes/1599/6 "2018-02-09T18:07:57Z")
If I add this it seems to be okay. img.img-logo { max-width: 270px;} ---
**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\ **Post date:** [February 9, 2018, 6:08pm UTC](https://forum.pinegrow.com/t/woocommerce-pages-messing-with-image-sizes/1599/7 "2018-02-09T18:08:41Z")
Hi there, just mentioning that if opening the 2nd url in PineGrow, it instantly displays some DOM and permission errors. that wont help. here is a screen capture to show and help you ![2018-02-09_vast_ink](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/1X/f2ea46a247b39ac360c8467054d5e9d5529db5e0.png) ---
**Author:** ![Rob](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/rob/32/9_2.png) [@Rob](https://forum.pinegrow.com/u/Rob)\ **Post date:** [February 9, 2018, 6:09pm UTC](https://forum.pinegrow.com/t/woocommerce-pages-messing-with-image-sizes/1599/8 "2018-02-09T18:09:45Z")
@schpengle it seems to be an issue with limited connections allowed on the temp hosting account ---
**Author:** ![pgiworldwide](https://avatars.discourse-cdn.com/v4/letter/p/278dde/32.png) [@pgiworldwide](https://forum.pinegrow.com/u/pgiworldwide)\ **Post date:** [February 9, 2018, 6:10pm UTC](https://forum.pinegrow.com/t/woocommerce-pages-messing-with-image-sizes/1599/9 "2018-02-09T18:10:00Z")
> [@pgiworldwide](#): > > [http://4eaa89d4.ngrok.io/product/woo-single-2/](http://4eaa89d4.ngrok.io/product/woo-single-2/) its just a temp link using localy by flywheel. That might be why its showing this? Not sure. Never developed locally like this. ---
**Author:** ![pgiworldwide](https://avatars.discourse-cdn.com/v4/letter/p/278dde/32.png) [@pgiworldwide](https://forum.pinegrow.com/u/pgiworldwide)\ **Post date:** [February 9, 2018, 6:10pm UTC](https://forum.pinegrow.com/t/woocommerce-pages-messing-with-image-sizes/1599/10 "2018-02-09T18:10:51Z")
hmm. I tested that as well but typically whatever I name the class it does this. Ill do more testing and report back. ---
**Author:** ![Rob](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/rob/32/9_2.png) [@Rob](https://forum.pinegrow.com/u/Rob)\ **Post date:** [February 9, 2018, 6:13pm UTC](https://forum.pinegrow.com/t/woocommerce-pages-messing-with-image-sizes/1599/11 "2018-02-09T18:13:00Z")
Without the rule and styles applied ![44](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/1X/dbcb2e57e27b040aa5617a50dc2fdef888f52f20.png) with the rule and styles applied ![58](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/1X/4cd2716f85fc3920eee8fd6f5bf41c9c9338870e.png) ---
**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\ **Post date:** [February 9, 2018, 6:15pm UTC](https://forum.pinegrow.com/t/woocommerce-pages-messing-with-image-sizes/1599/12 "2018-02-09T18:15:50Z")
well I was looking at it and it suddenly developed a couple of columns 😃 could it also be the order of the styles loading in Pinegrow. Ie, the order from top to bottom (ie, cascade, prescedence etc) mmmm also, I’ve saved both versions of the site locally, and, while I can view the 2nd one (with the larger logo) ok if saved locally, I still get the error with regards file file:///Users/schpengle/Documents/WebDev/Sites/vastink1/Woo%20Single%20 when viewing the first one (small/correct logo) …it wouldnt be …spaces in the name would it? er … or a missing .html off the end of it:slight\_smile: ---
**Author:** ![pgiworldwide](https://avatars.discourse-cdn.com/v4/letter/p/278dde/32.png) [@pgiworldwide](https://forum.pinegrow.com/u/pgiworldwide)\ **Post date:** [February 9, 2018, 6:19pm UTC](https://forum.pinegrow.com/t/woocommerce-pages-messing-with-image-sizes/1599/13 "2018-02-09T18:19:56Z")
Yea, I am not super experienced with this type of work, It seems that wahtever I name the image class prior the export the images are always enlarged by the woocommerce css rule. Ill try loading things in different orders. ---
**Author:** ![pgiworldwide](https://avatars.discourse-cdn.com/v4/letter/p/278dde/32.png) [@pgiworldwide](https://forum.pinegrow.com/u/pgiworldwide)\ **Post date:** [February 9, 2018, 6:20pm UTC](https://forum.pinegrow.com/t/woocommerce-pages-messing-with-image-sizes/1599/14 "2018-02-09T18:20:51Z")
Yea I got it to work that way as well, but it seems that once I rename the class in the css file it still does it. Im not super experienced with this stuff clearly, probably something simple I am doing incorrectly. I appreciate the help. ---
**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\ **Post date:** [February 9, 2018, 6:35pm UTC](https://forum.pinegrow.com/t/woocommerce-pages-messing-with-image-sizes/1599/15 "2018-02-09T18:35:35Z")
well done 🙂 ---
**Author:** ![pgiworldwide](https://avatars.discourse-cdn.com/v4/letter/p/278dde/32.png) [@pgiworldwide](https://forum.pinegrow.com/u/pgiworldwide)\ **Post date:** [February 9, 2018, 6:40pm UTC](https://forum.pinegrow.com/t/woocommerce-pages-messing-with-image-sizes/1599/16 "2018-02-09T18:40:12Z")
The problem seems to go away if I give the images a class like vast.img.logo rather than img-logo-vast etc, think my problem is solved. Thanks for the help! ---
**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\ **Post date:** [February 9, 2018, 8:17pm UTC](https://forum.pinegrow.com/t/woocommerce-pages-messing-with-image-sizes/1599/17 "2018-02-09T20:17:04Z")
mmm, periods _._'s in styling name can be problematic. have a look at this [http://tomphippen.com/2010/11/dots-in-class-names-a-useful-css-note/](http://tomphippen.com/2010/11/dots-in-class-names-a-useful-css-note/) and these >