Margin for Text and Buttom in Image Banner.

Margin for Text and Buttom in Image Banner.

noah12x2
Excursionist
30 0 6

noah12x2_0-1727101819008.png

Hey, can someone please help me so the text fits. How i am able to do the margin for it?

Same for the Button. Can i do it thinner? 

 

 

Take a look at the code as i already had to add something so the placement of the Content Container is fine
https://smaw9huuqyltnqz4-85421687108.shopifypreview.com
burtah

Replies 5 (5)

PageFly-Amelia
Shopify Partner
579 163 233

Hi @noah12x2 

This is Amelia from PageFly - Landing Page Builder App

 

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code. 

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save

 

@media (max-width: 767px){

.banner__buttons a.button.button--secondary {

    min-height: 30px;

    min-width: 100px;

}

}

 

Hope that my solution works for you.

Best regards,

Amelia | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 
➜ Weekly updated Shopify tutorials on YouTube 


All features are available from Free plan. Live Chat Support is available 24/7.

noah12x2
Excursionist
30 0 6

Button is good with it but the Text is still fucked as the Text box is to big

Made4uo-Ribe
Shopify Partner
8420 2016 2471

Hi @noah12x2 

Check this one. 

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

 

@media screen and (max-width: 767px) {
    div#Banner-template--23409410015556__image_banner_mmm69t .banner__box.content-container {
        position: absolute !important;
        right: 5%;
        top: 50%;
        transform: translateY(-50%);
        margin-left: 0px !important;
        margin-top: 0 !important;
         width: 50%;
    }
   div#Banner-template--23409410015556__image_banner_mmm69t  .banner__content.banner__content--top-right {
    height: 40vh;
}
}

 

And save. 

Result:

Made4uoRibe_0-1727103663062.png

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
noah12x2
Excursionist
30 0 6

Problem on this one is, picture fully fcked up as it stretches and Button is still to big. 

Would like to keep the picture as small as it is.

 

Text box can be a bit widther it just should fit on the pink background

noah12x2
Excursionist
30 0 6

I were able to fix all. Just tried to change some numbers hahhaah.

Now i only have to reduce the space between the button and text and Headline and text.

Could you maybe help me