Jump to content

Removing the image section of a product page

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://www.jemspnw.org/register/youth-camp

On the right side the page when viewing a product, there is space for an image. Thing is, I have no need for a product image, and I'm not a fan of all the dead space. Is it possible using CSS to reformat the page so that the image block doesn't take up all that space, and so the text can be placed in the center? As far as I can tell, since this is the page you use to add the item to your cart, I can only make edits using CSS.

image.thumb.png.9e5392828eaeddee06250f585afa6897.png

Link to comment
  • Replies 5
  • Views 1.5k
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

Add to Product Page Header

<style>
@media screen and (min-width:641px) {
figure.ProductItem-gallery {
    display: none;
}
section.ProductItem-details {
    float: none;
    margin: 0 auto;
    width: 60%;
}
}
</style>

 

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
  • 1 year later...
On 12/7/2021 at 9:52 AM, SandyFreed said:

Hi @tuanphan how do I do this for my site also? I also have no need for a product image

Site URL: https://www.sandyfreed.com/coaching/p/life-coaching

It looks like you solved this?

Do you want to make all navigation items on same line, now i see they appears in 3 lines

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
On 12/15/2021 at 11:33 PM, MichelleArena said:

Hi@tuanphan, I am also trying to get rid of the image section of a product page, but I don't know where to go to add the code you posted to the product page header. Can you help me please? Thanks! :)

ARTIST REGISTRATION — CloverCon 2022!

 

Edit Product > Edit Additional Info >> Add a Code Block >> Paste above code

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.