Refine CSS of text in image box on home page for various page widths

[oorjitchowdhary]

Please describe the problem (or idea)

The default Public Lab introduction text on the homepage is missing in the mobile view.

What happened just before the problem occurred? Or what problem could this idea solve?

What did you expect to see that you didn't?

This is the default introduction text on our desktop page.

Please show us where to look

https://publiclab.org

What's your PublicLab.org username?

oorjit_chowdhary

Browser, version, and operating system

Safari, iOS

---

Thank you!

Your help makes Public Lab better! We deeply appreciate your helping refine and improve this site.

To learn how to write really great issues, which increases the chances they'll be resolved, see:

https://publiclab.org/wiki/developers#Contributing+for+non-coders

[oorjitchowdhary]

@publiclab/mentors What should be done here...

[digitaldina]

@oorjitchowdhary I think this was done on purpose since the intro paragraph is long and shouldn't be the first thing users see on a small mobile screen. I'm pretty sure that after they scroll down, they'll see more about what publiclab is. I don't think adding this is necessary..

[SidharthBansal]

@oorjitchowdhary I agree with @dinaelhanan. What do you say @jywarren?

[jywarren]

Yes, this was intentional. However, if we could restate the problem, we could really use a solution -- the text does not evenly scale as the screen width changes (try uploading a gif to demonstrate this!) and the break points are not good. I wonder if there is some clever CSS we could use to make the font scale more evenly with the size of the image. Or some other way to deal with text flowing nicely in a variably sized box. This could be some really helpful research... there are a lot of powerful CSS tricks out there, and I'm sure someone's dealt with this. We'd be comfortable not showing the entire image, too, if that's helpful.

[digitaldina]

@jywarren is this similar? https://stackoverflow.com/a/16346076

[jywarren]

exactly!!!!! great demo too:

…

On Thu, Dec 6, 2018 at 4:11 PM d1g1t4ld1n4 ***@***.***> wrote: @jywarren <https://github.com/jywarren> is this similar? https://stackoverflow.com/a/16346076 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#4120 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ_5MOqK593jmKUsr4-n-YP9IrGulks5u2YfigaJpZM4ZCOnp> .

[digitaldina]

@jywarren Ok, then I think as part of : #4062 this should be the first step (kinda like an intro to changing up the style) so if you can make a task for this, I will take it up right away. Thanks!

[SidharthBansal]

Ok I am creating a task for this issue.

[SidharthBansal]

https://codein.withgoogle.com/dashboard/tasks/4615033783844864/

[digitaldina]

@SidharthBansal thanks! I just need this to be approved if you can :
https://codein.withgoogle.com/dashboard/task-instances/4824240835526656/

[SidharthBansal]

I am little cautious, let's wait for @jywarren to approve it

[digitaldina]

@SidharthBansal sounds good!

[jywarren]

👍 Awesome!

[jywarren]

And be aware -- this code is currently stored in the database, rather than in the codebase. So it's editable by site admins. But that means the solution for this will be probably stylesheets and a screenshot rather than a PR. The code driving this on the site is here:

https://gist.github.com/jywarren/b137484ae621dc00a4c48537fd00386b

I hope this makes sense. It's a little weird, but we often don't consider images or content text to be part of the codebase, and we like the flexibility of being able to edit the front page as if it were a blog post, to keep making tweaks.

Make sense?

[jywarren]

Locally you can work by logging in as admin, and going to https://localhost:3000/features/... an admin-only feature, and creating a new feature called "home-carousel", like this:

Then you can paste in the code from the gist above -- and it'll show up on your local installation's home page for testing.

[digitaldina]

@jywarren ok so I did all the steps above while on cloud9. I deleted all the image divs and just left one:

<div><img alt="fanboat" src="../dinaelhanan/app/assets/images/1.jpeg" /></div>

I uploaded a file on cloud9 so that I can at least see the carousel instead of just the alt text of the images. I did this file path since this is the file path of my image:

It's not working... I added this to the end of the style tag in your gist to see if my vw css trick would work:

h1.lead-text
{
   font-size: 3vw;
}

however I'm still just seeing the image's alt code... @SidharthBansal @sagarpreet-chadha maybe you could also help out? @ValentinaTironi maybe you could also help:)

[jonxuxu]

Are you getting any errors in your browser console or rails console?

[digitaldina]

there's no errors it's just that I can't get the carousel to showup @JonathanXu1

[jonxuxu]

Hmm I haven't used the carousel before, I'll look into it

[digitaldina]

@JonathanXu1 alright, thanks!

[digitaldina]

@JonathanXu1 @SidharthBansal I realized why it doesn't work! Like jeff said, the code is in the database not the codebase, so it won't show up and I don't have to make a PR, I just had to suggest using vw so that the text size is dynamic. I have claimed this task I just need to figure out how to get a screen shot... Thanks !

And be aware -- this code is currently stored in the database, rather than in the codebase. So it's editable by site admins. But that means the solution for this will be probably stylesheets and a screenshot rather than a PR. The code driving this on the site is here:

https://codein.withgoogle.com/dashboard/task-instances/5245453814726656/

[jonxuxu]

Oh I see! Where can you access the database, and how can you preview it?

[digitaldina]

@JonathanXu1 you can't access the database, but you can do this do preview it:
#4120 (comment)

[jonxuxu]

I've made the carousel like in #4120 (comment), but there's no change in the frontend on the dashboard page. Am I looking in the wrong place?

Edit:
I see the image alts like you do:

[digitaldina]

@JonathanXu1 ya..:/

[jonxuxu]

Perhaps there is a way of linking the source of the image, like how we do in github? Or have you tried linking a web url instead of a locally hosted source?

[digitaldina]

@JonathanXu1 ooo good idea I will try linking to a url

[digitaldina]

@JonathanXu1 Ya I've tried that, doesn't seem to work. Guess I'll have to wait and see if jeff can help out :)

[Linda-Ikechukwu]

Hi, outreachy intern here. Is this issue still open? Can I be assigned to it?

[SidharthBansal]

@Linda-Ikechukwu go ahead.

[shipcy]

Is this issue still open? Can I take this?

[SidharthBansal]

Please go ahead
thanks

[chirag-wadhwa]

Can I take up this issue, if it's still open ?

[SidharthBansal]

Sure

[jywarren]

This is resolved now, thank you!