Jump to content

App store and Google Play badges sizing in web and mobile view

Recommended Posts

Posted (edited)

I'm having issues with displaying the App Store and Google Play badges.

I understand there is a padding issue on the Google Play badge. I can't get a solution from the squarespace help or open source. 

 

Issues
When vertically stacked the google play badge is smaller

Objective: I want to make both badges the same size

 

When displayed in mobile view the badges are magnified

Objective: I want the badges to display at a smaller size than current. It looks way oversized.

 

It seems a well trod path but can't a solution. An assistance welcomed.

Screen Shot 2024-04-18 at 15.36.44.png

Screen Shot 2024-04-18 at 15.36.33.png

Edited by TheLimited88
  • Replies 5
  • Views 2.5k
  • Created
  • Last Reply

Top Posters In This Topic

Posted

Can you share your website URL?

Have you got the two images cropped to the same size?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Posted

Hi. Its www.aegis-247.com/ylore

I've cropped to the same them using Canva.

I've been looking around trying to find pre-cropped badges I can drag/drop. No joy.

Appreciate the assistance .🙌

Posted
5 minutes ago, TheLimited88 said:

I've cropped to the same them using Canva.

They're cropped to a completely different aspect ratio, that's why they appear different. They are inherently different size/aspect which I'm sure isn't helping you!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

  • 2 weeks later...
Posted (edited)

That answer doesn't help me. Your telling me something I know. What would have been helpful was a solution or code to apply. So back to open source.

Edited by TheLimited88
  • 1 month later...
Posted
On 4/19/2024 at 12:35 AM, TheLimited88 said:

I'm having issues with displaying the App Store and Google Play badges.

I understand there is a padding issue on the Google Play badge. I can't get a solution from the squarespace help or open source. 

 

Issues
When vertically stacked the google play badge is smaller

Objective: I want to make both badges the same size

 

When displayed in mobile view the badges are magnified

Objective: I want the badges to display at a smaller size than current. It looks way oversized.

 

It seems a well trod path but can't a solution. An assistance welcomed.

Loklok Mod Apk

loklok apk - Google Play Store

Hi,

I’ve run into similar issues with displaying badges on my site. One way to make both the App Store and Google Play badges the same size is to set a fixed width and height for both badges using CSS. For example:

 
css
Copy code
.badge { width: 150px; /* Adjust the width as needed */ height: auto; } @media (max-width: 600px) { .badge { width: 100px; /* Adjust the width for mobile view */ } }

You can apply this class to both badges to ensure they are consistently sized.

For the mobile view, using media queries like in the example above should help you adjust the sizes appropriately.
 

Hope this helps!

Best, Mr Mitchell

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.