Tag page heading card not rendering well in mobile screens

[jywarren]

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

[jywarren]

Related to #6027 too!

[jywarren]

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

[CleverFool77]

Hi Jeff !! I went through the site !! My screenshots are somewhat different :
attached below

[jywarren]

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

[jywarren]

My screenshot is 685px wide!

[CleverFool77]

Hi @jywarren I specially checked it in 685px wide and yes it's distorting in that width -
attached image

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

[CleverFool77]

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

[gautamig54]

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?

[CleverFool77]

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 ***@***.***> 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 <#6054?email_source=notifications&email_token=AGLS6SXTU4PJCEXDQAVOJZTQBGA2VA5CNFSM4IGFMFRKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD2ZD3VY#issuecomment-514997719>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AGLS6SXKT65PVBPQ5QQYUQLQBGA2VANCNFSM4IGFMFRA> .

[gautamig54]

Sure. I'll try it out!

[gautamig54]

@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?

[CleverFool77]

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 ?

[gautamig54]

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

[jywarren]

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

[jywarren]

OK, moving to #6799