Plots2: Tag page heading card not rendering well in mobile screens

Created on 23 Jul 2019 · 15Comments · Source: publiclab/plots2

cc @gautamig54 @CleverFool77 would you be able to help with this? I think it relates to not using position:absolute for the card... Thanks!

bug help wanted high-priority

Source

jywarren

All 15 comments

jywarren on 23 Jul 2019

I think it's only https://publiclab.org/tag/coqui doing this ... maybe odd-shaped images? Not sure!

jywarren on 23 Jul 2019

Hi Jeff !! I went through the site !! My screenshots are somewhat different :
attached below
Screenshot from 2019-07-23 20-51-36

Screenshot from 2019-07-23 20-49-41

CleverFool77 on 23 Jul 2019

OK, good to know! Maybe different devices are showing different things here. Let's keep gathering evidence!

jywarren on 23 Jul 2019

👍1

My screenshot is 685px wide!

jywarren on 23 Jul 2019

Hi @jywarren I specially checked it in 685px wide and yes it's distorting in that width -
attached image
Screenshot from 2019-07-23 23-21-19

Me and @gautamig54 will try to look into this and give a fix soon.
Thanks !!

CleverFool77 on 23 Jul 2019

So After trying it on many screens, The UI is distorted only in tab version, otherwise its working fine on different screens.

CleverFool77 on 24 Jul 2019

So @CleverFool77 we can use media screen functionality and make it right for the tab view as well. I did it explicitly for the mobile view, you see it in the code.
We can do the similar thing for the tab view also. Maybe just by increasing the maximum width in the media screen to 685px which is currently 480px.
What do you say?

gautamig54 on 25 Jul 2019

Sure. Would you like to try it out ? like you did in mobile version as you
said ?

On Thu, Jul 25, 2019 at 4:23 PM Gautami Gupta notifications@github.com
wrote:

So @CleverFool77 https://github.com/CleverFool77 we can use media
screen functionality and make it right for the tab view as well. I did it
explicitly for the mobile view, you see it in the code.
We can do the similar thing for the tab view also. Maybe just by
increasing the maximum width in the media screen to 685px which is
currently 480px.
What do you say?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/6054?email_source=notifications&email_token=AGLS6SXTU4PJCEXDQAVOJZTQBGA2VA5CNFSM4IGFMFRKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD2ZD3VY#issuecomment-514997719,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AGLS6SXKT65PVBPQ5QQYUQLQBGA2VANCNFSM4IGFMFRA
.

CleverFool77 on 25 Jul 2019

Sure. I'll try it out!

gautamig54 on 25 Jul 2019

👍1

@CleverFool77. I notice that in tab view, the page is not displaying the image with the grey background. It is happening for the mobile view. Why do think this is happening?

Screen Shot 2019-07-27 at 2 37 06 PM

Screen Shot 2019-07-27 at 2 37 18 PM

gautamig54 on 27 Jul 2019

So page is not displaying the image with background . Its because this feature is necessary only in medium and above larger screen as usually width of image goes much smaller compares to width of our screens.
Besides, In this I have used two different divs, one is for smaller screen like mobile and other is for screens larger than mobile. So I did add the background on them using bootstrap classes and css.
Is this what you wanted me to explain ?

CleverFool77 on 29 Jul 2019

HI @CleverFool77! I am not able to understand why the image is not rendering in the tab view. Can you look into this? I will take care of the tag card positioning and other objects.
You can solve the image part and I will take care of the rest :)

gautamig54 on 4 Aug 2019

I looked in the chrome dev console and found that this 'box' class div is potentially the issue?