Question 30340 in Wordpress Question posted in
The official Wordpress documentation can be found here.

How can I make the Apple store and Google play store badges align vertically? – WordPress

So I have the external links all set up, and the badges on the website, but the main problem I am currently experience is making these align vertically (the Google play badge is slightly moved to the right underneath the apple store)
Downloadable badges alignment issue

Below is currently the code that I have set up for these two badges — what exactly do I have to change to make the Google play badge align vertically with the Apple store badge? I feel like I have tried mostly everything, but am still very confused.

<a href="https://apps.apple.com/app/id1551353775" style="display: inline-block; overflow: hidden; border-radius: 40px; width: 150px; height: 90px;"><img src="https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/en-us?size=250x83&amp;releaseDate=1276560000&h=7e7b68fad19738b5649a1bfb78ff46e9" alt="Download on the App Store" style="border-radius: 15px; width: 150px; height: 90px;"></a>
<a href='https://play.google.com/store/apps/details?id=com.stagescycling.stages'><img style="width:164px;margin-top:-30px;" alt='Get it on Google Play' src='https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png'/></a>

Edit: Not really sure why the code snippet is not showing them aligned with the Apple store on top and the Google play store on the bottom — reference the screenshot for the correct orientation.

Tags:

2

Answers


  1. 0

    EDITED: ADDED A VERTICAL STACKING OPTION

    TL;DR. Remove inline styles. Apply alignment styling to their parents.

    See below for code snippet. Inline styles could make it very difficult to build a consistent definitions throughout and also likely difficult to debug.

    Here, I’ve added a simple vertical alignment by adding flex and align-items to its parent. The images differ in their sizes and transparent margins around, which is simply addressed by their width in CSS.

    .app-icons {
  display: flex;
  align-items: center;
}
.vertical {
  width: 300px;
  flex-direction: column;
}

.android {
  width: 150px;
}
.apple {
  width: 164px;
}
    <h2>Vertical Stacked</h2>
<div class="app-icons vertical">
  <a href="https://apps.apple.com/app/id1551353775">
    <img 
      class="apple"
   src="https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/en-us?size=250x83&amp;releaseDate=1276560000&h=7e7b68fad19738b5649a1bfb78ff46e9" 
      alt="Download on the App Store">
  </a>
  <a href='https://play.google.com/store/apps/details?id=com.stagescycling.stages'>
    <img 
      class="android" 
      alt='Get it on Google Play' 
      src='https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png' />
  </a>
</div>

<h2>Horizontally Presented</h2>
<div class="app-icons">
  <a href="https://apps.apple.com/app/id1551353775">
    <img 
      class="apple"
      src="https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/en-us?size=250x83&amp;releaseDate=1276560000&h=7e7b68fad19738b5649a1bfb78ff46e9" 
      alt="Download on the App Store">
  </a>
  <a href='https://play.google.com/store/apps/details?id=com.stagescycling.stages'>
    <img 
      class="android" 
      alt='Get it on Google Play' 
      src='https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png' />
  </a>
</div>
    Login or Signup to reply.
  2. 0

    The problem is not about alignment, it happens that your Google Store image is a PNG with a transparent border around it. The border don’t shows (because it is transparent), but use the space. You have to cut the border out using a image editing program like photoshop or Photopea Online Image Editor, but if absolutelly necessary to use the image as is on your code, copy and paste the snippet bellow to achive your result.

    <style>
    .storeLink {
        position: relative;
        display: inline-block;
        width: 240px;
        height: 80px;
        border-radius: 16px;
        overflow: hidden;
        background-color: black;
    }
    .storeLink > img {
        --width: 100%;
        position: absolute;
        width: var(--width);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    </style>

        <a href="https://apps.apple.com/app/id1551353775" class="storeLink"><img src="https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/en-us?size=250x83&amp;releaseDate=1276560000&h=7e7b68fad19738b5649a1bfb78ff46e9" alt="Download on the App Store" ></a>
        <a href='https://play.google.com/store/apps/details?id=com.stagescycling.stages' class="storeLink"><img alt='Get it on Google Play' src='https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png' style="--width: 128%";/></a>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search