Make Text Container Square

Melissa711
Visitor
2 0 0

Hi, Im hoping to get some help to reduce the width of the heading container on the front page of my website so it is square (the brown box over the top of the images). 

 

Also if anyone knows if I can move the buttons in my header to the right that would be great. Thank you! 

 

I am very amateur so please over explain the solution. 

 

the website is healinghomeandbody.com

Replies 3 (3)

ZenoPageBuilder
Shopify Partner
1043 202 217

Hello @Melissa711 👋

Inside Shopify Admin, you can go to Edit theme code, open file base.css and add this code at the bottom

@media (min-width: 750px) {
    #Banner-template--15731328450653__image_banner .banner__box {
        max-width: 200px;
    }
}

The result

Screenshot 2023-11-23 at 09.34.25.png

Hope that helps!

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com
Melissa711
Visitor
2 0 0
Amazing thank you so much, that worked! Is there a way to make the square bigger?
ZenoPageBuilder
Shopify Partner
1043 202 217

You can adjust the max-width value in the above code, for example to 250px

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com