Support » Theme: Relative » Slider (Post) – labels not visible in mobile screens

  • Resolved wpwd2016

    (@mwarbinek)



    I don’t know if this was by design, but in a desktop screen, the post slider that is used on the front page shows labels, which are the titles of posts.

    On a mobile screen, these labels (post titles) are absent. All that shows are the featured images.

    Is this by design?

Viewing 4 replies - 1 through 4 (of 4 total)
  • Theme Author bloggingthemes

    (@bloggingthemes)

    By design actually because there were times when the labels (titles) were really long, and then with the excerpt; therefore breaking out of the slide containers. Could make the font smaller but then it can get too small.

    Yep, know what you mean. I had to ask, so now I know what I can do.

    I am going to see if creating featured images with embedded titles work and if they are still readable in mobile screens. This means I would have to “display: none” the titles/captions displayed by the slider.

    Ok, thanks.

    • This reply was modified 2 months, 1 week ago by  wpwd2016. Reason: grammar correction
    Theme Author bloggingthemes

    (@bloggingthemes)

    You can also override the CSS for the media queries and change it so the titles and excerpts show up even on phones. Then adjust the font sizes based on your specific needs.

    The title shows up at this point:

    @media (min-width: 768px) {
     .flex-caption {
       display: inline-block;
     }
    }

    You can cancel that out by doing an override media query that is perhaps something like:

    @media (max-width: 767.98px) {  
      .flex-caption {display: inline-block;}
    }

    Nice, thanks for the CSS, saved me having to find it.

    The CSS modifications worked for your slider/theme.

    On a general note, I have experienced other themes or slider plugins that they were a headace to work with when scaling down for a mobile screen. Removing captions/titles from a slider is actually a good option to keep in mind when working any particular theme.

    Back to this post.

    I added a few styling tweaks to the slider. The caption/title text was somewhat difficult to read with the images I used. – Yes, may not need some of these tweaks if the images were different or darker, still, here is what I did to make it work in a mobile screen with the images I am using.

    You can attend the demo site and see what I did.

    My CSS mods, incorporating your CSS from above;

    
    @media (max-width: 767.98px) {  
    .flex-caption {
    display: inline-block;
    margin-top: -19px; /*raised it up a bit*/
    max-width: 100% !important; /*needed this to prevent cramping the title*/
    padding: 15px 0px 2px 15px !important;	/*adjustment for mobile screens*/
    }
    .flex-caption h2 {
    max-width: 98%; /*works with the max-width above*/
    font-size: 3.31vh;/*used relative view port units instead*/
    line-height: 3.5vh !important;
    }
    .slide-excerpt {
    display: none; /*had to remove the excerpt, was too much for mobile screen*/
    }
    }
    .flex-caption {
    max-width: 85%; /*same reason, better display for desktop screen*/
    background-color: rgba(0,0,0,0.55); /*makes text more visible*/
    padding: 15px 20px 2px 15px;
    }
    /*This was an added tweak, created circle border around the left/right arrow buttons on the slider*/
    a.flex-prev, a.flex-next {
    border: 2px solid #000000;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    background-color: rgba(0,0,0,0.39);
    line-height: 65px;
    }
    
    
Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.