Jump to content
Sign in to follow this  
WebWerx

Odd Issue with Slider when going Responsive

Recommended Posts

WebWerx    0
WebWerx

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
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
WebWerx    0
WebWerx

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
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
WebWerx    0
WebWerx

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
Rob    547
Rob

You mean the overlay?

 

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


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
WebWerx    0
WebWerx

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
Rob    547
Rob

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).

 
 

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
WebWerx    0
WebWerx

 

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
Rob    547
Rob

As long as it worked, I'm happy!


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob    547
Rob

:D


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • lionel1
      By lionel1
      Hi,
      I use on my home page " impulse module " but when i look on my iPhone the image is cut and not responsive .
      i only have this problem with this module not with the other one .
      thanks for ur help
      website / www.elonakane.com 
      Lionel 
       
    • kwaoru
      By kwaoru
      Hi,
       
      I have been using DMS and pagelines.
      I am facing to a huge trouble with the appearance of one of my page on mobile (smart phones) built with pagelines.
      However I haven’t come to any solutions to organise either edit the appearance of mobile view to look neat or deactivate the responsive function. 
      Now it looks totally messy on the phone...
       
      1. Is there any way to edit the appearance of the mobile version (responsive theme)?
      2. Is there any way to deactivate responsive function?
       
      If I could receive support from you to go thorough this process I would be happy to be a pro member. 
       
      Looking forward to hearing from you.
    • Paul
      By Paul+
      I have woocommerce store, product shows title and price fine until reduce screen with on a tablet/mobile phone the price and title gets removed?  Any ideas? 
      Here's an example page: https://thelaptopfixers.com/product/operating-system-re-install/
      Try it on both desktop PC browser then resize to mobile/cell phone size!  
      Thanks
    • kwaoru
      By kwaoru
      Hi,
      I desperately need to deactivate the responsive function on mobile for reasons. It looks so messy with the responsive look on mobile and not navigating or informative at all as it is. 
      I searched for solutions online and tries some of those that I found but nothing worked out. Also I found a previous post on this forum says that this theme pagelines DMS is not meant to be build to deactivate the responsive function... 
      Also tried with widget such as WPtouch to edit the mobile look a little more informative but as I am using "single page" theme on pagelines, the frontpage(main page) never appears on those app.
      Seems like not compatible?
      If there is no way to deactivate responsive function or I'll have to recreate another page just dedicated for a mobile page? or change the theme completely and build a page from scratch?
      I have been searching for this for two days already...
      Could anyone wise and kind out there, please help me?
       
      Thanks,
    • dougalperman
      By dougalperman+
      Hi there,
      I'm a big fan of Pagelines, and have been for years.
      I'm trying to control the size of video embeds and having some difficulty. I see that I can just paste the Vimeo video URL into the post and an embed widget will automatically appear, which is great. But the embed box created is much taller that the video (689 x 1000 pixels) so the content sits in the middle of a tall black box, which looks awkward.
      I tried using the full iFrame embed code from Vimeo, which solved the disproportionate embed frame size (or aspect ratio) issue, but despite specifying the dimensions I want (690 x 388), the videos displayed on the post are sized at 300 x 150 pixels.
      I can't work out how to change either.
      I'm using the latest version of Pagelines Framework (Pro) with the Agency them.
      Any help or advice very much appreciated.
      Thanks,
      Dougal
×