Reduce button size and move it to the right in mobile view

Store Design
,
1

Hello,

I want to reduce the button size only in the mobile view and also move it to the right side of the image so that it’s placed on the blank space.

Store link: https://0bc922.myshopify.com/

randomchikibum_0-1687308729088.png
randomchikibum_0-1687308729088.png562×207 72.2 KB

2

I see you were able to move the button. To make it smaller, try this code where it says Add Custom CSS for that section:

@media screen and (max-width 500px){
.button{
    transform: scale(0.7);
}
}

Does this work?

3

Hello @randomchikibum ,

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code

Go to Assets folder → base.css file or theme.scss.liquid file

Add this following code at the bottom of page

@media (max-width: 767px) {
  .hero-banner-container {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
  }

  .hero-button {
    margin-left: 10px;
  }
}

Save changes

Hope this can help. Let us know if you need any further support.

Ali Reviews team.

4

Hey @randomchikibum

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 screen and (max-width: 749px){
    .banner:not(.slideshow) .banner__content .banner__box{
    	padding-right: 15px;
	}

	.banner:not(.slideshow) .banner__content .banner__box .button{min-height: 35px; padding: 0 15px;}
}

Let me know if you need help.

5

Hi @randomchikibum

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the base.css file:

@media screen and (max-width: 749px) {

.banner:not(.banner–mobile-bottom) .button–secondary {font-size: 14px !important; padding: 8px 15px; min-height: 41px; line-height: 14px;}

}

Regards,

San

6

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
@media (max-width: 768px){
.banner__box.content-container.content-container--full-width-mobile.color-accent-1.gradient {
text-align: center;
}
a.button.button--secondary {
font-size: 12px;
}
}

ZestardTech_0-1687323627924.png
ZestardTech_0-1687323627924.png778×841 194 KB

7

@randomchikibum

Please add the following CSS to your assets/base.css bottom of the file.

@media screen and (max-width: 749px){
.banner__buttons .button {font-size: 1rem;padding: 0 1rem;}
.banner__box .banner__buttons {margin-left: 20rem;}
}

Thanks!

8

Doesn’t work