Jump to content
laura

Features Aspect Ratio problem

Recommended Posts

laura    0
laura

Posting at the request of PageLines LIVE 

 

Website URL: joulebugtesting.com/basics/tour

Framework Version: 2.4.4

Wordpress Version: 3.5.1

Plugins in Use: Contact Form 7, Velvet Blues Update URLs, WordPress Importer

Server/Host: Bluehost

Screenshots: http://screencast.com/t/efkeTNim49 (provided by James in PageLines LIVE support - this is what we're trying to achieve - navigation buttons tightly under the media image)

Details

 

Have created an admin account user and emailed credentials to hello@pagelines.com

The page in question looks pretty good on a phone,but when viewing on a computer screen, there's a big gap of white space between the bottom of my image and the navigation buttons for the features (as well as the pause button). My images are 960 x 1600. James (PLL) suggested that my height should be set to around 770, meaning I should scale set the aspect ratio to .48 (770/1600). I tried this but didn't work. Then he suggested I switch to static height and set the height to 770. I tried this and still the gap remains.

Share this post


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

Hi there, we've logged in and taken a look. If the slider is set to 770px height the slider works correctly for the first two image, it looks like the image of the iphones are different sizes which is why they display the last two with the gap. See below.

 

Larger images show as - http://screencast.com/t/tD9XQ8ZJRp

 

Smaller images show as - http://screencast.com/t/bEulgoi2hpH

 

The first two images work on the ratio of 3:5 or 770px if using fixed height to get the nav tight under the image. The third and fourth image scale further down, the best thing to do would be to use the first image as a template and resize the third and fourth to match. Or if you have something like photoshop, copy the screen image and paste it into the iphone image on the first slide. Then scale it to fit the phone screen.


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
laura    0
laura

James, Thanks for your response.

 

I've verified that the images are set to a height of 770px and I've also set my features height to static of 770px. On a desktop, the navigation buttons appear tight under the image, as they should. However, when viewed on a mobile device (iPhone), there's a large gap below the image so that the text and navigation are not viewable with the image. What is generating that gap and how can I eliminate so that both on the desktop and on the iPhone, the images, text, and navigation all are viewable in one screen?

 

I've also experimented with using height based on aspect ratio, and again, I can either have the images, text, and navigation all viewable on either mobile OR desktop, but not both. Is there a better way to do be doing this in order to accomplish on both devices?

Share this post


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

Hi Laura,

 

I've been playing around with this today as I had some free time today, I've copied your images on to my test site and edited them to test.

 

This is what I get on my test site - http://client5.surreydiscountwebsites.co.uk/

 

This is how it shows on a mobile - http://screencast.com/t/LGJ9Ql1RGpbb

 

The best way I've found to get the effect you want is to do the following. Re-size the images to 1000 by 500px, with the phone on the side and the extra space to the left when the writing will be. Re-save the image. It will look like this once re-sized - http://screencast.com/t/KdiICtfBHlA

 

Then upload them into the slide as the slide background, not into the media area.

 

Set the ratio to 1:777


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
laura    0
laura

Hello again James,

 

So I've tried your most recent suggestion and agreed, it looks really nice on the desktop, but when I view on my mobile, the text is appearing on top of my image, rather than to the left. This is making my image appear grayed out for the most part. I verifed that I have the Text Left setting for my Features. Any suggestions.

 

Also, can you tell me how you arrived at the ratio of 1:777?  I'm thinking that I prefer the images to be a height of 770px vs. the 500px current setting, but not sure whether this ratio should change -- I'm having trouble understanding what it's affecting.   Here's how they look for me:  http://www.screencast.com/t/Xvk8Q5cBDbN and http://www.screencast.com/t/qhWDkGBuVUn

 

I really appreciate your help. It's nice to feel that I'm finally able to make some progress on this.

 

Laura 

Share this post


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

Hi Laura

 

The slider will in responsive move automatically move the content/text over the slider when the bg is full width. To adjust this you can use css, something like the below should adjust the width in responsive move

 

.responsive #page #feature_slider .fcontent .fcontent-pad {
    heightauto;
    padding3%;
    width60%;
}
 
This should result in something like - http://screencast.com/t/gyITor2CUBj6

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
laura    0
laura

James,

 

Thanks for this, but this has created new issues. Please take a look at this:  http://www.screencast.com/t/ivOBaq3otr1.   Is this the slider background that's covering my image? Is there a bg width that I should be setting? Is the bg part of the image or a separate element?   I would have thought that this css (from PL chat support) would have taken care of it already:

body{}
#feature_slider #feature-area { background:none;}
#feature_slider #feature-area {box-shadow: none;}
 
Here's a capture from my phone: http://www.screencast.com/t/9aao5WPR and you can see that my heading is being cutoff. Not sure if the solution is going to work or not....
 
We're getting so close and I thank you again for sticking with me on this and trying to get it working at its best. Hope to hear back soon.
 
Cheers,
Laura

Share this post


Link to post
Share on other sites
Rob    547
Rob

Laura,

 

You're seeing the text overlay, not the background.  All your CSS above does is prevent slides set in the background (which is the proper way to assign image slides), from displaying. I'd recommend you remove that incorrect CSS as it could render other slides unusable in future.

 

I should point out that the Media are of our slider is intended only for use with videos and other media.  The Background upload option is meant for static images.  I was not aware in our Live Chat session you were using the incorrect structure of your site.  That is why the 1:1 ratio did not work with the slides I helped edit for you.  Had those slides been added correctly, it should have worked perfectly.

 

Meanwhile, please use Firebug or Chrome's Inspection tools to find the overlay element, and test it before adding the code to Custom Code to correct the problem.  You shouldn't be using "display: none;" per se, but making it transparent.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
laura    0
laura

After checking for Settings issue, Rob uploaded some test items to http://www.joulebugtesting.com/pl-test/ and asked that I inspect and verify if the settings work in mobile. While the test page looks great on the desktop view, take a look here:  http://www.screencast.com/t/oaSWXPsj to see how they appear on mobile - - you'll notice that the text overlay is preventing a clear view of the image. I'm baffled as to where to go from here. 

 

Feature slides are set to 700px wide by 500px tall, aspect ratio set to 1:1

 

Feature Setup Options: 

Text on Right

Black Text - Light Feature Background with Border - No Overlay

 

Please let me know if you need any additional information.

 

Thanks!

Laura

Share this post


Link to post
Share on other sites
Rob    547
Rob

Laura,

 

You are clearly missing what was written and the proper information the system provides if inspected correctly.  The images were replaced, as stated at 500PX high and 1310PX wide. 

 

That's how it should have been done to begin with.  The rest of this is simple CSS to make it work as you want, and to make it look as you desire. We are not styling, designing, or prettifying your site.  We clearly state that throughout this forum.  If you cannot deal with CSS, please hire a professional developer to perform that task.

 

We have already extended two instances where we have gone well over the top to help you. That is as far as we are allowed to go.  The rest is up to you to do.  Kindly read up on how to do this, as there are many available resources to assist you. Please see and read in detail our documentation at http://support.pagelines.me/docs

 

To recap, the work performed on your site corrected numerous errors which stemmed solely from user error, not product error. I was able to make the slider work by making the images proper sizes, as you were told several times needed to be done.  I corrected the duplication of settings, created because insuffiicent research was performed, and there was a clear failure to read the instructions present on the pages where those settings were placed.   PageLines volunteered to fix your images, twice, which is not a service performed by this company, nor our obligation.  That's your task.

 

Kindly engage a design professional and have him execute the desired design.


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


  • Similar Content

    • wyo22ski
      By wyo22ski+
      Hello,
       
      I'm basically a designer and understand a little on how to change CSS, etc., so please excuse my ignorance...  I recently upgraded to the newest platform from the DMS and my old DMS theme no longer functions.  I'm trying to replace the image slider that my Horizon Photography Theme (Nick Haskins) had created.  The Impulse image slider seemed the closest to what I need, but there are problems.
      It seems the the Impulse section for sliding images defaults to the image width, no the height.  I can change the Impulse stage height and width, but this does nothing to the internal content.  For instance, if I change the height to 200 pixels, the image remains the full width and only shows a cropped section.  I would like the ability to change the Impulse height, and have the image height fit space. 
      I've put this custom CSS in, but again, this only controls the stage height of Impulse:
      .pl-sn-impulse .pl-impulse-cell .cell-wrap, .pl-impulse-container, .owl-stage-outer {
        width: 100%;
      }
       
      Any suggestions welcome.  Thanks 
    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      I have noticed that all thumbnails on www.michaelkummer.com are scaled down in CSS or HTML, rather than on the backend by Jetpack's Photon. See https://db.tt/vNJCn7Gh and https://db.tt/3ZpkHM7G. 
      Any idea why Pins sets the image width and height to something much larger than what's shown on the screen? Is there any way to fix this so that Photon can do a better job in rescaling the images on the backend before they are delivered to the browser?
      Thanks
      Michael 
    • Samuel Costa - UDF
      By Samuel Costa - UDF+
      Hi. I made this site: www.arvoredacidadania.org.br. In the part Quem Somos and Serviços I used different configurations (1 container and 2 texts side by side; 2 containers: each one with text; or just two texts side by side).
      The problem is the height. I tried CSS, etc, but when i change the width, change the height also.
      Any ideas?
      This picture is the example how i need to do.
      I need both textboxs with the same height.
      Regards.

    • sfmstudios
      By sfmstudios+
      I'm using the boxes section on a local development site to play around with some options, and running into an issue.  
      Have the following settings for the boxes:
      Type: Images/SVC Media on Top Image Appearance: Standard/Default Image/Icon Width: 280px Image Opacity: 100% Each of my box images is 280x150 in size, but the result of the image on the box is a strange zoomed-in, cropped square (see attached).  I looked to adjust border properties via CSS, but couldn't find a fix.  What solutions are out there?

    • richardjacruz
      By richardjacruz+
      I received our monthly Alexa report, and it pointed out that there were missing alt tags on EVERY page on our site. Upon closer inspection, it looks like the QuickSlider which is used for the scrolling banners at the top of the site doesn't bring in the alt tags. Recently, you made a change to the RevSlider to allow images to have "alt" tags. Can you do that for the QuickSlider too?
      Thanks.
×