Jump to content

Archived

This topic is now archived and is closed to further replies.

jane

PopShot in Chrome and native Android browser

Recommended Posts

jane

Hi,

 

I've noticed in Chrome and the native browser on Android devices PopShot isn't showing up normally.

 

On this page I have 3 popshots, when the window is minimized to the size of a tablet or mobile the 3rd popshot shrinks while the other 2 stay fixed.

 

Is there a way to get them all to shrink at the same rate?

Share this post


Link to post
Share on other sites
greenfly

Could you provide us with a screenshot of what you are seeing and which device and release of Android OS you are using? 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
GetMeWebDesign

Martin, if you resize the browser or use Screenfly, you can see the issue. On the pagelines DMS site, it resizes somewhat, but not a lot, meaning that the two side popshots are revealed less and less as the browser is reduced. I am assuming @jane is looking for the whole section to resize proportionally and retain the display of the three popshots? Or perhaps it is the nature of resizing, where the right hand resizes at a differnt proportion to the left... as below

 

http://screencast.com/t/PFA6W9Kp


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
greenfly

I can see that - what i want is confirmation of how this looks on Android devices so i can report this back to the properly. 

 

When you create a forum topic you are asked for this information and have to click to confirm you have read the information. 

 

Remember to include as much information about your technical issue as possible for example:
Website URL:
Framework Version:
WordPress Version:
Plugins in Use:
Server/Host:
Screenshots:
Details:


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
GetMeWebDesign

Wasnt having a go at you Martin :( was adding jane so we might see a response


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
greenfly

@getmewebdesign 

 

Wasnt having a go at you Martin :( was adding jane so we might see a response

 

i re read my response and it does appear a bit sharp - i assure you i wasn't trying to be. Just trying to point out what the guidance states. 

 

The first thing im going to be asked for is evidence/screenshots. Need these before i can report back. I don't have access to Android devices at present. 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
jane

Hi Martin Davies , I've attached some screenshots

 

https://www.dropbox.com/s/rx1xwz4n2l0iqia/Screenshots_2014-05-27-06-32-35.png Native Android browser

 

https://www.dropbox.com/s/lfopgi1rpijj5so/Screenshots_2014-05-27-06-40-51.png Chrome browser

 

The screenshots were taken on a Galaxy Note 2 Android version 4.3 (Jelly Bean)

 

Yup, GetMeWebDesign , you've got it right - ultimately I'd like them all to resize proportionally. :)

Share this post


Link to post
Share on other sites
Danny

As far as I am aware there is no issue, the PopShot section is suppose to appear like that. The way I thought the section works is that when you resize your browser window or view on a mobile device, the section will display the central image and nothing more. However, I will speak to our developers and see what they suggest.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jane

As far as I am aware there is no issue, the PopShot section is suppose to appear like that. The way I thought the section works is that when you resize your browser window or view on a mobile device, the section will display the central image and nothing more. However, I will speak to our developers and see what they suggest.

Hi Danny that would be fine if it was just the central image that showed up. It just looks strange to have the 3rd popshot not be on the same scale as the 1st popshot (as illustrated by my screenshots)

Share this post


Link to post
Share on other sites
Danny

Ive reported it to our tracker for you.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Danny

No problem.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Andrew

This was designed this way, since the elements are absolutely positioned and animated its overall a better more consistent experience than animating the size of the elements. 

 

We'll assess improving this but its gonna be more effort than its likely worth.

Share this post


Link to post
Share on other sites
jane

OK thanks Danny"] and @[member="arpowers for your feedback about this. 

Share this post


Link to post
Share on other sites
GetMeWebDesign

jane Is you popshot still behaving oddly. There are two separate issues here. The first is what you would like, as I hinted at.... that looks rather unlikely

 

However, the odd behaviour of the right resizing differently from the left. That shouldnt be happening. I have just tested Popshot and I dont get that problem as severely as you do. The only time, using screenfly with an images 520px wide (all images same dimensions but cropped/reduced  in height. the left and right by 60px), occurred when using tablets or browsers in the range 500ish through to 600ish, but not diastrous. 

 

Mobile though wasnt brilliant. Ways around this is to have (assuming you have checked Wp Admin > Pagelines Pro > Allow Hidden Sections)

  • two separate popshot sections and hide one for desktop users and one for mobile users
    - in the mobile section use smaller images, for instance I used ones 150px wide
  • Two sections. One a media box for mobiles (and hide on desktop) and popshot for desktop (and hide for mobile)
  • Just hide the section for mobiles
  • use @media enquiries to style

Not perfect, but away around


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
GetMeWebDesign

Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
jane

GetMeWebDesign - I didn't even know hiding sections depending on what type of device your using was an option! This really changes things. Thank you!!

Share this post


Link to post
Share on other sites
GetMeWebDesign

jane ha ha... no problem. I like to see if I can find some sort of work around, if there isnt a perfect solution. Hope it works ok for you


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
jane

I'm definitely going to give this a go, thanks so much GetMeWebDesign !

Share this post


Link to post
Share on other sites
GetMeWebDesign

jane At bit of better news, I hope. I did a little more mucking about (havent been doing this since... other fish to fry!), but I wondered what would happen if I added 5 images instead of three (slipped in between the original three)

 

The result was great degradation over all resizing on screenfly. 

 

1600px with 5 "pops"
 
600px with 5 "pops"
 
 
arpowers So this is what I dont understand. Why do the left and right hand "pops" degrade/resize in  a different manner. I reversed the z-index to show what I mean... at 600px resolution
 
600px with 5 "pops" Lefthand images reversed z index
 
600px with 5 "pops". Right hand images reversed z index
 
The furthest to the right seems to have agoraphobia and want to hide from the limelight! 

 


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
jane

GetMeWebDesign you've given me some great options to play with, thanks so much :)

Share this post


Link to post
Share on other sites

×