A question about CSS targeting the buttons on mobile devices

[EllaKaye]

Hi Sean,

Thanks for this super package! I'm using a Jolla postcard as the homepage for a distill site and I've found the CSS I need to customise the link buttons so they show in the same pink I use throughout the site.

However, whilst that works great on my computer browser, when I look at the site on a browser on my iPhone, the default CSS still shows. I'm a CSS novice, and whilst I know how to inspect an element in a computer browser to find the CSS to target, I'm not sure how to do that for mobile devices. So, this is a question rather than an issue, but I'd very much appreciate your guidance on how to make the link buttons on mobile look the same as on the computer.

Thanks very much!

[seankross]

Hey @EllaKaye.

This is such a great site! I was wondering: do you edit _site/index.html after building you site? I am asking because I am curious about how this button gets assigned the class btn-outline-dark.

[EllaKaye]

Hi @seankross Thanks for looking into this and getting back to me.

No, I'm not editing _site/index.html. So not sure if the class btn-outline-dark is coming from the defaults for Jolla or for distill. Having inspected the html for the button, it took a bit of trial and error for me to get CSS that applied to it. For example, just setting CSS for the selector button didn't work (my approach to CSS does tend to be a bit hit and miss, need to make a concerted effort to learn it properly!)

Taking another look at it, whilst preparing this reply, and playing around with resizing my Chrome window and inspecting that button again, I now see that it loses the btn-outline-dark class when the window gets too narrow, and instead becomes

<button type="button" class="list-group-item list-group-item-action my-1 rounded"> <i class="fab fa-twitter"></i> Twitter </button> So now that I've found that, I've been able to answer my original question by writing some CSS targeting list-group-item. But it feels hacky.

Another question, while I'm at it. What CSS controls the appearance of <a> tags on a postcard page when it is part of a distill website? If I put a link on the postcard page, it styles in that standard hyperlink blue, rather than picking up the distill default for the rest of the site. I can change it with CSS for a, but I haven't (yet) been able to find the default for that in the distill CSS to copy over, and with my rudimentary CSS knowledge haven't been able to style it to look the same.

Glad you like the site 😄

[EllaKaye]

Hmm, I've just pushed those changes that make the buttons pink when narrow/on my phone, but it's created a new issue (and possibly one related to the other question about links).

There is now a blue underline on the text when I hover over the buttons when the window is narrow (i.e. when list-group-item applies). I tried to fix it by adding text-decoration: none; to but that doesn't solve the problem.

Any suggestions?

[EllaKaye]

Hi @seankross. I've now got the homepage looking like I want. Solved the text-decoration problem just with CSS targeting <a>, though to my surprise that only affected the postcard homepage and not the rest of the site. I'm closing this issue because I've found a fix to my original question, though the fix still feels really hacky (separate CSS classes for full and narrow screen), and I still don't understand how the CSS for the postcard page relates to the rest of the site. So, if at some point you were able to comment on any of that, I'd appreciate it, but there's absolutely no need or rush 😄