Solved

How can I modify CSS code to adjust banner block size?

pureluxepilates
Tourist
7 0 1

I do not know how to change custom css code. I am trying to alter the block size for the promotions banner to be smaller like a highlights banner. The sandbox theme i have does not have a highlights banner and i would like to make the promotion banner similar to a highlights banner. I have tried the code :

p {
block-size {
width: 200px;
height: 200px;
}
}

but it wont let me save changes. can someone help me with this.

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
1791 505 371

This is an accepted solution.

Hey @pureluxepilates,

I don't know where you got the .block-size selector because it doesn't exist anywhere on the website. 

 

Anyway, here's the solution

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
.section.featured-promotions .container {
    justify-content: center;    
}

.featured-promotions__item {
    width: 200px !important;
    height: auto !important;
}

.featured-promotions__item img {
    width: 55px !important;
    height: auto !important;
}

.featured-promotions__item .image-element__wrap {
    width: max-content !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}


@media only screen and (max-width: 798px) {
    .featured-promotions__item {
        width: 150px !important;
    }
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1708359897576.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website

View solution in original post

Replies 7 (7)

ThePrimeWeb
Shopify Partner
1791 505 371

Hey @pureluxepilates,

 

It should be,

.block-size {
  width: 200px;
  height: 200px;
}

 

If it doesn't work, please share the link to your store. Thanks!

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
pureluxepilates
Tourist
7 0 1

Hi, it still doesn't work and is now not recognizing .block-size as an input.

ThePrimeWeb
Shopify Partner
1791 505 371

Could you share the link to your store please?

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
pureluxepilates
Tourist
7 0 1

i will share an image of what i would like to make smaller. I just need the images and all text below to be smaller.Screenshot 2024-02-18 175739.png

ThePrimeWeb
Shopify Partner
1791 505 371

@pureluxepilates,

 

Please share a preview link at least. Without looking at the website, I don't know what classes are in the HTML. 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
pureluxepilates
Tourist
7 0 1
ThePrimeWeb
Shopify Partner
1791 505 371

This is an accepted solution.

Hey @pureluxepilates,

I don't know where you got the .block-size selector because it doesn't exist anywhere on the website. 

 

Anyway, here's the solution

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
.section.featured-promotions .container {
    justify-content: center;    
}

.featured-promotions__item {
    width: 200px !important;
    height: auto !important;
}

.featured-promotions__item img {
    width: 55px !important;
    height: auto !important;
}

.featured-promotions__item .image-element__wrap {
    width: max-content !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}


@media only screen and (max-width: 798px) {
    .featured-promotions__item {
        width: 150px !important;
    }
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1708359897576.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website