button scaling strange on mobile display

Hi @freelylw,

Thanks for reaching out to us!

I do see in your screenshot that the “Submit” button is very narrow.

Would you mind sharing the URL of the page on your site that has this problem, so we can take a further look?

Thanks for the link @freelylw.

It looks like you have added some custom CSS to your site using the Simple Custom CSS and JS plugin.

I see you have added this code to increase the left padding for the columns:

.hentry .entry-content .wp-block-columns .wp-block-column:not(:last-child), .columnborder { padding-left: 100px; }

Link to image: https://d.pr/i/KFllUc

We would need to change that column padding for mobile devices, as it prevents the button from displaying correctly. The button width was also set to 50% in the WP-Admin, which works great on desktop but not so much on mobile it seems.

Please add the following code to the Appearance > Customize > Additional CSS section of your WP-Admin dashboard or via the Simple Custom CSS and JS plugin you seem to be using:

/* Fix button width and spacing on mobile | wpniall-wporgforums */
@media only screen and (max-width: 767px) {
  .hentry .entry-content .wp-block-columns .wp-block-column:not(:last-child), .columnborder {
      padding-left: 55px!important;
      padding-right: 45px!important;   
  }
   .wp-block-buttons>.wp-block-button.wp-block-button__width-50 {
       width: calc(100% - .5em);
   }
}

It should look something like this on an iPhone, for example:

Link to image: https://d.pr/i/QpDjDJ

Please let us know if you need any further help!

Hi @freelylw,

I had a look at your site using my browser’s developer tools and cannot seem to find the code I shared above.

Do you have any kind of caching active on your site? If so, I recommend clearing the cache to see if that helps.

If that does not get the code to work, could you please try adding the CSS code I shared above to the Appearance > Customize > Additional CSS section of your WP-Admin dashboard ?

After you have added the code there, please select the mobile preview option from the bottom section of the customizer to see if the button style changes:

Link to image: https://d.pr/i/y3tDbm