• I am building a new block based site with FSE on the 2023 theme. I can make everything look great on the desktop, however I need to make adjustments for mobile and I see no controls for this. Googling, I find lots of discussion, many of which are incorrect about mobile support. So, if you have any advice on how to style for mobile I would love to hear from you. I was hoping there was a plugin that would add this level of support, but everything I have tried so far either doesn’t work on the standard blocks or they are trying to sell you themes and other useless stuff. If the only way to accomplish is with CSS, any pointers to strategies for this would be much appreciated.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Moderator jordesign

    (@jordesign)

    Hi @spollock,

    By design – the styles and layout of 2023 will shift to allow for the smaller screen size – it’s deliberately responsive in that way. Which is why there are no controls specifically for changing settings for different screen sizes (like mobile).

    Can you tell me a little more about what kind of changes you’d be wanting to make?

    Thread Starter spollock

    (@spollock)

    thanks @jordesign,

    Yes much frustration trying to get things to look right on Mobile. Headings/Text look good on desktop, but wrap terribly on mobile so I want to make them fit on mobile without changing how they look on desktop. Images do seem to adjust pretty well, but when you stack image and text in columns in a block there is way too much padding between on Mobile. If I reduce or remove the padding, it looks terrible on desktop. So back and forth we go and neither view looks great as a result.

    I would send you a link, but would rather share it in a public forum.

    I’m thinking I may have to adjust CSS since there don’t seem to be any controls built in for this.

    All ideas greatly appreciated.

    Moderator jordesign

    (@jordesign)

    Hey @spollock, thanks for the additional explanation.

    Yes much frustration trying to get things to look right on Mobile. Headings/Text look good on desktop, but wrap terribly on mobile so I want to make them fit on mobile without changing how they look on desktop. Images do seem to adjust pretty well, but when you stack image and text in columns in a block there is way too much padding between on Mobile. If I reduce or remove the padding, it looks terrible on desktop. So back and forth we go and neither view looks great as a result.

    In terms of layout thing should do their best to shift elegantly – but you’re correct, there are some times when things like padding, or font size can a bit tricky.

    In those instances – CSS is definitely an option – however it is difficult to make specific suggestions without seeing the site itself.

    Hey @jordesign,

    There are some text elements that I truly want larger on the mobile screen, because currently they sometimes look elegant and clear on the desktop, but are too small on the mobile (or just smaller than personally desired).

    It would be very useful to me as a user if there were configuration options that let me set a different font size for the desktop and the mobile, specifically for these blocks: [query loop post elements, headings, buttons, and the mobile mega menu content].

    I am planning to do this through CSS. I hope the feature is considered in the near or far future, especially since it is an essential feature in some other site-builders.

    Furthermore, the feature would give me more flexibility and freedom on how my website looks for mobile visitors.

    With kind regards,

    • This reply was modified 10 months, 2 weeks ago by delrod.
    • This reply was modified 10 months, 2 weeks ago by delrod.
    • This reply was modified 10 months, 2 weeks ago by delrod.
    Moderator Felipe Santos

    (@foosantos)

    Hi there,

    Have you tried using Stackable for doing something like that? I was wondering if it could work for your use case.

    Thread Starter spollock

    (@spollock)

    Just to close the loop, I have had to do significant CSS work to get things to look properly on smaller screens.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘FSE with 2023 on Mobile’ is closed to new replies.