[ad_1]
Hello! I’m using the block editor and I’d like for my site to have a different footer on mobile. The theme I chose has two headers (one for mobile and one for desktop), so I know it’s possible but I’m unsure how.
Is it done with code or can I use the block editor and create a new footer and assign it to mobile only? Thanks!
[ad_2]
i don’t think gutenberg has this built in? [yet]
Most theme editors/page builders create duplicate elements and use display:none to hide them based on screensize.
This is horrible for markup, terrible for screenreaders unless they also make them invisible to those, and generally means bloated markup which can hurt rendering performance.
But to answer your question. You’d create a footer for desktop and another for mobile and use a CSS media query to show one on desktop and then the other on mobile.
Another approach is to create only a desktop or mobile one, and then use javascript to detect the viewport size to rearrange, resize, even recode the final render to work better for the other. Personally i prefer this solution since it reduces the amount of markup, there’s no duplication, however it can be problematic on older devices that have trouble processing javascript, and of course the insane people who disable javascript entirely.