Jump to content
yemoonyah

make feature slider smaller but still responsive?

Recommended Posts

yemoonyah+    2
yemoonyah

Hi,

I changed height and width of the feature slider with the following code. But now it is not responsive any more.

How can I fix this?

http://new.langoncolombia.com/


#feature-area {

    border: 2px solid #ffffff;

}

#feature_slider {

width: 850px;

}

#feature-area,

.feature-wrap,

#feature_slider

.fmedia, #feature_slider .fcontent,

#feature_slider .text-bottom .fmedia .dcol-pad,

#feature_slider .text-bottom .feature-pad,

#feature_slider .text-none .fmedia .dcol-pad {

  height: 330px;

}

#features .content { width: 880px; }

Share this post


Link to post
Share on other sites
yemoonyah+    2
yemoonyah

Ok, I changed from px to % but now the content of the slider only shows up partially and the slider is aligned left.

http://new.langoncolombia.com/

Here is the code I used:



#feature-area {

    border: 2px solid #ffffff;

}


#feature_slider {

width: 80%;

}


#feature-area,

.feature-wrap,

#feature_slider

.fmedia, #feature_slider .fcontent, 

#feature_slider .text-bottom .fmedia .dcol-pad,

#feature_slider .text-bottom .feature-pad,

#feature_slider .text-none .fmedia .dcol-pad {

  height: 330px;

}


#features .content { width: 80%; }


I also attached an image of how it's supposed to look.

post-10444-0-85505100-1349797972_thumb.p

Share this post


Link to post
Share on other sites
catrina    103
catrina

Please add this CSS to center the feature slider:

#feature_slider div.fclone_wrap.hoempage.fix {margin: 0 auto !important;}[/CODE]


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
yemoonyah+    2
yemoonyah

thanks, but that didn't work

Share this post


Link to post
Share on other sites
Rob    547
Rob

Okay. It seems like on the homepage of that site, the slider is resizing to 80%. However, the images themselves are not going to be resized by CSS. You need to use the aspect ratio system inside the slider setup for each slide. The width of the slider is not necessarily the width of the slide.

If you have an image of 1000x330px and cut the slider down to 80%, all it means is that you're telling the slider to show 80% of the slide. It doesn't rescale the slide itself. The Aspect setting should resize however, it's going to be proportional, and will shrink the height. The best method, in my humble opinion is to redesign the slides to meet the width, with lots of built in padding in the image.

  • Like 1

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
yemoonyah+    2
yemoonyah

Ok, so setting the aspect ratio didn't have any effect at all. I guess I will have to resize the images.

Now all I need to do is to center the slider. The code Catrina suggested did not work. Any suggestions?

Share this post


Link to post
Share on other sites
yemoonyah+    2
yemoonyah

I just played with the aspect ratio again and this time it worked. Last time I forgot to set the height mode to 'based on width'..duh.

So now the images resize to fit the slider container and they are responsive.

But now when you load the page the slider first loads in a bigger size and with images cut off on the right and then jumps to the right size.

I also still need to center it.

Share this post


Link to post
Share on other sites
Rob    547
Rob

The reason for the image snapping in, then resizing is that the aspect ratio may have a little lag. This may be exacerbated if you have any cache enabled.

Unfortunately, centering is not something easily done. The normal method would be to add margin space left and right and as Catrina pointed out, set to auto. Doing this however, loses the responsiveness. I think you have to weigh the importance of the centering versus the import of the responsiveness. Personally, I'd recommend the latter.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
yemoonyah+    2
yemoonyah

how do I mark a topic a as resolved?

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there, I'll mark this as resolved for you :-)


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
James B    436
James B

The topic was marked as resolved.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

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


  • 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
×