How to center logo and remove divide between images

Solved

How to center logo and remove divide between images

jewellerystore1
Explorer
97 0 8

Hello, I am using Exhibit theme. 

 

I would like my logo to be in the top centre of my home page and header menu left aligned like the attached reference. I would also like my images in my collage block to have no gap in the middle like the reference. 

 

Website preview: https://gzlnh77zvnbgvecn-74563387678.shopifypreview.com

 

Screen Shot 2024-06-22 at 2.19.02 pm.png

 

Please help!

Accepted Solution (1)
BSSCommerce-B2B
Shopify Partner
565 114 137

This is an accepted solution.

Hi @jewellerystore1 

In the above instructions

BSSCommerceB2B_0-1719145894748.png

Please modify the CSS as follows

[id$='header-main-grid']>div:nth-of-type(1) {
    order: 2;
    display: flex !important;
    justify-content: center !important;
}
[id$='header-main-grid']>div:nth-of-type(2) {
    order: 1;
    grid-area: 1 / 1 / span 1 / span 4 !important;
}

Result

BSSCommerceB2B_1-1719146018875.png

If it's helpful, please like and mark it as a solution, thank you

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 8 (8)

BSSCommerce-B2B
Shopify Partner
565 114 137

Hi @jewellerystore1 

You should try following the instructions below

Step 1: Go to Admin -> Online store -> Theme > Edit code

BSSCommerceB2B_0-1719030726852.png

Step 2: Search for the file base.bundle.css and add this code snippet to the end of the file

BSSCommerceB2B_1-1719030741324.png

 

[id$='header-main-grid']>div:nth-of-type(1) {
    order: 2;
    padding-left: 90px !important;
}
[id$='header-main-grid']>div:nth-of-type(2) {
    order: 1;
    grid-area: 1 / 1 / span 1 / span 5 !important;
}

 

Result

BSSCommerceB2B_2-1719031109095.png

If it's helpful, please like and mark it as a solution, thank you

Have a nice day

 

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
jewellerystore1
Explorer
97 0 8

Hi there. Thank you!

 

I have added the code but the logo isn't centered. Also is there a way to completely remove the gap between the images?

 

Thanks!

BSSCommerce-B2B
Shopify Partner
565 114 137

I have checked the website, but I don't understand what the remaining issue is. Could you please clarify further? I'll assist you in a few minutes

BSSCommerceB2B_0-1719033221968.png

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
jewellerystore1
Explorer
97 0 8

I was able to remove the gaps within the images. But I need the logo in the middle of the page. See image attached:

Screen Shot 2024-06-23 at 4.10.54 pm.png

BSSCommerce-B2B
Shopify Partner
565 114 137

This is an accepted solution.

Hi @jewellerystore1 

In the above instructions

BSSCommerceB2B_0-1719145894748.png

Please modify the CSS as follows

[id$='header-main-grid']>div:nth-of-type(1) {
    order: 2;
    display: flex !important;
    justify-content: center !important;
}
[id$='header-main-grid']>div:nth-of-type(2) {
    order: 1;
    grid-area: 1 / 1 / span 1 / span 4 !important;
}

Result

BSSCommerceB2B_1-1719146018875.png

If it's helpful, please like and mark it as a solution, thank you

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
jewellerystore1
Explorer
97 0 8

Thank you it worked!

maverickwhites
Tourist
3 0 1

To achieve this:
1. Adjust your Exhibit theme settings to center-align the logo on the homepage and left-align the header menu.
2. Use CSS to modify the collage block to eliminate gaps between images for a seamless layout.

pwcsangeeta
Shopify Partner
47 5 9

Hello @jewellerystore1 

 

Step 1: Go to Admin -> Online store -> Theme > Edit code

Step 2. Go to assest and open  base.bundle.css and remove 

.gap-media-grid {
   gap: var(--media-grid-gap); 
}

this code.