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
@pgiworldwide Have you tried inspecting the logo on woo commerce page and on standard page? What are the differences?
my css is being overridden on any woocommerce related pages.
I can get around it with the !important tag but I would rather not do that as it seems improper.
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
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/product/woo-single-2/
woocommerce product page showing the enlarged logo due to woocommerce css
If I add this it seems to be okay.
img.img-logo { max-width: 270px;}
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
@schpengle it seems to be an issue with limited connections allowed on the temp hosting account
its just a temp link using localy by flywheel. That might be why its showing this? Not sure. Never developed locally like this.
hmm. I tested that as well but typically whatever I name the class it does this. Ill do more testing and report back.
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:
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.
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.
well done 
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!
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/
and these