Adjust Button Size for Mobile

[liu_x_trujillo1]

Hi,

I need some help to adjust the size of buttons on mobile. My site is www.embroidtale.com

• Lower the position of the buttons & reduce the size so they don’t block any part of the pics

• Reduce the size of the buttons so they don’t block any part of the pics

I’d also like to ensure that this adjustment doesn’t affect the appearance on the desktop version. Thanks!

[Moeed]

Hey @liu_x_trujillo1

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. Add the following code in the bottom of the file above tag

RESULT:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Made4uo-Ribe]

Hi @liu_x_trujillo1

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 only screen and (max-width: 650px){
.collection-card__content button.button {
    padding: 10px 5px !important;
}
}

And Save.

Result:

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

[KetanKumar]

@liu_x_trujillo1 can you try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.

@media(max-width: 480px) {
#shopify-section-template--22969909936446__collection-list .button {
    font-size: 10px !important;
    padding: 8px !important;
}
}

[liu_x_trujillo1]

Thank you. I followed those steps but it didn’t work How did you see that result on your end? Are you able to make adjustments to the backend of my site for me?

[liu_x_trujillo1]

Thanks. The buttons still block some part of the images in the result. I’d prefer them to be lower with less padding. Can you please make some changes to the code?

[Made4uo-Ribe]

I check your store again, it works.

This is with code.

Same dimension, you have like this before.

But in your more lower screen it comes again with the 2lines. You can add this one same on your theme.css

@media only screen and (max-width: 475px){
.collection-card__content button.button {
    padding:5px !important;
    letter-spacing: 1px;
    line-height: 1;
    margin-bottom: 10px;
}
.content-over-media.content-over-media--auto {
    --content-over-media-gap: .2rem;
}
#shopify-section-template--22969909936446__collection_list_HWb8rU .button.button {
    position: relative;
    top: 0px !important;
}
}

And Save.

result:

That is the lowest screen size for the button.

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

[liu_x_trujillo1]

It worked! You are amazing. Thank you!

[Made4uo-Ribe]

Welcome, please dont forget to hit likes also. Thanks!

[liu_x_trujillo1]

Hi, I made some adjustment to the Rich Text section to reduce the padding and it probably messed up your codes, I guess.

Here is the codes I used to reduce the padding:

.color-scheme.color-scheme–scheme-2.color-scheme–bg-54922f2e920ba8346f6dc0fba343d673.section-spacing {
padding-top: 3.5rem;
padding-bottom: 3rem;
}

Now this is the current mobile version. Can you please me to move the buttons up a bit in the following sections? And is it possible to reduce the font size of the collection buttons? Thank you.

[liu_x_trujillo1]

@Made4uo-Ribe Hello, can you please help me with this follow-up question?

[Made4uo-Ribe]

Ive already give the code to fix the button, but there is another code that overides it.

Check this one if it work.

if not you need to find that code and change it manually.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “theme. Liquid” file. Find the tag and paste the code below before the tag.

And Save.

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

[liu_x_trujillo1]

Thank you so much @Made4uo-Ribe

The code works perfect for the collection buttons. However, there was no change to the Hero Banner button:(

Do we need to make any tweaks to the code to move the hero banner button up a bit?

Thanks again.

[Made4uo-Ribe]

Do you mean this button?

reduce the font size? I already did? Do you want it more smaller?

[liu_x_trujillo1]

Yes, that’s button I was referring to, I’d like to move it up a bit as it is too close to the edge in the mobile version.

There is no need to change the font size.

Thank you.

[Made4uo-Ribe]

oh, I change it. Please, replace the code with this.

And Save.

result:

Could you please like my post if it was helpful to you? It would mean a lot to me. Thanks!