Responsiveness, White Space between sliders

  • Hi Simon

    Im having some difficulty setting up the 2 sliders on my home page.
    Ive tried various settings, sometimes on desktop it looks like it’s done, then i review on a mobile device (pls do!) and it’s incorrect. Then i have been able to make it look fine on mobile devices but when i review on desktop it’s all off gain.
    So i get in contact today. It’s not for lack of trying.
    Im certain its not your plugin, more likely i’m missing something that you’ll see in 2 secs no doubt.
    You will see that basically I want one slider above another.
    Without any white space between the sliders.
    Slider 1 is running 2 slides which are widgets from jobify set at Medium size
    Slider 2 will run a few slides which are created via your plugin (image dimension guide would be ideal)

    Below i have set out some css code that Im using and am hoping you could guide me.

    body .widget–home {
    margin: 0px !important;
    }

    .sa_hover_container {
    min-height: 380px !important;
    margin: 0px !important;
    color: white;
    font-weight: bold;
    }

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author simonpedge

    (@simonpedge)

    Try the following CSS:

    .home .jobify_widget_feature_callout {
margin:0px !important;
}
    Thread Starter andyrom

    (@andyrom)

    Thank you Simon.
    That work just lovely. Spot on.

    However I am having a nightmare with the settings for said slider. In respects to responsiveness across devices.

    In the meantime I have removed the css line
    min-height: 380px !important;

    Not sure where Im going wrong anymore. If image sizes or something else, as for example said slide seems to have an overlap even though the images are the same sizes
    Any advice will be much appreciated. Again thank you for the help, especially on a Sunday!
    Legend status!

    Plugin Author simonpedge

    (@simonpedge)

    Within the “Slide Background” TAB, try setting “Background Size” to “cover”. Also try setting it to “contain”.

    You are going to have to play around quite a bit with your CSS to get your Text to Fit/Resize on Tablet/Mobile. Sliders can be a real pain responsively because a) you can fit less on your screen on a mobile device, and 2) mobile phones/tablets are Portrait in shape whereas desktop/notebooks are Landscape.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Responsiveness, White Space between sliders’ is closed to new replies.