Adjust image banner button position for mobile

[Cherrysm2]

Hi,

I need help to adjust the position and size of the “www” button for the mobile view. This button looks very good for desktop view as below:

However, the button layout for mobile view is not able to be customized, the size is too big & it is placed at the center which is not my want. Pls see below screen on mobile. I have tried many suggestions from other posts but doesnt seem to work.

I just need the button size to be smaller on mobile, and position on the top right same as desktop.Really appreciate if anyone can help to solve my problem. Thank you!

my website:

[Adey2005]

Ohhh that’s good

[suyash1]

@Cherrysm2 Can you please share this page link?

[Cherrysm2]

thankyou for your prompt reply, here is my website:

[suyash1]

@Cherrysm2

please add this css to the very end of your base.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → base.css

media="(max-width: 1024px)" {
 .promobox__content .promobox__content_inner{right: 0 !important; top: 0 !important;}
 .promobox__content .promobox__content_inner .mt-25{margin-top: 0px !important;}
 .promobox__content .promobox__content_inner .promobox--type-1 .btn {min-width: 100px;}
}

[namphan]

Hi @Cherrysm2 ,

Please go to Customize > Theme settings > Custom CSS and add code:

@media (max-width: 1024px) {
.promobox__content_inner {
    top: 15px !important;
}
.promobox__content_inner .promobox__btn-1 {
    min-height: 26px !important;
    font-size: 12px !important;
}
}

[Cherrysm2]

Sorry I just checked once but there is no base.css file

[Cherrysm2]

Thankyou for your help but seems not working

After saved the code nothing change

[namphan]

Hi @Cherrysm2 ,

I checked and couldn’t find the code, can you try adding the code at Customize?

[Cherrysm2]

hi, glad to see the Improvement but it is still very difficult to press on. Would you pls help to adjust as below position? Many thanks

[suyash1]

@Cherrysm2 - please try by putting into custom css

[namphan]

Hi @Cherrysm2 ,

Please change all code:

@media (max-width: 1024px) {
.promobox__content_inner {
    top: 0px !important;
    right: 0px !important;
}
.promobox__content_inner .p-15 {
    padding-right: 5px !important;
}
.promobox__content_inner .mt-25{
    margin-top: 0 !important;
}
.promobox__content_inner .promobox__btn-1 {
    min-height: 26px !important;
    font-size: 12px !important;
    min-width: 90px !important;
}
}

[Cherrysm2]

It works very well, i really appreciate for your help. Thankyou so much

[namphan]

Hi @Cherrysm2 ,

You’re welcome and happy to help