Make the shop all button smaller for phone

[gladamagar]

How do I make the button smaller only on the iphone page? I have tried codes I have seen in the community but it is not working for me.

[Made4uo-Ribe]

Hi @gladamagar 

Would you mind to share your Store URL website? with password if its protected. Thanks!

[Savior-Info]

Hello @gladamagar 

To make a button smaller only on the iPhone page, you can use CSS media queries to target specific screen sizes, such as those commonly associated with iPhones. Here's a general outline of how to achieve this:

1. Identify the Button: First, identify the button you want to make smaller. Note its class or ID, which you can find in your HTML or CSS code.

2. Create a Media Query: Use CSS media queries to specify the screen size at which you want the button size to change. For iPhones, you might target screen widths commonly associated with them, like those below 768px for portrait orientation.

   css

@media (max-width: 767px) {
    /* CSS for smaller button size on iPhones */
    .your-button-class {
        font-size: 14px; /* Adjust the font size to make the button smaller */
        padding: 5px 10px; /* Adjust padding to control button size */
    }
}

• Replace .your-button-class with the actual class or ID of your button.
• Adjust the font-size, padding, or other relevant CSS properties to make the button smaller as needed.

1. Apply the CSS: Insert this CSS code into your theme's custom CSS editor. Be sure to save your changes.

2. Test Responsiveness: Preview your website on different iPhone models and orientations to ensure that the button size changes as expected.

Remember to clear your browser cache or use private browsing mode to ensure you see the updated styles when testing on your iPhone. If the button size still doesn't change, double-check the class or ID used in the CSS selector and ensure there are no conflicting styles from other CSS rules.

Thanks

[Laur4]

bonjour je n'y arrive pas c'est possible de vous contacter en privé ?

[PageFly-Noah]

Hi @gladamagar 

This is Noah from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
.banner__buttons a {
    min-height: 30px;
}
</style>

Hope this can help you solve the issue 

Best regards,

Noah | PageFly

[Laur4]

Bonjour, cela réduit la taille sur la hauteur mais pas la largeur du bouton. Serait-il possible de vous contacter en privé pour savoir comment réduire que sur mobile la taille ?