Jump to content


Photo
- - - - -

Features Aspect Ratio problem

features images height resize

  • Please log in to reply
9 replies to this topic

#1 laura

laura

    Newbie

  • Members

  • 6 posts
  • Framework Version:2.4.4
  • Country: Country Flag

Posted 27 June 2013 - 09:16 PM

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: 

Please Login or Register to see this Hidden Content

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



#2 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 28 June 2013 - 12:03 AM

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 -

Please Login or Register to see this Hidden Content

 

Smaller images show as -

Please Login or Register to see this Hidden Content

 

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.



#3 laura

laura

    Newbie

  • Members

  • 6 posts
  • Framework Version:2.4.4
  • Country: Country Flag

Posted 10 July 2013 - 03:05 PM

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?



#4 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 10 July 2013 - 03:59 PM

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 -

Please Login or Register to see this Hidden Content

 

This is how it shows on a mobile -

Please Login or Register to see this Hidden Content

 

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 -

Please Login or Register to see this Hidden Content

 

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

 

Set the ratio to 1:777



#5 laura

laura

    Newbie

  • Members

  • 6 posts
  • Framework Version:2.4.4
  • Country: Country Flag

Posted 10 July 2013 - 05:39 PM

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:  

Please Login or Register to see this Hidden Content

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 



#6 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 11 July 2013 - 11:50 PM

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 -

Please Login or Register to see this Hidden Content



#7 laura

laura

    Newbie

  • Members

  • 6 posts
  • Framework Version:2.4.4
  • Country: Country Flag

Posted 12 July 2013 - 02:15 PM

James,

 

Thanks for this, but this has created new issues. Please take a look at this:  

Please Login or Register to see this Hidden Content

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

Please Login or Register to see this Hidden Content

 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


#8 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 12 July 2013 - 02:26 PM

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.



#9 laura

laura

    Newbie

  • Members

  • 6 posts
  • Framework Version:2.4.4
  • Country: Country Flag

Posted 12 July 2013 - 08:12 PM

After checking for Settings issue, Rob uploaded some test items to

Please Login or Register to see this Hidden Content

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



#10 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 12 July 2013 - 09:44 PM

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

Please Login or Register to see this Hidden Content

 

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.







Also tagged with one or more of these keywords: features, images, height, resize