space between catalogue images - Vogue theme

rinoa3108
New Member
9 0 0

Hello,

Id like to increase the width of my catalogue pages, so the products span to align to the end of the header on the right. On the site, the 'necklaces' page under 'jewellery' is the only one that does span to the end. All the other catalogue pages, like 'earrings' 'bracelets' 'summer style' etc dont. Anyone know why that is? Thanks

www.satpeacock.myshopify.com (password= password)

Replies 3 (3)
Caroline_Schnap
Shopify Staff
5705 1 361

Hi Rinoa,

First of all, I see a small goof in the CSS of your theme: #gallery .col3 does not get the same styling as #gallery .col1 and #gallery .col2. Probably because the theme at some point during its development had only 3 columns. It's okay for #gallery .col4 to not have the same padding around it - designer did not want to add space to the right of your gallery.

Start with adding this:

#gallery .col3 {
padding-right:20px;
}

Then, to increase the width of each column, add the following:

#gallery .col1, #gallery .col2, #gallery .col3, #gallery .col4 {
width:24.99%;
}

Please report back on results.

 

Caroline_Schnap | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Caroline_Schnap
Shopify Staff
5705 1 361

Worth noting:

Your theme includes a JavaScript file that contains some jQuery, but your theme doesn't use jQuery. That produces a JavaScript error, and the JavaScript in that file (nav-vr.js) is (obviously) not run.

nav-vr.js

Caroline_Schnap | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

rinoa3108
New Member
9 0 0

Hi Caroline,

Thanks for the quick reply. Ive added the coding for the columns and they are good, thank you. When there are less than 4 products, they stretch across. See 'necklaces' and 'earrings' under the 'bridal' link. Any way to prevent this?

How do i fix the javascript error?

Cheers