Debut Theme: Article Page, Unable to keep fixed width for "Previous/Next" buttons

Solved
Highlighted
Excursionist
40 0 3

I was able to add buttons "Previous/Next Blog" buttons on the debut article/blog page

screen-shot.JPGBelow was the code that I used in article-template-liquid:

 

<div class="rte">
  {{ article.content }}
</div>

{% if section.settings.show_share_buttons %}
  {% include 'social-sharing', share_title: article.title, share_permalink: article.url, share_image: article.image %}
{% endif %}
<div>
{% if blog.previous_article %}
<a href="{{ blog.previous_article }}" class="btn" style="float: left">Previous Post</a>
{% endif %}

{% if blog.next_article %}
<a href="{{ blog.next_article }}" class="btn" style="float: right">Next Post</a>
{% endif %}
</div>

 

How can I keep a fixed width for both buttons?

I want to keep the Fix Width of the Next Button the same as the Previous Button as shared in the screenshot.

Can anyone help me complete this code?

0 Likes
Highlighted
Excursionist
10 4 4

Hello,

 

You can try this. It's kinda hacky, but it should work (remember to put the ids on the links!):

 

 

<div class="rte">
  {{ article.content }}
</div>

{% if section.settings.show_share_buttons %}
  {% include 'social-sharing', share_title: article.title, share_permalink: article.url, share_image: article.image %}
{% endif %}
<div>
{% if blog.previous_article %}
<a href="{{ blog.previous_article }}" id="prev-article" class="btn" style="float: left">Previous Post</a>
{% endif %}

{% if blog.next_article %}
<a href="{{ blog.next_article }}" id="next-article" class="btn" style="float: right">Next Post</a>
{% endif %}
</div>

<script>
  var element = document.getElementById('prev-article');
  var cs = getComputedStyle(element);
  var paddingX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);
  var borderX = parseFloat(cs.borderLeftWidth) + parseFloat(cs.borderRightWidth);
  document.getElementById('next-article').style.width = element.offsetWidth - paddingX - borderX;
</script>

 

 

 

If you don't want to mess with JS, you cant set a min-width property near the "float" ones with a static value, like:

 

 

<div class="rte">
  {{ article.content }}
</div>

{% if section.settings.show_share_buttons %}
  {% include 'social-sharing', share_title: article.title, share_permalink: article.url, share_image: article.image %}
{% endif %}
<div>
{% if blog.previous_article %}
<a href="{{ blog.previous_article }}" class="btn" style="float: left; min-width: 100px">Previous Post</a>
{% endif %}

{% if blog.next_article %}
<a href="{{ blog.next_article }}" class="btn" style="float: right; min-width: 100px">Next Post</a>
{% endif %}
</div>

 

 

But if you change texts, remember to adjust it manually. 

 

Cheers!

1 Like
Highlighted
Excursionist
40 0 3

Hey EnriqueM,

 

Added 200px and the 2nd code worked as you mentioned.

sc.JPG

 

Now the only problem I got on this front is the Mobile Layout either it should be side by side or up & down but center aligned.

 

How can I do the same?

0 Likes
Highlighted
Excursionist
10 4 4

This is an accepted solution.

Hello again,

This will align the buttons verticaly on screen resolutions lower than 541px:

 

<style>
  @media screen and (max-width: 540px) {
    #blog-navigation a {
      float: none;
      display: block;
      width: 200px;
      margin: 0 auto 1rem;
    }
  }
  @media screen and (min-width: 541px) {
    #blog-navigation a#prev-article {
      float: left;
    }
    #blog-navigation a#next-article {
      float: right;
    }
    #blog-navigation a {
      min-width: 200px;
    }
  }
</style>

<div class="rte">
  {{ article.content }}
</div>

{% if section.settings.show_share_buttons %}
  {% include 'social-sharing', share_title: article.title, share_permalink: article.url, share_image: article.image %}
{% endif %}

<div id="blog-navigation">
{% if blog.previous_article %}
<a href="{{ blog.previous_article }}" id="prev-article" class="btn">Previous Post</a>
{% endif %}

{% if blog.next_article %}
<a href="{{ blog.next_article }}" id="next-article" class="btn">Next Post</a>
{% endif %}
</div>

 

If you want to keep them horizontal, you should shorten the button texts. Something like "Previous" and "Next".

 

Cheers!

1 Like
Highlighted
Excursionist
40 0 3

This solution worked, thank you @EnriqueMelero 

0 Likes