•  vcsharp
  • 88.4% (Honored)
  • YAF Commander Topic Starter
Right now the pager buttons are too small when viewed on a mobile device, as can be seen in following screen shot: .

Since YAFMobile theme is being applied on a mobile device, so the following CSS should be included, which has higher left and right paddings for each pager button and also the font-size of button text is bigger. The result of this is bigger buttons that are easily clicked by end user on a mobile device, which can be seen in following screen shots:  and .

NOTE: The CSS below should be included in the theme.css file under themes/YAFMobile folder. The first CSS rule is there in the theme.css file and so only changes need to be made for this rule according to comments mentioned, but the second CSS rule is completely new and should be simply pasted into the theme.css file.

.yafnet a.pagelink, .yafnet a.pagelinkfirst, .yafnet a.pagelinklast, .yafnet .pagecurrent, .yafnet .pagecount {
    text-decoration: none;
    background: #F5F5F5;
    border: 1px solid #444444;
    padding: 1px 5px 1px 5px;/*increased left and right paddings from 3px to 5px*/
    margin-right: 2px;
    font-size: 1.7em;/*added a new font-size CSS rule*/
/*below CSS will make sure that pager displays as a block so buttons are all in a single line*/
/*and also the new topic button displays right under the pager, to make UI*/
/*more usable for the end user on a mobile device*/
.yafnet table.command tr:first-child td {
    display: block;

About Us

The YAF.NET is an open source .NET forum project. YAF.NET is supported by an team of international developers who are build community by building community software.

Powered by Resharper Donate with PayPal button

Project Twitter Updates

Copyright © YetAnotherForum.NET & Ingo Herbote. All rights reserved