pauamma: Cartooney crab wearing hot pink and acid green facemask holding drink with straw (Default)
Res facta quae tamen fingi potuit ([personal profile] pauamma) wrote in [site community profile] dw_dev2023-06-07 01:00 am
  • Add Memory
  • Share This Entry
Entry tags:

Question thread #122

It's time for another question thread!

The rules:

- You may ask any dev-related question you have in a comment. (It doesn't even need to be about Dreamwidth, although if it involves a language/library/framework/database Dreamwidth doesn't use, you will probably get answers pointing that out and suggesting a better place to ask.)
- You may also answer any question, using the guidelines given in To Answer, Or Not To Answer and in this comment thread.
Flat | Top-Level Comments Only
sunlit_skycat: A gray and white cat in a meadow (Default)

Make a theme mobile friendly?

[personal profile] sunlit_skycat 2023-06-12 06:43 am (UTC)(link)
Hi, I'm a new Dreamwidth user, and I have a community here, at https://blueheronteanook.dreamwidth.org/. I am using the style Radiant Aqua for Venture, with a lot of recolors, set to 3 Columns (one sidebar on each side), one sidebar on each side. I want to be able to make this theme more mobile friendly by having one column only on mobile, essentially the 1 Column (modules at bottom; no sidebar) layout, while keeping the 3 column layout on desktop.

How difficult is this to do? My CSS knowledge is at the point where I can copy and paste it and mess around with variables, but I do not feel confident in writing anything out from scratch.
denise: Image: Me, facing away from camera, on top of the Castel Sant'Angelo in Rome (Default)

Re: Make a theme mobile friendly?

[staff profile] denise 2023-06-13 10:52 am (UTC)(link)
You will probably get better answers in [community profile] style_system, honestly: not a lot of us are CSS wizards!
veryroundbird: (Default)

Re: Make a theme mobile friendly?

[personal profile] veryroundbird 2023-06-13 04:38 pm (UTC)(link)
Hello! I have some suggestions. What you're going to be doing is adding a media query to change how the styles work at a certain display width breakpoint. I've written up a quick stylesheet here that you should just be able to copypaste into the custom CSS box and have work, but let me know if there's any issues with it!
sunlit_skycat: A gray and white cat in a meadow (Default)

Re: Make a theme mobile friendly?

[personal profile] sunlit_skycat 2023-06-14 01:05 am (UTC)(link)
I copied and pasted the code into the custom CSS box, and then went to check the site on mobile (Firefox on a Galaxy Note9, if that matters). I did not see any change from before.
veryroundbird: (Default)

Re: Make a theme mobile friendly?

[personal profile] veryroundbird 2023-06-14 01:45 am (UTC)(link)
Oh, hm—it seems like that layout doesn't have the meta tag that lets non-desktop devices render the page responsively. It should be this:

<meta name="viewport" content="width=device-width, initial-scale=1">

...and it should go in the <head> tag, but apparently user layers aren't allowed to add meta tags in the advanced layout customization. Which is why someone's writing a patch for it in the DW codebase like right now, I think, ahaha
sunlit_skycat: A gray and white cat in a meadow (Default)

Re: Make a theme mobile friendly?

[personal profile] sunlit_skycat 2023-06-14 03:37 am (UTC)(link)
To be clear, once this DW patch goes through, will I need to do anything to this site specifically to make it mobile responsive? Will the CSS provided still be necessary after that?
veryroundbird: (Default)

Re: Make a theme mobile friendly?

[personal profile] veryroundbird 2023-06-21 06:39 am (UTC)(link)
update: as it turns out I am patching these directly into the theme in the same code push, so! you will not need it 👍
sunlit_skycat: A gray and white cat in a meadow (Default)

Re: Make a theme mobile friendly?

[personal profile] sunlit_skycat 2023-06-22 05:33 pm (UTC)(link)
Thanks for all the work you're putting in to this!
Flat | Top-Level Comments Only