I’m building a WordPress site with the Spectra plugin.
I’ve got a grip on the basics now. Things like using the block editor, using appropriate blocks to generate the kind of layout I want etc.
However, I’m running into problems customizing the layout and appearance based on the device. The site looks fine on web since that’s where I’m designing it. But doesn’t look great on mobile. In particular, I’d like to:
1. Change the order of the top bar: From left to right, web has Logo, Navigation Bar, CTA Button. On mobile, I’d like it to be Navigation bar (three horizontal stacked lines), logo and then the CTA button.
2. Have different text in mobile vs. web
3. Modify text size
The only solution I can think of is to have two containers. 1 with a customized web layout and another with a customized mobile layout. I can then turn these on or off using the responsive editing functions in spectra. Is this the correct way to do it? Are there block types that allow more flexible configuration based on the device?
For context, I don’t particularly like the method I proposed because I will have to edit 2 different containers for every change.
[ad_2]
Responsive design refers to the *design* adapting itself to suit the device. You shouldn’t really be changing content – google won’t look kindly on your site if you do that. Blocks should adapt automatically to the viewing device. Using the wrong unit types for margins/padding (eg padding:200px) is a common issue I see people using, which breaks their page on mobile.
Modifying text size is a simple CSS using a Media Query [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries)
As for the mobile-specific menu layout change, AFAIK, FSE doesn’t yet have a way to build device-specific layouts using the same element, so you need to duplicate the header, and then show/hide it per-device.
When creating your site, design for mobile devices first. Make/create your page on your desktop but flip your WordPress view to mobile.