Slider Image To Big on iPad and iPhone

I have a slider that pops up when you click on a smaller image.  It works great on computers, however on the iPhone and iPad the image is just too big.  How can I fix this?

The css that I think is causing this.

.lightbox-image {position:relative;overflow:hidden;display:block;background:#fff;z-index:1}
.lightbox-image img {position:relative;z-index:1}
.lightbox-image > span {display:block;position:absolute;left:0;top:0;width:100%;height:100%;background:

Open in new window


The link
www.schuremediagroup.com

Click on Portfolio, / Events / ..
DS928Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
In what way too big
Your div element pp_hoverContainer has a static width/height so it will always be set at that.
TBH even on my 1440 monitor it's too big in height.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
What you will want to do is use media queries where you set different sizes based on the viewport size.  https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

While this is a great solution, it does open a can of worms.  You will want to use resize images, fonts etc.  Although it seems odd, with mobile, you actually make the images larger in some cases in order to fill.  

I use http://getbootstrap.com/ and http://foundation.zurb.com/ as my base and build my templates on top of those and the css/media queries are taken care of along with some other jquery goodies.
0
DS928Author Commented:
Is this the line?

.pp_hoverContainer{position:absolute;top:0;width:100%;z-index:2000;

Open in new window


Should I change it to maybe width:600px  ?

Thank you padas.  Reading.
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

GaryCommented:
Yes and no, the width is ignored because prettyphoto sets the size based on other elements
If you are designing a responsive website you should never use absolute sizes except for elements that need to be a certain size or where they should never be smaller than a certain size then you use min-width etc.
For example on your body tag you have a min width of 1100px - normally you have a max width set here to control how big your website will go before everything looks a bit stupid.
I never have my browser open more than about 1000px.
0
DS928Author Commented:
OK I changed the other to max width= 1000px and this
position:absolute;top:0;width:100%;z-index:2000;

Open in new window


to this...
position:relative;top:0;width:600px;z-index:2000;

Open in new window


But it's still too big.
0
GaryCommented:
Bed time for me, bump this thread tomorrow.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
This is a very hard theme to work with for what you want to do.  It was not designed at all for mobile in mind.  You would need to use media queries to not only resize the pop up but the left side as well.   I know from working with this in the past, it would have been easier to start over with a different theme.  

If you do want to keep it, it's time to start resizing and moving things around for different size  viewports.    If you narrow your screen all the way to simulate the phone, you can see the left side should actually be stacked over the pop up and doing that means resizing to make room for the actual pop up content.
0
DS928Author Commented:
Thank you.  That is very helpful information.  I will keep that in mind for future designs.  Do you have any template suggestions that are good for both computer and iPads?
0
GaryCommented:
For your slider set its css width to something like
max-width:80%
Play around with the figure til it looks right, this way it will scale well no matter what the screen size.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
DS928Author Commented:
Thank you. I am looking for it now.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Like said here, http:Q_28247548.html#a39516585 I typically start with bootstrap or foundation and build on that.  If you are buying a template, make sure it is responsive.  If it is, I try and look to see if it is built on bootstrap/foundation instead of a homegrown.  The reason is the homegrown typically works exactly for the options in the template.  If you want to add or modify, it can be a PITA.  If I see it uses bootstrap for instance, I already  have a head start on  how to modify it.  fyi, bootstrap 2 vs bootstrap 3 use different css selectors.

If you want an inexpensive template, one place to look is themeforest.  I would only choose some of the newer templates though.  You should look at the source of the sample and determine how they built it.  Themeforest is supposed to review the themes first, but some of them are crap on the inside and made only to look good visually.

I think you will find what you are looking for if you look through some of the photography templates.  Also, I was cautioned by another expert here about some of the php that is supplied.  I would look over any serverside functions before using them.
0
DS928Author Commented:
Thank you.  I will check it out.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.