Product Landing Page Fix

[TuneToyz]

My site is TuneToyz.com and this is what the ladning page currently looks like. I want it to look more like the below image with the product being in the center of the page and being relatively larger compared to mine. I also want to make it so that Home Catalog and FAQ part shows above it(Currently you have to scroll down to make it show). Thank you!

[suyash1]

@TuneToyz are you going to have this single product on this page?

[TuneToyz]

yes I am

[suyash1]

@TuneToyz please add this css to the very end of your base.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → base.css

.product-grid{justify-content: center;}

[TuneToyz]

hey I added it but tit didnt seem to change

[suyash1]

@TuneToyz where exactly did you add it? I am not seeing this code on browser view

[TuneToyz]

I added here

[suyash1]

@TuneToyz add closing bracket } to the line 3705 and check

[Dan-From-Ryviu]

Add this code to Custom CSS in Online Store > Themes > Customize > Theme settings.

.section-header .header-wrapper { 
    position: relative !important; 
}
.header__menu-item { 
    color: #121212 !important; 
}
#shopify-section-template--18148672340180__featured_collection_XTEyrK .grid {
    justify-content: center !important;
}

[TuneToyz]

hey,

Whenever I try to add the code I get this error

[TuneToyz]

Hey,

I want it to look like this. Would you know how to do it?

[Dan-From-Ryviu]

You have too much code in custom CSS of your theme, please add this code to theme.liquid file, in Online store > Themes > Edit code after

[TuneToyz]

Thank you so much!

[Dan-From-Ryviu]

Happy I could help!

[TuneToyz]

Hey theres one small problem the product appears to be too big on mobile and the menu bar on mobile is white instead of black would it be possible to fix this. I want it to look like the first image. Thanks again!

[TuneToyz]

Also would there be a way to make the price be centered?

[Dan-From-Ryviu]

Code update

[TuneToyz]

Thanks again!

[Dan-From-Ryviu]

Very welcome!