YAFLogo

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

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: https://goo.gl/2N9sg8  and https://goo.gl/WLUW9N .

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;
}
Sponsor