"Shop Now" Button to be always at the bottom center on mobile

New Member
4 0 0

Hello everyone. I have been reading this forum for a long time and I decided to write myself for the first time. 

I have a shopify website, still password protected which I am planning to launch next week. URL: matrika.io Password: matrika

However, I am trying to have my "Shop Now" button always at the bottom of the screen on any mobile viewport, on home-page. At the moment I have set a margin-top relative to the parent <div>, which contains as well title and sub-title. What happens is that on iPhone X I can see the buttom, but on lots of other mobile viewports I cannot. 

Is there a way to say something like "always stay 10px from the end of the bottom of the viewport? Currently the below is the CSS I added to make this happen (on custom.css). 

  }
  .hero__text-wrap .hero__text-content .hero__cta {
    font-size: 13px;
    margin-top: 25rem;
    margin-left: 0rem;
  }

I also added some padding to the <div> which contains both the Title, sub-title and the "Shop Now Button" like below (on theme.scss):

.hero__text-content {
  position: relative;
  opacity: 0;
  display: table-cell;
  vertical-align: middle;
  padding: 135px 30px 300px 10px;
  @include transition('color 0.2s ease');
  margin-bottom: 5rem;

 

I know, this is really not a good solution, and that's why I am seeking somebody's help!

 

Thank you thank you in advance!

 

 

0 Likes
Shopify Partner
1838 173 601

Hi Mattia,

Ideally you'd wrap the anchor element i.e. the "shop now" button within a div like so

<div class="hero__cta-wrapper">
  <a href="" class="btn hero__cta">
    Shop now <span class="icon icon-arrow-right" aria-hidden="true"></span>
  </a>
</div>

and then apply following CSS

.hero__cta-wrapper {
  position: absolute;
  width: 100%;
  bottom: 40px;
  left: 0;
  text-align: center;
}

Hope this helps!

I turn coffee in to code - since 1998
0 Likes
New Member
4 0 0

Ehi @Karl,

it worked very well. I could not be more greatful to you.

As you could probably tell, I am pretty new to development, and it is so so nice to recieve help from experts. 

Thank you very very much. 

0 Likes
New Member
4 0 0

Hi @Mattia_Perroni and @KarlOffenberger ,

 

My "Show now" button moves as I scroll down, I read this post but still don't understand how to fix the button to one position when viewing the page on a website or on mobile. Can you please help me with this? 

 

Thank you in advance for your help. 

 

0 Likes