Slider button hidden in tablet/mobile

  • Resolved mikejdsouza

    (@mikejdsouza)


    8 years, 5 months ago

    Hi,

    I’m evaluating the enigma theme (which overall is very good) for a startup website that I’m going to launch soon and I am using the slider with the title, description and button.

    I noticed that as I decrease the browser size, it very quickly removes the button.

    I was wondering what could be changed in the CSS to retain that button (and hide the description instead – i.e. the title and button would be displayed in the small screen sizes).

    I attempted to change it with my limited CSS skills using the following custom CSS:

    @media (max-width:768px){

    .carousel-caption{
    top:14%;
    }}
    @media (max-width:320px){

    .carousel-caption{
    top:2%;
    }
    .carousel-text h1 {
    font-size: 12px !important;
    }
    .carousel-list li {
    display: none;
    }}
    @media (max-width:480px){

    .carousel-caption{
    top:8%;
    }
    .carousel-text h1 {
    font-size: 12px !important;
    }
    .carousel-list li {
    display: none;
    }}

    which pushes the title up and removes the description list item but still the button is not displaying.

    I would appreciate some assistance.

    Thanks,
    Michael

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • weblizar_support

    (@weblizar_support)

    8 years, 5 months ago

    Hii,

    paste the below CSS in Custom CSS box and save –

    @media(max-width: 480px){
.enigma_blog_read_btn {
    display: block !important;
}
}

    Thanks.

    Thread Starter mikejdsouza

    (@mikejdsouza)

    8 years, 5 months ago

    Great. Took some real playing around with the font-sizes, etc. but finally reached this solution (including your code block) to keep the description on as long as possible at a reasonable size before removing it:

    @media {
    .carousel-caption{
    top:10%;
    }
    .enigma_blog_read_btn {
    display: block !important;
    }}

    @media (max-width:800px){
    .carousel-caption{
    top:10%;
    }
    .carousel-text h1 {
    font-size: 18px !important;
    padding: 10px !important;
    }
    .carousel-list li {
    font-size: 14px;
    line-height: 18px;
    }
    .enigma_blog_read_btn {
    display: block !important;
    font-size: 14px !important;
    }}
    @media (max-width:540px){
    .carousel-caption{
    top:10%;
    }
    .carousel-text h1 {
    font-size: 14px !important;
    }
    .carousel-list li {
    display: none;
    }
    .enigma_blog_read_btn {
    display: block !important;
    font-size: 14px !important;
    }}

    Thanks for the help. Great theme. Will be strongly considering it. Will go Pro if I decide to proceed with it.

    Thanks!

    weblizar_support

    (@weblizar_support)

    8 years, 5 months ago

    Your Welcome and thanks for your appreciation,

    Let us know for further query and please mark the thread as resolved.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Slider button hidden in tablet/mobile’ is closed to new replies.