JA Smashboard Intro text not displaying on iPhone or 11" laptops

adamberrington

Hi,
This issue was previously dealt with, but I have updated the template from version 1.1.5 to 1.1.6 and the previous solution no longer works.

I'm using the Smashboard template (latest version, all plugins up to date etc). I have a problem with the intro text. It only displays on desktop computers ok, but not on macbook air 11". On iPads it only displays when viewed in portrait mode and not in landscape. On iPhones, it will not display at all. On the iPhone, clicking on the image does not open the article either. Sadly it appears there are plenty of bugs for this template on the iPhone.

I have changed the settings in the three places where "show intro text" can be set:

in Global Config for articles,
in the Menu settings,
in the individual article's settings.

Please can anyone advise how to make the smaller article images on the Smashboard template open the actual article in full? It works on desktop but not on mobile. The small + symbol at the bottom right works, as does the text, but clicking or tapping on the image doesn't.

Any help would be appreciated.

saguaros

Hi adamberrington

You can try with this custom css:

@media (max-width: 767px) {
.view-featured .article-intro, .blog-featured .article-intro, .blog .article-intro {
    display: block !important;
}
}

adamberrington

saguaros

Thank you, but unfortunately it did not work.

saguaros

adamberrington

Where did you add my suggested code? as I don't see it reflects on frontend now.

Could you share the admin + FTP account? the provided account doesn't work.

adamberrington

Hi,

The code was placed in the css/booststrap responsive file and also on the template /before head/.

Please try the login details again, they do work.

Thank you

saguaros

adamberrington Somehow, it doesn't work at my end:

Kindly check again.

adamberrington

Hi,

I have reset it, and it works now.

Sorry for any inconvenience

saguaros

adamberrington

I just updated this file: /local/css/template-responsive.css

Line 1962:

.view-featured .article-intro,
  .blog-featured .article-intro,
  .blog .article-intro {
    display: block;
  }

Line 1383:

@media (max-height: 820px) {
  .view-featured .article-intro,
  .blog-featured .article-intro,
  .blog .article-intro {
    font-size: 1.2em;
    height: 5em;
  }

Try to clear your browser's cache and check again.

adamberrington

Thank you!

If you visit the website www.thegreatcircle.uk the text starts closer to the title under the image when viewed on smart phones. Could this also be done here because the gap between the title and the intro text is a bit too big.

Also is there a way you can make the image open the article when pressed on a smart phone, like it does with website mentioned above?

Thank you very again for your time, it is appreciated.

saguaros

adamberrington

Could you share screenshot of that gap? as I can see it looks quite the same now.

For the link, you can backup this file:

/templates/ja_smashboard/html/com_content/category/blog_item.php

Look for this code:

<div class="pull-<?php echo htmlspecialchars($imgfloat); ?> item-image"> <img
<?php if ($images->image_intro_caption):
	echo 'class="caption"'.' title="' .htmlspecialchars($images->image_intro_caption) .'"';
endif; ?>
src="<?php echo htmlspecialchars($images->image_intro); ?>" alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>" itemprop="thumbnailUrl" />
</div>

change it to:

<div class="pull-<?php echo htmlspecialchars($imgfloat); ?> item-image"> 
<a class="article-link" href="<?php echo JRoute::_(ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid)); ?>">
<img
<?php if ($images->image_intro_caption):
	echo 'class="caption"'.' title="' .htmlspecialchars($images->image_intro_caption) .'"';
endif; ?>
src="<?php echo htmlspecialchars($images->image_intro); ?>" alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>" itemprop="thumbnailUrl" />
</a>
</div>

blog-itemphp.zip

3kB

adamberrington

Hi,

Thank you for your reply and for the image code!

The screen shot is attached of what it looks like on an iPhone or Android. The gap between the title (Where to stay & eat) and the intro text, is too large and it covers the open page icon cross in the bottom right. Can this text be moved up a little bit please?

Thank you.

saguaros

adamberrington

You can try with this custom CSS:

@media (max-width: 767px) {
    .item .article-title, .item .article-header h1 {
        height: 1.5em !important;
    }
}

and change the height to the value which suits your need.

adamberrington

I have done this and it works.

Thank you so much for all your help! :-)

saguaros

adamberrington My pleasure!