Before and After slide bigger

Store Design
1

Hello, can anyone help me with increase the size of my Before and After slide section?

I want the images align to the left and the text content aligns with the right.

Theme: Sense

URL: https://yinheart.com/en-gb

Thank you very much!

lottiediao_0-1733746288967.png
lottiediao_0-1733746288967.png1680×923 158 KB

2

Hi @lottiediao
You can easily achieve this using custom CSS:

.before_badge .after_badge {
font-size: 33px;
}

Feel free to adjust the font size to fit your design perfectly.

If you’re not familiar with custom coding, you can install Custom Code Inserter to insert the code effortlessly.

Alternatively, feel free to contact me via my signature, and I’d be happy to help with the setup.

3

Hi @lottiediao

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
.ba_main{ 
       max-width: var(--page-width);
        padding: 0 5rem !important;
}

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

4

hello there, thanks for your response but i don’t think you understand what I was asking :sweat_smile:

5

sorry. let’s try this code instead

.ba_main {
   max-width: none!important;
}

This will disable the max-width for the before-and-after section, allowing it to expand and fit the full width of your screen.

Here how the result will look:

Screen Shot 2024-12-09 at 19.53.59.png
Screen Shot 2024-12-09 at 19.53.59.png3004×1486 251 KB

6

Hi @lottiediao ,

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
.ba_main{
   max-width:none !important;

}

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

7

Hi @lottiediao ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.ba_main.ba_slider_template--18832442982646__before_after_slider_JPDeTP {
    padding: 0;
}
@media screen and (min-width: 990px) {
.ba_main.ba_slider_template--18832442982646__before_after_slider_JPDeTP {
    max-width: var(--page-width) !important;
    padding: 0 5rem;
}
}

Screenshot.png
Screenshot.png1814×755 112 KB

1 Like
8

Hi @lottiediao

I hope you are well. You can follow our instructions below:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
Step 3: Copy the code below and paste it there

Here is the code for Step 3:

@media screen and (min-width: 769px){
div.shopify-section > main.ba_main {
    max-width: 160rem !important;
}
div.shopify-section > main.ba_main .container.before_after-content * {
    text-align: right !important;
}
}

image (1).png
image (1).png1915×841 196 KB

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.