-
Posts
312 -
Joined
-
Last visited
-
Days Won
11
Reputation Activity
-
euan got a reaction from EarvinChong in Adding text between the Header/Navigation and Products
Hi @bangank36 that has worked thank you.
I have tried adding some styling to it, is it possible to increase the padding/margin around the text?
Edit - with a lot of trial and error I've resolved the issue of padding/margin.
-
euan got a reaction from EarvinChong in Adding text between the Header/Navigation and Products
Site URL: https://circa35mm.com/the-art-store
I am currently working on a print store on my own site. I am on 7.0 and using a Product page with Squarewebsites Universal Filter plugin.
I would like to add some text in the area outlined red on the screenshot below... can this be done and if so is anyone able to advise how I go about doing it?
I only want the text to appear on this page.
-
euan got a reaction from tuanphan in Adding text between the Header/Navigation and Products
Hi @bangank36 that has worked thank you.
I have tried adding some styling to it, is it possible to increase the padding/margin around the text?
Edit - with a lot of trial and error I've resolved the issue of padding/margin.
-
euan reacted to Beyondspace in Adding text between the Header/Navigation and Products
I've checked that you have already set the pseudo before.
I give the suggestion based on this idea
body .Intro:before { content: 'Here is your text'; top: 0; left: 50%; transform: translateX(-50%); position: absolute; } Let me know how it works on your site
Support me by pressing 👍 if this useful for you
-
euan reacted to fantasiummedia in Disable Auto Zoom / Cropping on Individual Product Images
Hi All,
I am selling prints, and would like to disable the auto-zoom on each individual product so the buyer can see a bigger scale rendition of the print they are buying. My template does not have an option to disable autozoom on images. I am using Lange.
I was able to make this happen on the main products page using the code below:
.ProductList-outerImageWrapper { position: static; padding-bottom: 0px !important; } .ProductList-innerImageWrapper { position: static; margin-left: auto; margin-right: auto; } .ProductList-image { width: 100% !important; height: auto !important; top: 0px !important; position: static !important; Unfortunately I'm not savvy enough to get that to apply to the individual product.
Here is a link to a good example of an image that is being cropped: https://www.fantasiummedia.com/prints/stars-over-lake-atitlan
Offering a print of your choice at cost for anyone that can help!
-
euan reacted to brandon in Disable Auto Zoom / Cropping on Individual Product Images
Hi @fantasiummedia.
Here's how I'd approach it. Note that object-fit is focused on fairly modern browsers.
.ProductItem-gallery-slides-item-image { object-fit: contain !important; object-position: top; width: 100% !important; height: 100% !important; position: static !important; } .tweak-product-item-gallery-aspect-ratio-11-square .ProductItem-gallery-slides::before { padding-bottom: 0 !important; } .tweak-product-item-gallery-design-slideshow .ProductItem-gallery-slides-item { position: relative !important; } Let me know how that works for you.
---------------------
UPDATE 4/8/2020 (and 6/24/2020)
In some cases, you may prefer to use this instead:
.ProductItem-gallery-slides-item-image { object-fit: contain !important; object-position: middle; width: 100% !important; height: 100% !important; position: static !important; background-color: #EEE; }