Final Queries - Styling Queries

[kashco]

Hi everyone !

I wanted some help in some of these styling issues: 

1. Home Page - Make the banner buttons center to the image both desktop and mobile view. 
2. Remove extra space above the copyright to be placed just below the line
3. About US Page - Want to make background white and text black 
4. Centralize collection pages titles 
5. Remove extra space above copyright / below horizontal line visible. 
6. Likewise remove the space above the horizontal line. 
7. Center brand information and social media icons - mobile view. 

Appreciate any help in the above matter. 

[Moeed]

Hey @kashco 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.banner--stacked {
    place-content: center !important;
}
.footer__content-bottom {
    padding-top: 0 !important;
}
.main-page-title {
    color: black !important;
    text-align: -webkit-center !important;
}
.collection-hero__inner.page-width.scroll-trigger.animate--fade-in {
    justify-content: center !important;
}
</style>

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[kashco]

I did fix the banner on desktop but mobile is not yet right.

Desktop

@media only screen and (min-width: 749px){
.banner__buttons.banner__buttons--multiple {
justify-content: center;
gap: 90%;
flex-wrap: nowrap;
}
}

How to fix in mobile ?

Also, how can I place "New Arrivals" text a bit higher on desktop ?

[rajweb]

Hey @kashco ,

For mobile, you can adjust your CSS using a media query for smaller screens. Try this:

@media only screen and (max-width: 748px) {
   .banner__buttons.banner__buttons--multiple {
       justify-content: center !important;
       gap: 10px !important; /* Adjust as needed */
       flex-wrap: wrap !important; /* Allows buttons to stay responsive */
   }
}

Moving "New Arrivals" Text Higher on Desktop:

You can adjust the margin or positioning of the "New Arrivals" text. Try: 

@media only screen and (min-width: 749px) {
   .new-arrivals-title {
       margin-top: -20px !important; /* Adjust the value to move it higher */
       position: relative !important;
   }
}

If it's inside a flexbox or grid, you may need to modify the alignment settings as well.

Let me know if this helps or if you need further tweaks!

If I was able to help you, please don't forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat

[kashco]

No luck yet with banner image buttons nor the banner image. Can you help me via DM  ?

[rajweb]

@kashco 

Yes Sure!

[kashco]

Solved banner

[DaisyVo]

Hi @kashco 

Thank you for reaching out to the Shopify community. I'd be glad to assist you. Could you kindly share your store URL and password (if it’s password-protected) so I can review it and provide you with an update?

[kashco]

https://kashco-interiors.myshopify.com/

password:kashco

[DaisyVo · Accepted solution]

Hi @kashco 

Because the image and button are in two different blocks, it is difficult to edit the center. It can only be edited relatively.
You can add this code to the Custom CSS section https://prnt.sc/CYKt5fZbfB5l

.banner__buttons.banner__buttons--multiple > a:nth-child(1) {
    margin-right: 18rem !important;
}
@media screen and (max-width: 768px){
body .banner__buttons.banner__buttons--multiple > a:nth-child(1) {
    margin-right: 0 !important;
    margin-bottom: 28rem !important;
}
.banner__buttons.banner__buttons--multiple {
    margin-top: 7rem;
}
}

[kashco]

Didn't still work.

[kashco]

• Issue 3 about us centered - Solved thanks
• Issue 4 - Centralize collection pages titles (also solved)
• Issue 7 - Center brand information and social media icons - mobile (Solved)