Blog links Mobile

Develop, Build & Integrate CMS Development
1

Hi,

My blog link is functioning correctly on desktop but not on mobile. What am I doing wrong? Posting the code as well as the link. If you go to the blog post and click on Read More, it loops you to pages rather than posts on mobile.

<div class=“blog_innr blog_list”>
{% for rec_post in contents %}
<div class=“blog_box”>
<div class=“blog_img”>
{% if rec_post.featured_image %}<a href=“{{ rec_post.absolute_url }}”><div class=“blog_listing_cover”><img
src=“{{ resize_image_url(rec_post.featured_image, 313, 313) }}” alt=“{{ rec_post.featured_image_alt_text }}” /></div></a>{% endif %}
</div>
<div class=“blog_txt”>
<h4><a href=“{{ rec_post.absolute_url }}”>{{ rec_post.name }}</a></h4>
<p>
{% if loop.first %}{{ rec_post.post_list_content|truncatehtml(380, false, ‘…’) }}{% else %}{{ rec_post.post_list_content|truncatehtml(120, false, ‘…’) }}{% endif %}
</p>
<a href=“{{ rec_post.absolute_url }}” class=“more_btn”><span>Read More</span> <i
class=“fa fa-long-arrow-right”></i></a>
</div>
</div>
{% endfor %}
</div>

2

I’m not sure what you are expecting or what the problem is. In Chrome they look the same when viewing the mobile view vs the desktop. What problem are you having?

3

It looks the same, but it does not behave the same. When you click on the post or Read More it does not go to the blog post but to a listing page. The desktop works fine. Mobile does not.

4

On mobile you have an :after related to the pagination next link that is covering the whole screen and intercepting the clicks.

LeeBartelme_0-1662650250137.png
LeeBartelme_0-1662650250137.png353×245 14.8 KB

If you click on it in the developer tools elements list you can see it covers the screen.

LeeBartelme_1-1662650275920.jpg
LeeBartelme_1-1662650275920.jpg492×840 52.2 KB

5

Thank you. I see that now and found the corresponding line in the CSS. I am new to this. How do I fix it? I tried to take :after out, but that didn’t help the matter. Would you mind guiding me?

6

Well, is this like a custom template and CSS or is this something you installed or default or what? I think if you can not make that :after psuedo element position absolute it fixes it on my end but it has other side effects.