Archived

This topic is now archived and is closed to further replies.

  • 0

Odd Issue with Slider when going Responsive


Question

Posted · Report post

When I resize my browser to test the responsive version of the site I am working on, the white text appears on the slide (it should not). I have checked my options and they appear to be correct.

 

Screenies:

 

https://www.dropbox.com/s/yzvnyxg4o0quf7m/Screen%20Shot%202013-06-01%20at%2010.21.31%20AM.png

https://www.dropbox.com/s/yblmqpvzx0kwz98/Screen%20Shot%202013-06-01%20at%2011.24.42%20AM.png

 

BETA Site: 

 

http://goo.gl/eSjqF

 

Stumped....  :phew:

Share this post


Link to post
Share on other sites

11 answers to this question

Posted · Report post

Okay,

 

This is the standard code:

#feature_slider .fcontent {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.35);
    color: #FFFFFF;
    display: inline;
    min-width: 220px;
    position: relative;
    text-shadow: 0 -1px 0 #000000;
    width: 33%;
}

All you'll need to add to your custom code is this edit:

#feature_slider .fcontent {
    background: none;
}

It may need "display: none;" instead. You'll have to tweak it a little bit.  Since you don't need any of the other elements of that bit, there shouldn't be any problem, unless you intend to use the slider elsewhere in the site with the overlay.  In that case, just prefix the group with .page-id-XX (where XX is the ID number of the page assigned by WP).

 
 

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

 

It looks like it's picking up the site title and some slide info.  If you can track that down, you'll probably need some simple browser specific CSS to hide both components of the white text.

 

I'm sure you have our Browser Specific CSS plugin (free in the Store > Plugins).

 

Not quite sure how to identify those elements though.

Share this post


Link to post
Share on other sites

Posted · Report post

Hey Rob! How are you? 

 

It's actually picking up the title of the individual Features: https://www.dropbox.com/s/w9clqtskd1apne4/Screen%20Shot%202013-06-01%20at%2011.50.57%20AM.png

 

It happens in every browser I tested. Plus it also happens on my iPhone. Watch it appear as you shrink the size of the viewport.

 

My Feature setting are correct: https://www.dropbox.com/s/f3h34bt5v6tz8by/Screen%20Shot%202013-06-01%20at%2011.54.54%20AM.png

 

 I think this is a PL bug (Did I say that out loud?). 

 

:zoro:

Share this post


Link to post
Share on other sites

Posted · Report post

I'm well, thanks. How've you been?

 

Yes, I see that. Oddly, it's only when you reach a particular point in resizing that it pops up though.

 

Did you try this:

 

.ftitle {display: none;

}

 

I'll talk to our developers about it.  And yes, you did say that word in public.

Share this post


Link to post
Share on other sites

Posted · Report post

Hey Rob: I had not tried your fix. It does work however. :D​  I need a bit of CSS to also not display the black transparency that goes behind the title...

Share this post


Link to post
Share on other sites

Posted · Report post

You mean the overlay?

 

I just tried to access the site but it said your domain isn't available.

Share this post


Link to post
Share on other sites

Posted · Report post

You mean the overlay?

 

I just tried to access the site but it said your domain isn't available.

 

Hey sorry Rob. I had effected the DNS changes - and forgot to update this post.

 

Here's the site: http://goo.gl/3nwpr

 

And yes I am talking about the overlay.

 

:zoro:

Share this post


Link to post
Share on other sites

Posted · Report post

 

Okay,

 

This is the standard code:

#feature_slider .fcontent {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.35);
    color: #FFFFFF;
    display: inline;
    min-width: 220px;
    position: relative;
    text-shadow: 0 -1px 0 #000000;
    width: 33%;
}

All you'll need to add to your custom code is this edit:

#feature_slider .fcontent {
    background: none;
}

It may need "display: none;" instead. You'll have to tweak it a little bit.  Since you don't need any of the other elements of that bit, there shouldn't be any problem, unless you intend to use the slider elsewhere in the site with the overlay.  In that case, just prefix the group with .page-id-XX (where XX is the ID number of the page assigned by WP).

 
 

 

 

Worked like a charm. Your a great chef Rob!

 

Hopefully you guys will fix the bug. Your fix works. But it should only be considered interim.

 

:zoro:

Share this post


Link to post
Share on other sites

Posted · Report post

As long as it worked, I'm happy!

Share this post


Link to post
Share on other sites

Posted · Report post

Me too!

Share this post


Link to post
Share on other sites

Posted · Report post

:D

Share this post


Link to post
Share on other sites