Make the shop all button smaller for phone

Store Design
,
1

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.

Screenshot 2023-09-12 at 16.06.48.png
Screenshot 2023-09-12 at 16.06.48.png776Ă—794 110 KB

2

Hi @gladamagar

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

3

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

4

Hi @gladamagar

This is Noah from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the 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

Hope this can help you solve the issue

Best regards,

Noah | PageFly

5

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

6

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 ?