Jump to content

Product page styling (possibly code related?)

Go to solution Solved by tuanphan,

Recommended Posts

Hi, Ok so I have a few questions with things I've encountered whilst putting a store together (7.1), I'm slowly getting my head round it but some stuff is throwing me which I hope I can find solutions to, I think they're related to styling and hopefully not too code-involved to fix:

First one: I have a site-wide logo, a png of grey text that sits on the white background of the header (pretty normal), on the store front page I have a dark header background image, the dark text is now obscured. to fix this I added the following to the store index page (advanced> page header code injection) referencing a new white text png:

<style> div.header-title-logo a { content:url("white text png URL here") !important; max-height: 45px; } 

it works great on the store front. However, when clicking on an individual store item, the page that opens retains this and doesnt go back to the grey text logo...any ideas how to fix it so just the store front is affected - OR how to add some sort of background to the product page? The "edit section" of the product page offers no help (Can't add a background) and a change in header colour is global.

My next question: is how to fix some styling on the product page itself. I have the item format set to "simple" with a picture on the left, a title and description (with varient options etc) on the right. Weirdly the info on the right has a 60px top padding shifting it down on the page relative to the photo on the left. I've tried adding:

{ @media screen and (min-width: 768px)
.tweak-product-basic-item-content-alignment-top .ProductItem-details, .tweak-product-basic-item-gallery-design-stacked .ProductItem-details 
  padding-top: 0px !important;

to the custom CSS (website tools panel). It had no affect. I can't find anything useful in the 'spacing' part of the site styles panel. There seems to be a lot of padding between the item details and the 'additional info' below it (which seems fixed on some fade-in thing, Additional info page feels like the older 7.0 ui!)

Lastly I seem to be getting some odd behaviour with the styling, sometimes the top menu displays as uppercase, other times it's lowercase...I'm not sure why! If you've made it this far; thanks for any suggestions!

Link to comment
  • Replies 2
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

  • Solution

You can change your code to this to make code run on Shop/Category list page only

<style> body.view-list div.header-title-logo a { content:url("white text png URL here") !important; max-height: 45px; } 


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.