[NextCEOParticipant]

I have looked through the online documentation from LayerSlider’s developer as well as the documentation on community.theme.co unfortunately I do not see anything in there that will assist me in ensuring the LayerSlider’s elements are responsive.

The first section (titled ‘Gone Fishing’) under the nav bar on this page: http://www.fishermanswharfporta.com is a LayerSlider that we are in the process of developing. Unfortunately when we create the slide it looks good on the desktop view but when I start to adjust for the tablet and mobile view the elements do not respond correctly. I have attempted to change the width / height and position of the element with % but still doesn’t work.

Please assist in helping me to make the LayerSliders responsive and functional.

General Info:
Url: http://www.fishermanswharfporta.com
WP: 4.5
X Theme: 4.4.1
Login Credentials: (see private message below)

[NextCEOParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Thanks for writing in! With Layerslider, you only have a limited layer option. The best thing I can recommend to have a responsive element layer is to add a custom class or id to your element and use this with custom css to manipulate the element attributes in smaller screens.

For example, I have a text layer which has a big font on larger screens. This text will not look nice on smaller devices. What I will do is to add a custom ID and using custom css, I can make it responsive. Please take a look at this screenshot.

And then you can use this css,

@media(max-width: 979px){
  #my-text {
    font-size: 24px;
  }
}

Hope this helps. Kindly let us know.

[NextCEOParticipant]

Thanks for the info, screenshot, and snippet of the CSS code. I was able to get everything working correctly when I view it from cornerstone and the different screen sizes (Extra Large – Extra Small).

When I look at it on a mobile device (iPhone 6+) the text (.fishingtextmobile) and button (.fishingdetails) in the ‘Gone Fishing’ section do not appear correctly or how it does in Cornerstone Extra Small or Small preview. It actually looks like it was from a previous version. I’ve cleared the web browser cache on the mobile device and it still looks incorrect.

I have attached two screenshots…one that shows the Extra Small Preview within Cornerstone and another of what it looks like on a mobile device (iPhone 6+)

I hope this is a quick fix…

[NextCEOParticipant]

The cornerstone screenshot caused an error (exceeded 512kb)…please view that screen shot here:

https://drive.google.com/file/d/0B-fRzTyW0JvvbUlBNFBodnh0ZnM/view?usp=sharing

[RadModerator]

Hi there,

It’s because of this CSS under your cornerstone’s custom CSS

@media (max-width: 481px) {
    .fishingtext {
        display: none;
    }
    .fishingtextmobile {
        display: block;
        font-size: 14px !important;
        line-height: 102% !important;
        margin-top: -6% !important;
    }
    .x-btn.fishingdetails {
        margin-top: 11%;
        margin-left: -10px;
        color: #ffffff;
        padding: 15px 20px 15px 20px;
        border-color: rgba(255, 255, 255, 1);
        border-width: 1px;
        opacity: 1;
        font-family: nunito;
        font-weight: lighter;
        font-size: 14px;
    }
    .x-btn.fishingdetails:hover {
        margin-top: 30px;
        color: rgba(255, 255, 255, 0.9);
        padding: 15px 40px;
        border-color: rgba(255, 255, 255, 0.77);
        background-color: rgba(231, 76, 60, 0.1);
        border-width: 2px;
        -moz-box-shadow: inset 0 0 12px #ffffff;
        -webkit-box-shadow: inset 0 0 12px #ffffff;
        box-shadow: inset 0 0 12px #ffffff;
    }
    .ls-fishing.gonefishing {
        width: 75%;
        display: none;
    }
}

Please remove it and try it again.

Thanks!

[Author]

Posts