New Landing › How can we help? › Themeforest Theme Support › Dante › @media for layer sliders

Viewing 15 posts - 1 through 15 (of 19 total)
1 2
  • Back to forum
    Posted in: Dante
  • January 11, 2015 at 7:38 pm #140637
    tsimarketing
    Member
    Post count: 267

    While we’re in the process of cleaning up our mobile version of the website, I have turned off the responsive mode for the whole website. We used Layerslider to create our headers on all our pages and we want those set to responsive so they cling to the edge of the screen. They look fine on desktop but when you look at them on mobile/tablet the headers are aligned left with white space to the right. How come when we have the layerslider responsive but the website unresponsive the header images look fine on desktop but not mobile/tablet.

    Is there a @media css code that I can add for the time being, until I have cleaned up the mobile version of the site, so that the headers extend the width of the mobile/tablet screens?

    January 12, 2015 at 10:04 am #140820
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Hi

    Looks fine on mobile to me? Slider goes edge to edge. Are you referring to a specific page?

    – Kyle

    January 12, 2015 at 1:48 pm #140912
    tsimarketing
    Member
    Post count: 267

    Well they go to the edge on mobile because I had to play with the sizes of the images in layerslider. But I turned off responsive mode on the layerslider headers. They however don’t go to the edge of the screen on desktop. I want to make the headers go to the edge on all devices. I want to turn responsive back on for the layersliders but when I do that they cling to the left side of the screen on mobile and we don’t want that.

    So that’s why I was asking if there is a @media code I can use to either make the headers go to each edge or have them centered on mobile? This way I can turn responsive back on and have the headers look correct on desktop, because right now they don’t.

    January 12, 2015 at 1:57 pm #140917
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    It’s best if you turn responsive on, then I’ll check what’s going on in mobile

    – Kyle

    January 12, 2015 at 2:08 pm #140923
    tsimarketing
    Member
    Post count: 267

    Okay, I turned it back on.

    You can check it out at this link: http://tsihealthcare.com/maintesting/

    I have also attached a screenshot from my phone so you can see how the sliders only cling to the left side of the page on mobile but look fine on desktop.

    Attachments:
    You must be logged in to view attached files.
    January 12, 2015 at 2:13 pm #140925
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    It’s hard to debug as it does not happen when you resize your browser on desktop. Therefore I can’t inspect the code.

    Can you not set the size of the slider for different screen sizes?

    – Kyle

    January 12, 2015 at 2:19 pm #140927
    tsimarketing
    Member
    Post count: 267

    No, I don’t see that option on the layerslider plugin.

    I have attached screenshots of two settings pages, maybe you can spot something that I don’t have filled out right.

    Attachments:
    You must be logged in to view attached files.
    January 12, 2015 at 2:26 pm #140937
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    I’m not sure what’s causing the space, I will forward this to the developer to check

    – Kyle

    January 12, 2015 at 2:32 pm #140939
    tsimarketing
    Member
    Post count: 267

    Ok, thanks.

    Would you be able to help me make the blue menu bar wider so there is no white space on the sides when you open the browser bigger. Is there a code that can make the blue bar wider?

    January 12, 2015 at 2:36 pm #140941
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Please see your other topic, I have replied there

    – Kyle

    January 14, 2015 at 7:37 pm #141546
    tsimarketing
    Member
    Post count: 267

    Has the developer been able to take a look at this issue?

    January 15, 2015 at 2:06 am #141595
    Swift Ideas – Ed
    Keymaster
    Post count: 15264

    Hi there,

    Try this custom css:

    
@media only screen and (max-width: 1024px) {
.ls-wp-fullwidth-helper {
width: 100%!important;
left: 0!important;
}
.ls-wp-fullwidth-helper .ls-container {
width: 100%!important;
}
}

    – Ed

    January 15, 2015 at 2:28 pm #141735
    tsimarketing
    Member
    Post count: 267

    Okay that worked in making the headers larger and centered. But they still don’t reach the edge of the mobile view. Is there something that can be tweaked to get it to touch the edges? See attached screenshot

    Attachments:
    You must be logged in to view attached files.
    January 15, 2015 at 6:16 pm #141825
    Swift Ideas – Ed
    Keymaster
    Post count: 15264

    Checked here and all looks good? https://www.dropbox.com/s/0b39db4s3uzkd9a/Screenshot%202015-01-15%2018.16.33.png?dl=0

    – Ed

    January 15, 2015 at 8:26 pm #141856
    tsimarketing
    Member
    Post count: 267

    Oh sorry I forgot to mention that we are testing out the css code you gave us for this on our testing site which isn’t the live site. That is where I put the code above.

    So take a look at http://www.tsihealthcare.com/maintesting on your phone and you should see that the headers are centered and larger but are still not touching the edges.

  • Back to forum
    Posted in: Dante
Viewing 15 posts - 1 through 15 (of 19 total)
1 2

You must be logged in to reply to this topic.