Slider issue when seen on mobile, responsive theme

  • gregory_wilcox

    (@gregory_wilcox)


    9 years, 7 months ago

    My site is BeehiveBugle.com, it uses a responsive theme.

    The issue is that on mobile (portrait display), our slider doesn’t look as good because the text portion ends up covering most of the picture. The problem disappears when phone is held horizontally (landscape).

    My best guess is that a fix would entail coding specific to when the slider is in mobile portrait display that enlarges the slider’s picture and/or minimizes the text, but I wanted to throw this out there and see what my options are. Any ideas?

Viewing 6 replies - 1 through 6 (of 6 total)
  • andrewcrook

    (@andrewcrook)

    9 years, 7 months ago

    G’day again gregory_wilcox!

    Add the following css rule:

    .slider1 .caption {
position: initial !important;
}

    That’ll change the way the slider is displayed ALWAYS (not just on mobile) placing the caption of the slider under the image, instead of on top of it.

    Thread Starter gregory_wilcox

    (@gregory_wilcox)

    9 years, 7 months ago

    Thanks as always andrewcrook!

    I just have two questions, one is amateur.

    First, where in the body do I put that css rule? I’m not a web designer, and am still learning.

    Second, is there a way to make the change applicable ONLY to mobile portrait display? The caption on the image looks good in every other orientation.

    andrewcrook

    (@andrewcrook)

    9 years, 7 months ago

    You’re welcome, mate.

    Rather than editing the theme files to change the css, the easiest and safest way is to do it via a plugin. I’d recommend either the Custom CSS module in Jetpack (http://wordpress.org/plugins/jetpack/) or the Simple Custom CSS plugin (https://wordpress.org/plugins/simple-custom-css/).

    You’ll need to add the following code:

    @media only screen
and (min-device-width : 768px)  {
.slider1 .caption {
position: initial !important;
}
}

    The outermost rule says that everything within its curly braces is to be only applied when the browser width is less than. That’s called a media query, and is used to make responsive sites. Then we put the earlier css rule inside it.

    Let me know how that goes.

    ShaunMB7

    (@shaunmb7)

    9 years, 7 months ago

    Hi Andrew,

    Sorry I have to resort to going other people’s Q & A’s.

    I’m having a hard time getting someone to look at my question. Any chance you might be able to help?

    Shaun

    Thread Starter gregory_wilcox

    (@gregory_wilcox)

    9 years, 7 months ago

    Andrew,

    I was able to make it work by slightly tweaking the code you gave me:

    @media only screen
and (max-width : 320px) {
.slider1 .caption {
position: initial !important;
}
}

    It was still displaying skiwampus, so I just searched CSS specs to target smart phones in portrait and came across the 320 max part.

    It looks so much better now — I hope you continue to be the one assisting with questions I have. Have a drink on me!

    -Greg

    andrewcrook

    (@andrewcrook)

    9 years, 7 months ago

    Ah, yes. I wasn’t thinking.

    Good pick up. Glad to hear you’re getting your head around it.

    Good luck with the site, it’s looking great.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Slider issue when seen on mobile, responsive theme’ is closed to new replies.