[CoopermedParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi,

Add a class to your button.

eg.

<a class="g-button" href="https://play.google.com/store/apps/details?id=com.medvisitpatient.patient&utm_source=global_co&utm_medium=prtnr&utm_content=Mar2515&utm_campaign=PartBadge&pcampaignid=MKT-AC-global-none-all-co-pr-py-PartBadges-Oct1515-1"><img width="100" alt="Get it on Google Play" src="https://play.google.com/intl/en_us/badges/images/apps/en-play-badge.png"></a>

Then add this in cornerstone > settings > custom css

.g-button {
   position: relative;
    top: -180px;
}

Hope that helps.

[CoopermedParticipant]

Hi, Thanks for your help but I added both and nothing changed. Could you check?

[NicoModerator]

Hi There,

Upon checking your custom CSS, the added css is not working because you lack a closing brace for your @media custom css before the g-button class css.

Hope it helps.

Let us know how it goes.

Thanks.

[CoopermedParticipant]

looks great now on the laptop but on the phone everything looks piled up on the top (the headlines plues the google button)
How may i make it adaptive?

Thanks!

[John EzraMember]

Hi there,

Thanks for updating the thread! It’s quite difficult to get things to look right when making things adaptive/responsive. You have issues not only on mobile but also for larger screens. There are ways to get things to work nicely if we have perfect control of everything, however since rev slider has its own positioning then it puts quite a limitation on what can be done. Even if we had full control it would still be quite a bit of work, hence it falling beyond our scope of support.

In X we have a few main break points which are:

480px and below – mobile screens portrait
481 – 767px – mobile landscape or tablet portrait
768px – 979px tablet landscape
940 and above – laptop to desktops

The above are generally what fits most devices today. However lately we also have really large resolutions going beyond HD (1920px by 1080px) all the way to beyond 4K.

To get things to look just right, you will need to have a lot more breakpoints using media queries. We can’t provide all of them for you as it will take a lot of time and would already be considered custom development.

However, here are a few to get you started. Replace your previous CSS with the following:

@media (max-width: 1920px){
  #x-section-1 h4.h-custom-headline.front.h4 {
      font-size:220%;
      text-align: right;
      top: -950px !important;
    }

    h4.h-custom-headline.front2.h4 {
      font-size:220%;
      position: relative;
      top: -1040px;
      text-align: right;
    }
 
    .g-button {
       position: relative;
       top: -660px;
    }
    .g-button a img {
       width: 15%;
    }
}

@media (max-width: 1500px){
  #x-section-1 h4.h-custom-headline.front.h4 {
      font-size:220%;
      text-align: right;
      top: -800px !important;
    }

    h4.h-custom-headline.front2.h4 {
      font-size:220%;
      position: relative;
      top: -890px;
      text-align: right;
    }
 
    .g-button {
       position: relative;
       top: -520px;
    }
    .g-button a img {
       width: 15%;
    }
}

@media (max-width: 1250px){
  #x-section-1 h4.h-custom-headline.front.h4 {
      font-size:180%;
      text-align: right;
      top: -650px !important;
    }

    h4.h-custom-headline.front2.h4 {
      font-size:180%;
      position: relative;
      top: -720px;
      text-align: right;
    }
 
    .g-button {
       position: relative;
       top: -410px;
    }
    .g-button a img {
       width: 15%;
    }
}

@media (max-width: 980px){
  #x-section-1 h4.h-custom-headline.front.h4 {
      font-size:150%;
      text-align: right;
      top: -500px !important;
    }

    h4.h-custom-headline.front2.h4 {
      font-size:150%;
      position: relative;
      top: -560px;
      text-align: right;
    }
 
    .g-button {
       position: relative;
       top: -300px;
    }
    .g-button a img {
       width: 15%;
    }
}

@media (max-width: 767px){
  #x-section-1 h4.h-custom-headline.front.h4 {
      font-size:120%;
      text-align: right;
      top: -270px !important;
    }

    h4.h-custom-headline.front2.h4 {
      font-size:130%;
      position: relative;
      top: -320px;
      text-align: right;
    }
 
    .g-button {
       position: relative;
       top: -100px;
    }
    .g-button a img {
       width: 25%;
    }
}

@media (max-width: 480px){
  #x-section-1 h4.h-custom-headline.front.h4 {
      font-size:120%;
      text-align: center;
      top: -200px !important;

    }

    h4.h-custom-headline.front2.h4 {
      font-size:130%;
      position: relative;
      top: -250px;
      text-align: center;
    }
 
    .g-button {
       position: relative;
       top: 20px;
       text-align:center
    }
    .g-button a img {
       width: 50%;
    }
}

Thanks for understanding and hope this helps – have a wonderful day! 🙂

[CoopermedParticipant]

Helped a lot!
Big thanks!

[Paul RModerator]

You’re welcome! 🙂

[Author]

Posts